Now a days Google map has come to play a vital role in web applications. This tip demonstrates how to integrate Google map with Extjs.
To integrate Google map API in Extjs we need to download Ext.us.GMapPanel user extention.
We can download it from the following link https://github.com/VinylFox/ExtJS.ux.GMapPanel.
Example :
Lets create a small example using GMapPanel.
To create an example we first need to link the Google map API :
then we need to link the following Javascript files :
Ext.onReady(function(){
var panel = new Ext.Panel({
renderTo: renderTo: Ext.getBody(),
height: 600,
width:700,
border:true,
items: [
//******** Set the GMapPanel config properties ************//
{
id: 'Gmap_panel_test',
xtype: 'gmappanel',
width:'100%',
height:500,
border: true,
gmapType: 'map',
zoomLevel: 15,
//****** Set the center point in the Google map ********//
setCenter: {
lat: 20.305762001399983,
lng: 85.85395932197571,
marker: {
title: 'Mindfire Solutions'
}
}
},
//******* Create a Button to get the Center of the GmapPanel ********//
{
layout: 'form',
buttonAlign: 'center',
width:'100%',
height:100,
buttons: [{
text: 'Save',
width: 50,
id: 'save',
handler:function(){
//******** Get the center of the Map to save ***********//
var gmap_cur_latlng = Ext.getCmp('Gmap_panel_test').getMap().getCenter();
var gmap_cur_lat = cur_glatlng.lat();
var gmap_cur_lng = cur_glatlng.lng();
//******** Alert the center point ***********//
var al = 'Lattitude - '+cur_lat+', Longitude - '+cur_lng;
alert(al);
} }]
}]
});
});
In the above example by specifying xtype: ‘gmappanel’ and setting the value for “lat” and “lng” we can easily integrate Google map in Extjs 3.3.
The function Ext.getCmp(‘mapid’).getMap().getCenter() is used to get the center point of the Google map. We can store the center points for future reference.
There are lots of othe