ExtJS Google Maps Panel

I was browsing the Ext JS (3.3.x) example and saw the Google Maps Panel which was written based on Google Maps API v2. I thought it might be a good idea to migrate it to use v3, since v2 has been officially deprecated for sometime. Beside migrating the code, I modified the input parameter to accept MapOptions and also added 2 new features:

• option to show InfoWindow at the center & other markers.
• option to draw circle overlay at the center marker.

The full source code and example is available at myGit. I did not include Ext JS 3.3.1 into the repository.

Get Wongso Wijaya’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

[sourcecode language=”javascript”]
Ext.ux.GoogleMapPanel = Ext.extend(Ext.Panel, {
…
addMarker : function(point, marker, clear, center, listeners, infoWindowOptions){
if (clear === true){
this.getMap().clearOverlays();
}
if (center === true) {
this.getMap().setCenter(point);
}

var mark = new google.maps.Marker({
map: this.getMap(),
position: point,
title: marker.title
});

var infoWindow = null;
if (infoWindowOptions != null) {
infoWindow = new google.maps.InfoWindow(infoWindowOptions);
google.maps.event.addListener(mark, ‘click’, function() {
infoWindow.open(this.getMap(),mark);
});
}
if (typeof listeners === ‘object’){
for (evt in listeners) {
google.maps.event.addListener(mark, evt, listeners[evt]);
}
}
return mark;
},
drawCircle: function(circleOptions) {
this.circleOverlays = new google.maps.Circle(circleOptions);
this.circleOverlays.setCenter(this.getCenter());
this.circleOverlays.setMap(this.getMap());
}
…
});

Ext.reg(‘gmappanel’, Ext.ux.GoogleMapPanel);
[/sourcecode]