Integrating Google Maps API With ExtJS
July 1, 2008 by Shea Frederick
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.
- Maps Panel
- StreetView Panel
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.
Posted on July 1st, 2008 at 9:53 am
[...] out the blog post for full details and code, or jump straight to the live example to play with it (don’t forget [...]
Posted on July 1st, 2008 at 10:14 am
It looks great. A context menu for marking or opening a panaroma view for specific place would be great.
Posted on July 1st, 2008 at 10:41 am
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?
Posted on July 1st, 2008 at 10:41 am
[...] Shea Frederick has created a user-defined extension to integrate Google Maps with ExtJS. [...]
Posted on July 1st, 2008 at 10:41 am
Perfect job! This is very helpfull.
Posted on July 1st, 2008 at 10:48 am
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?
Posted on July 1st, 2008 at 11:09 am
@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.
Posted on July 1st, 2008 at 12:16 pm
Very nice.
Posted on July 1st, 2008 at 5:42 pm
@Shea
I shudder to think what they’re charging, though. -_-’
Posted on July 1st, 2008 at 8:12 pm
Error in my localhost:-> this.B is null
Posted on July 1st, 2008 at 10:35 pm
@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.
Posted on July 2nd, 2008 at 2:30 am
What’s the license of the published code?
Posted on July 2nd, 2008 at 8:47 am
@Lars - Free as a bird. Use it anywhere or any way you like.
Posted on July 2nd, 2008 at 3:56 pm
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!
Posted on July 2nd, 2008 at 9:45 pm
[...] Frederick has a post on the ExtJs blog on how to integrate Google Maps with your ExtJs application. Very cool stuff. I can’t wait to see mapping play a bigger and bigger part on websites. You [...]
Posted on July 2nd, 2008 at 11:16 pm
Very good!
Increasing the delay time solved the problem.
Thanks!
Posted on July 3rd, 2008 at 4:56 pm
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?
Posted on July 4th, 2008 at 1:02 pm
[...] Ext JS - 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? Tags: agile, ajax, api, appserver, AquaLogic, architecture, batch, BEA, business, development, esb, extjs, gears, google, googlemaps, gwt, hacks, http, infoq, J2EE, java, java7, javascript, methodology, microsoft, netflix, news, nio, opensource, oracle, politics, presentation, programming, projectmanagement, rant, roku, screencast, scrum, security, SOA, software, spring, SpringFramework, streaming, sync, tools, usa, utilities, video, WebLogic, windows, xss [...]
Posted on July 4th, 2008 at 1:04 pm
I added some “onclick” capabilites to the map markers.
Is there somewhere (forum thread, wiki page, other) where I can post this update?
Posted on July 6th, 2008 at 8:47 pm
@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.
Posted on July 7th, 2008 at 1:17 am
Simply brilliant!
Posted on July 8th, 2008 at 9:46 am
[...] Integrating Google Maps API With ExtJS - если вы используете в разработке такой мощнейший фреймворк для создания веб-интерфейсов, как ExtJS, и сталкиваетесь с потребностью работать с картами от сервиса Google Maps, то здесь вы найдете красивые и функциональные примеры интеграции карт в ваши приложения на ExtJS. На мой скромный взгляд это, вместе со средой Adobe AIR и поддержкой AIR-а в ExtJS может действительно сделать небольшую революцию в хорошем смысле, на рынке веб-приложений. Попробуйте, это красиво, практично и просто! [...]
Posted on July 8th, 2008 at 3:51 pm
how should I be using this. It looks really nice. Can someone help me with this
Posted on July 10th, 2008 at 9:43 am
Hi willgillen , Could you please post the code for the “onclick” capabilites added to the map markers?
Thanks,
dmat
Posted on July 12th, 2008 at 10:13 pm
Thanks for the helpful information
Posted on August 4th, 2008 at 5:00 am
[...] http://extjs.com/blog/2008/07/01/integrating-google-maps-api-with-extjs/ [...]
Posted on August 4th, 2008 at 11:12 pm
[...] This extension was originally written up as a demo for one of our previous blog posts. However, it proved to be such a hit with the community that we transformed it into an official [...]
Posted on August 5th, 2008 at 8:05 am
[...] This extension was originally written up as a demo for one of our previous blog posts. However, it proved to be such a hit with the community that we transformed it into an official [...]
Posted on August 6th, 2008 at 2:05 pm
how can i get this to play well with toolbars?
my map goes under my bbar…
Posted on October 17th, 2008 at 3:58 pm
I love Google API!
I know a very good site that uses this. Its a real estate search engine called Imobilien.
Posted on October 18th, 2008 at 11:21 am
this is very good!
Posted on October 20th, 2008 at 8:33 pm
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.
Posted on October 28th, 2008 at 11:30 am
Brilliant! I used this as a framework for my site UI and it’s pure beauty. Thanks a lot for creating this.