How to Create ExtJS Google Map?

Question

I tried the below code to create google map but didn't work. I am working on ExtJS 5.2.

Here is my code:

{
    xtype: 'mapPanel',
    title: 'Google Map',
    align: 'middle',
    padding: 10,
    pack: 'center',
    items: [{
        xtype: 'map',
        height: 300,
        width: 500,
        mapConfOpts: ['enableScrollWheelZoom', 'enableDoubleClickZoom', 'enableDragging'],
        mapControls: ['GSmallMapControl', 'GMapTypeControl', 'NonExistantControl'],
        center: {
            geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA',
            marker: {
                title: 'Fenway Park'
            }
        },
        markers: [{
            lat: 42.339641,
            lng: -71.094224,
            title: 'Boston Museum of Fine Arts',
            listeners: {
                click: function (e) {
                    Ext.Msg.alert('It\'s fine', 'and it\'s art.');
                }
            }
        }, {
            lat: 42.339419,
            lng: -71.09077,
            title: 'Northeastern University'
        }]
    }]
}

Any help will be appreciated. Thanks in advance.

xtype: 'map' belongs to the 6 version and up – Fabio Barros Jul 18 '18 at 13:12 — Fabio Barros, Jul 18 '18 at 13:12
Why my question is down voted? – Dipankar BARUA Aug 02 '18 at 14:39 — Dipankar BARUA, Aug 02 '18 at 14:39

score 2 · Answer 1 · answered Jul 18 '18 at 13:49

2

In ExtJS 5.x you need to use xtype: gmappanel.

Make sure you are including below script tag in your index.html before bootstrap/microloader:-

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>

And require GMapPanel:

Ext.require('Ext.ux.GMapPanel');

Code snippet:

{
    xtype: 'gmappanel',
    center: {
        lat: 22.785639,
        lng: 72.549574
    },
    mapOptions: {
        mapTypeId: google.maps.MapTypeId.TERRAIN,
        zoom: 6
    },
    markers: [{
        lat: 22.785639,
        lng: 72.549574,
        title: 'Ahmedabad',
        listeners: {
            click: function (e) {
                Ext.Msg.alert('It\'s fine', 'and it\'s art.');
            }
        }
    }, {
        lat: 22.643760,
        lng: 75.845472,
        title: 'Indore'
    }]
}

Working Example

Hope this will help/guide you.

answered Jul 18 '18 at 13:49

Rohit Sharma

1,402
9
20

Thank you so much for your great help but I didn't find the Ext.ux.gmappanel required file in my ExtJS framework 5.1.1 GPL. – Dipankar BARUA Jul 23 '18 at 13:06
I am getting this error and only showing on the browser blank screen no display Google Map: Uncaught TypeError: Cannot read property 'zoom' of null. Uncaught TypeError: Cannot read property 'getStyle' of null – Dipankar BARUA Jul 27 '18 at 11:19
Share [fiddle](https://fiddle.sencha.com/#view/editor) for what you have tried so far. – Rohit Sharma Aug 01 '18 at 08:55

How to Create ExtJS Google Map?

1 Answers1