![[image]](http://mowser.com/img?url=http%3A%2F%2Fwww.extjs.com%2Fassets%2Fimages%2Fc-sep.gif)
Integrating Google Maps API With ExtJS
Theres no doubt that Google has some interesting and very useful JavaScript API’s – most of which I end up using over and over again. So why not package them up into an Ext component? Well thats exactly what I decided to do, adding a simple component centered around the Google Maps API.
These are components that extend from Panel and showcase just how easy it is to make ExtJS do whatever you need. Since they extend from Panel, it means you can use them anywhere a panel can be used – such as a window, viewport or layout.
In this first release I am only supporting map types of ‘map’ (what Google refers to as the ‘Normal Map’) and the street view ‘panorama’, but I hope to be able to integrate the Moon, Mars and Sky maps soon enough.
With the extended component and a little bit of code we have a functional Google street view window with panning, zoom and navigation.
var panwin = new Ext.Window({
layout: 'fit',
closeAction: 'hide',
title: 'GPanorama Window',
width:400,
height:300,
x: 480,
y: 60,
items: {
xtype: 'gmappanel',
gmapType: 'panorama',
setCenter: {
lat: 42.345573,
'long': -71.098326
}
}
});
It’s just as easy to create a Google map window that maps addresses and places markers at their locations (which could just as easily be nested in a layout instead).
A couple of the primary Google maps handlers and settings are setup as configuration options. For instance, ‘addControl’ allows adding of a standard Google map control (zoom, pan, etc) and the ‘zoomLevel’ sets a default zoom level for the map.
Geocoding can be used by substituting the lat/long configuration options with a ‘geoCodeAddr’ string.
The ’setCenter’ configuration allows the default center location of the map to be set, along with a marker. More markers can be added to the map using the ‘markers’ array.
var mapwin = new Ext.Window({
layout: 'fit',
title: 'GMap Window',
closeAction: 'hide',
width:400,
height:400,
x: 40,
y: 60,
items: {
xtype: 'gmappanel',
region: 'center',
zoomLevel: 14,
gmapType: 'map',
addControl: new GSmallMapControl(),
setCenter: {
geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA',
marker: {title: 'Fenway Park'}
},
markers: [{
lat: 42.339641,
'long': -71.094224,
marker: {title: 'Boston Museum of Fine Arts'}
},{
lat: 42.339419,
'long': -71.09077,
marker: {title: 'Northeastern University'}
}]
}
});
With a bit more work, we could have the many offerings of the Google Maps API integrated for easy usage with ExtJS. For now the functionality thats missing can be accessed using the ‘getMap’ handler.
Take a look at the code, see how to use it, or just play with the example.
![[image]](http://mowser.com/img?url=http%3A%2F%2Fwww.extjs.com%2Fassets%2Fimages%2Fkey.gif)
It looks great. A context menu for marking or opening a panaroma view for specific place would be great.
Can’t wait to try it out, looks very nice.
I’m also going to try out Ext GWT, will this also be available in Ext GWT?
Perfect job! This is very helpfull.
Very nice! I would really like to use this, but unfortunatly GoogleMaps does not let you use the maps api for commercial applications.
Has anyone coded something similar, but using the Yahoo Maps API?
@Daniel – Google does offer a commercial usage option – http://www.google.com/enterprise/maps/
The Yahoo JavaSript maps API is quite similar to the Google Maps API, so I would imagine you could start with this code and not need to do a whole lot to switch it over.
Very nice.
@Shea
I shudder to think what they’re charging, though. -_-’
Error in my localhost:-> this.B is null
@raphael – I have noticed that happening when there is a slow response getting the map from Google and adding markers happens before the map is rendered. I was not able to find an appropriate event to attach adding the markers to, so I added a delay (line 67) which eliminated this problem for me, but it appears this can still cause problems for some users.
Increasing the delay time will help, or finding the appropriate event.
What’s the license of the published code?
@Lars – Free as a bird. Use it anywhere or any way you like.
Very nice Frederick. I was playing with this too and created also some kind of extension for Google maps and Live Earth maps 2 weeks ago.
When looking at your code I already find answers for things I was struggling with. Thanks for the share!
Very good!
Increasing the delay time solved the problem.
Thanks!
This is great stuff. I have a project which required this and I was just about to do it the manual way so you saved me a lot of time.
Just a suggestion: You seem to need quotes around long because it is a reserved word and might otherwise be misinterpreted. Why, then don’t you use Google’s standard – lng – or the more recognized standard – lon?
I added some “onclick” capabilites to the map markers.
Is there somewhere (forum thread, wiki page, other) where I can post this update?
@willgillen – added a forum post, and would love to see your additions posted there.
http://extjs.com/forum/showthread.php?p=191301
@E Bulka – thanks for pointing that out, I cant think of a good reason to not use ‘lng’ instead of ‘long’ – the thought just never crossed my mind. I have adjusted this in the forum post code to use ‘lng’ since thats what Google Maps uses.
Simply brilliant!
how should I be using this. It looks really nice. Can someone help me with this
Hi willgillen , Could you please post the code for the “onclick†capabilites added to the map markers?
Thanks,
dmat
Thanks for the helpful information
how can i get this to play well with toolbars?
my map goes under my bbar…
I love Google API!
I know a very good site that uses this. Its a real estate search engine called Imobilien.
this is very good!
Good job,
now Im trying to modify the script to change the map of the window but i get a problem.
In the listener when a row is selected I add a new gmap component to the window. Here there is a fragment:
…
selector.addListener(‘rowselect’, function(f, index, record)
{
mapwin.add(new Ext.ux.GMapPanel({
region: ‘center’,
zoomLevel: 8,
id: ‘mapa’,
gmapType: ‘map’,
addControl: new GSmallMapControl(),
setCenter: {
geoCodeAddr: record.get(‘nom_ent_sin’)+”, “+record.get(‘nom_mun_50′),
marker: {
title: record.get(‘nom_ent_sin’),
}
}
}));
mapwin.setTitle(record.get(‘nom_ent_sin’));
mapwin.show();
});
the problem is that the content is not updated. I would like that content were updated
when i select a distinct row.
Brilliant! I used this as a framework for my site UI and it’s pure beauty. Thanks a lot for creating this.
Lars – Free as a bird. Use it anywhere or any way you like.
Nice feature.
Is it possible to get the live data from DB?
Скажите, а у Ð²Ð°Ñ ÐµÑÑ‚ÑŒ RSS поток в Ñтом блоге?
Great stuff, thanks! I have the 3.0 pre-alpha extjs and Ext.ux.GMapPanel.js and can’t get the getMap to work. I read elsewhere that you should be able to do this:
mapPanel = new Ext.Panel({
id: ‘map_panel’,
….
});
Ext.getCmp(‘map_panel’).getMap();
Is that how it’s supposed to work?
You can delete my idiotic comment. Sorry.
thanks very much
Да делали
the extjs blog has produced a component which extends Panel and integrates with the Google Maps API here allowing you to display google maps anywhere you can use a Panel, that includes windows, viewports
Very good, congratulations article
I am grateful to you for this great content.
he extjs blog has produced a component which extends Panel and integrates with the Google Maps API here allowing you to display google maps anywhere you can use a Panel, that includes windows, viewport
the extjs blog has produced a component which extends Panel and integrates with the Google Maps API here allowing you to display google maps anywhere you can use a Panel, that includes windows, viewports
@raphael – I have noticed that happening when there is a slow response getting the map from Google and adding markers happens before the map is rendered. I was not able to find an appropriate event to attach adding the markers to, so I added a delay (line 67) which eliminated this problem for me, but it appears this can still cause problems for some users.
Increasing the delay time will help, or finding the appropriate event.
Lars – Free as a bird. Use it anywhere or any way you like.
In this first release I am only supporting map types of ‘map’ (what Google refers to as the ‘Normal Map’) and the street view ‘panorama’, but I hope to be able to integrate the Moon, Mars and Sky maps soon enough.
Geocoding can be used by substituting the lat/long configuration options with a ‘geoCodeAddr’ string.
tnks for all
Thank you very much for everything
he extjs blog has produced a component which extends Panel and integrates with the Google Maps API here allowing you to display google maps anywhere you can use a Panel, that includes windows, viewport
Thanks for share.
Nice piece of text I must say. Is it oke for me to make a translation in Dutch with a obvious link to this article?
teşekkürler iyi iş
n to take advantage of more of the ssnative funct
Tnaks for sharing…
I’m also from the real estate industry, focusing on green issues, liked your post and bookmarked it, check my blog
If I try changing to map type it does not do anything. I changed
gmapType: ‘map’,
to
gmapType: G_SATELLITE_MAP,
in the gmaps.js file. But It comes back blank. Only ‘map’ and ‘panorama’ seems to work, even if the source code says the other types should work. I am probably changing it in the wrong place. Any sample js file showing how to use other map types?
hi
i am getting an error of “Gmap2 is undefined”. any idea why that is ???? thanks for any help…..