getMap() is undefined

[AnkitDesai11]

I have migrated from Google Map api v2 to v3. When I try to call getMap() on gmaappanel to pass to markercluster, I am not getting Map object. I have updated GMapPanel3.js and v3 url. If I don't do clustering of marker than it works fine as I am n't extracting Map object from GmapPanel. Code is as below.

Ext.create('Ext.Viewport', {
id:'viewport',
title: 'Site Register',
layout: 'border',
items: [
{
region: 'west',
title: '',
id:'searchPanel',
split:true,
width:600,
autoScroll:true,
items:[
{
xtype :'panel',
id :'inboxListPanel',
emptyText: 'No records',
title : 'Inbox',
collapsible: true,
draggable: true,
style :'text-align:center',
items : [grid]
}
]
},{
region: 'center',
id: 'mainPanel',
deferredRender: false,
items: [
Ext.create("Ext.tab.Panel", {
region: 'center',
id:'mapPanel',
width:'100%',
activeTab: 0,
items: [{
xtype: 'gmappanel',
title: 'Map',
id : 'gSiteMap',
width:900,
height:850,
zoomLevel: 5,
gmapType: 'map',
mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
setCenter: {
geoCodeAddr: '1600 Penn St, Washington DC, DC',
marker:{ title: 'HQ, Washington DC DC'}
}
}]
}]
});

var gmp = Ext.getCmp('gSiteMap');
var gm = gmp.getMap(); <----------------- gm is undefined !

[AnkitDesai11]

You created new method called "apiReady" and moved code from "afterRender" to apiReady in v3. You may want to add that code in afetrRender too. Well it works in my case and I am seeing Map object from getMap() call on gmappanel.

[VinylFox]

Please don't do that, your overriding functions - this is why we have events in our code.

Use the 'mapready' and 'apiready' events.

[AnkitDesai11]

Thanks for reply. I will update as you suggested. Another thing I noticed is GMapPanel has
if (window.google && window.google.maps){
this.on('afterrender', this.apiReady, this);
}else{
window.gmapapiready = Ext.Function.bind(this.apiReady,this);
this.buildScriptTag('http://maps.google.com/maps/api/js?sensor=false&callback=gmapapiready');
}

If we give map api url as src in our html or jsp, it conflicts with above and I was not seeing the map.

But as you said use event proper way. I will keep in mind.

[VinylFox]

The code you mentioned is meant to automatically include the library if you havent already. If your including the maps library before this UX then it should work properly. Please see the advanced examples for usage.

https://github.com/VinylFox/ExtJS.ux.GMapPanel/blob/master/examples/advanced/recenter-map.html

[Shivaganga]

I have upgraded my google map version v3 from v2. But now I got an error this.getMap(...) is undefined. this.getMap().setCenter(point, this.zoomLevel). Please help me to resolve this issue.. I have used https://github.com/VinylFox/ExtJS.ux.GMapPanel/blob/master/src/Ext.ux.GMapPanel3.js this plugin. Please please please help me to resolve this issue.

[treasury23]

I use this library http://dev.sencha.com/ext/5.0.1/examples/ux/GMapPanel.js.
I can not get to the map: var map = Ext.getCmp('map').getMap(); <--Uncaught TypeError: undefined is not a function

How do I correctly get the map? Thanks

[anx-mwutte]

If you need a fix for this problem you can try this snippet:

if (!gmapPanel.getMap()) {
	gmapPanel.on('mapready', function () {
		gmapPanel.geoCodeLookup(address, {}, false, true, undefined);
	}, this);
} else {
	gmapPanel.geoCodeLookup(address, {}, false, true, undefined);
}