Who got Google Maps V3 and Ext JS 4 running?

[Gunmen]

Hi there,

Who got Google Maps V3 and Ext JS 4 running in a window panel?

I can't get the code of @VinylFox to work. I have added ext-all.js and ext-all.css, and his Ext.ux.GMapPanel3.js. Error: Uncaught TypeError: Object #<Object> has no method 'reg'. I guess the system of registration an extension has changed but not in this extension.

Is there a good working example?

Thanks!

[jbuonagurio]

I'm having similar problems trying to get Bing Maps working, the map renders fine inside of a panel but maybe I'm not fully understanding this MVC pattern, because I can't figure out how to use methods from outside the Ext.define.

/**
 * Map View
 * @extends Ext.Panel
 */

Ext.define('App.view.Map', {
    extend: 'Ext.Panel',
	alias: 'widget.mappanel',
	
	border: false,
	initComponent: function() {
		this.callParent(arguments);
		this.on('afterrender', this.afterRender, this);
	},
	afterRender: function() {
		var bingMapsKey = 'KEY';
		var wh = this.ownerCt.getSize();
		
		Ext.applyIf(this, wh);
		this.callParent(arguments);

		this.map = new Microsoft.Maps.Map(
			this.body.dom,
			{
				credentials: bingMapsKey,
				mapTypeId: Microsoft.Maps.MapTypeId.road,
				enableClickableLogo: false,
				enableSearchLogo: false,
				zoom: 7
			}
		);
	},
	setLocation: function() {
		var geoLocationProvider = new Microsoft.Maps.GeoLocationProvider(this.map);
		geoLocationProvider.getCurrentPosition();
	}
});

I guessed from this I'd be able to call App.view.Map.setLocation() but I get the "has no method" error. The map itself works fine though, if you don't need to interact with it you should be able to use Google Maps in the same way.

[Gunmen]

@jbuonagurio: Did you checked GMapPanel of Ext JS community member VinylFox?

[VinylFox]

I'm actually working on an ExtJS 4 compatible version right now.

[Gunmen]

I'm actually working on an ExtJS 4 compatible version right now.

Whohoo! Do you have a release date in mind?

I would love to use your extension to dynamically add and remove markers. This is where I'm now working on.

In the V2 maps extention version I had the problem that I could not center the map without adding a marker in the center (combined setting). I hope in the new version we can center the map without adding a marker.

[Gunmen]

Shea, can you tell how to add markers in the 'old version'? This is what I have so far...

point = new GLatLng(record.data.geo.coordinates[0], record.data.geo.coordinates[1]);
Ext.getCmp('map').addMarker(point, false, false, false, null);

How can I add a title? And show a msg or alert when the user clicks on a marker?

[VinylFox]

Did you see the createInfoWindow method?

[jbuonagurio]

@jbuonagurio: Did you checked GMapPanel of Ext JS community member VinylFox?

Yes I did (thanks VinylFox) and it appears to work similarly, but the variable scoping and inheritance in Ext JS 4 seems to work differently, maybe someone can clarify. For example in GMapPanel3.js the gmap object is defined in the apiReady function:

this.gmap = new google.maps.Map(this.body.dom, {
    zoom: this.zoomLevel,
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

The getMap method is then able to return the same object, but it doesn't seem to work this way in Ext JS 4. This code would not work:

getMap : function() {
    return this.gmap;        
},

I got around it by just defining gmap (map in my case) as a static variable and calling methods using prototype, e.g. App.view.Map.prototype.getPosition(); but I'm not sure if this is good practice.