Blog

Integrating Google Maps API With Ext JS

July 01, 2008 | Shea Frederick

StreetViewTheres 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
		}   
	}
});
GMapIt'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'}
    		}]
        }
});
GMap All 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.

There are 71 responses. Add yours.

Rich Waters » Blog Archive » Ext &

5 years ago

[...] out the blog post for full details and code, or jump straight to the live example to play with it (don’t forget [...]

serkanyersen

5 years ago

It looks great. A context menu for marking or opening a panaroma view for specific place would be great.

Luuk Peters

5 years ago

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?

Google Map Component for ExtJS | My Other Beans :

5 years ago

[...] Shea Frederick has created a user-defined extension to integrate Google Maps with ExtJS. [...]

Murat Çorlu

5 years ago

Perfect job! This is very helpfull.

Daniel Haas

5 years ago

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?

Shea Frederick

5 years ago

@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.

Bo

5 years ago

Very nice.

mdmadph

5 years ago

@Shea

I shudder to think what they’re charging, though. -_-’

raphael

5 years ago

Error in my localhost:-> this.B is null

Shea Frederick

5 years ago

@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 Kneschke

5 years ago

What’s the license of the published code?

Shea Frederick

5 years ago

@Lars - Free as a bird. Use it anywhere or any way you like.

SilverJo

5 years ago

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!

Putting Google Maps on your site with ExtJs | fooj

5 years ago

[...] 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 [...]

raphael

5 years ago

Very good!
Increasing the delay time solved the problem.
Thanks!

E Bulka

5 years ago

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?

Daily del.icio.us for July 1st through July 4th &#

5 years ago

[...] 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 [...]

willgillen

5 years ago

I added some “onclick” capabilites to the map markers.
Is there somewhere (forum thread, wiki page, other) where I can post this update?

Shea Frederick

5 years ago

@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.

Riz

5 years ago

Simply brilliant!

???-????? #14: ? ?????? ????????????????, ????????

5 years ago

[...] Integrating Google Maps API With ExtJS - ???? ?? ??????????? ? ?????????? ????? ????????? ????????? ??? ???????? ???-???????????, ??? ExtJS, ? ????????????? ? ???????????? ???????? ? ??????? ?? ??????? Google Maps, ?? ????? ?? ??????? ???????? ? ?????????????? ??????? ?????????? ???? ? ???? ?????????? ?? ExtJS. ?? ??? ???????? ?????? ???, ??????  ?? ?????? Adobe AIR ? ?????????? AIR-? ? ExtJS ????? ????????????? ??????? ????????? ????????? ? ??????? ??????, ?? ????? ???-??????????. ??????????, ??? ???????, ????????? ? ??????! [...]

Max

5 years ago

how should I be using this. It looks really nice. Can someone help me with this

dmat

5 years ago

Hi willgillen , Could you please post the code for the “onclick” capabilites added to the map markers?

Thanks,
dmat

Integrating Google Maps API With ExtJS : No Matter

5 years ago

[...] http://extjs.com/blog/2008/07/01/integrating-google-maps-api-with-extjs/  [...]

Ext JS - Blog

5 years ago

[...]  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 [...]

Andrey Kostenko. Home » Blog Archive »

5 years ago

[...]  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 [...]

heidtmare

5 years ago

how can i get this to play well with toolbars?
my map goes under my bbar…

Clarisse

5 years ago

I love Google API!
I know a very good site that uses this. Its a real estate search engine called Imobilien.

Elver

5 years ago

this is very good!

_IO_

5 years ago

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.

Bookmarks about Js

5 years ago

[...] - bookmarked by 4 members originally found by Jimishter on 2008-10-19 Integrating Google Maps API With ExtJS http://extjs.com/blog/2008/07/01/integrating-google-maps-api-with-extjs/ - bookmarked by 1 members [...]

Joe

5 years ago

Brilliant!  I used this as a framework for my site UI and it’s pure beauty.  Thanks a lot for creating this.

Estetik

4 years ago

Lars - Free as a bird. Use it anywhere or any way you like.

prabhukm

4 years ago

Nice feature.

Is it possible to get the live data from DB?

edgergepeP

4 years ago

???????, ? ? ??? ???? RSS ????? ? ???? ??????

Google Map Component for Ext-JS | Claude Betancour

4 years ago

[...] Shea Frederick has created a user-defined extension to integrate Google Maps with ExtJS. [...]

DoshTracker Update #2 - Ext JS and Google Maps API

4 years ago

[...] 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 [...]

Ext 2.2 Released

4 years ago

[...] 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 [...]

Ted

4 years ago

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?

Ted

4 years ago

You can delete my idiotic comment. Sorry.

nndti

4 years ago

sanndti

4 years ago

bayrak

4 years ago

thanks very much

voniatony

4 years ago

?? ??????

Medyum

4 years ago

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

aöf

4 years ago

Very good, congratulations article

cinsellik

4 years ago

I am grateful to you for this great content.

radyo dinle

4 years ago

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

ssk sorgulama

4 years ago

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

zerrin egeliler

4 years ago

@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.

medyum

4 years ago

Lars - Free as a bird. Use it anywhere or any way you like.

Laptop

4 years ago

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.

kocluk

4 years ago

Geocoding can be used by substituting the lat/long configuration options with a ‘geoCodeAddr’ string.

medyum

4 years ago

tnks for all

medyum

4 years ago

Thank you very much for everything

araç sorgulama

3 years ago

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

Usdating

3 years ago

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?

medyumlar

3 years ago

te?ekkürler iyi i?

Ben 10 Alien Force

3 years ago

Tnaks for sharing…

Real Estate Blog

3 years ago

I’m also from the real estate industry, focusing on green issues, liked your post and bookmarked it, check my blog smile

Bernard

3 years ago

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?

div

3 years ago

hi
i am getting an error of “Gmap2 is undefined”. any idea why that is ???? thanks for any help…..

Mapquest Driving Directions

3 years ago

i love google maps all things that you can do with them its truly awesome but i also love mapquest, i love maps in fact

Orjin Krem

3 years ago

I’m also from the real estate industry, focusing on green issues, liked your post and bookmarked it, check my blog smile

Talha

3 years ago

Amazing job, thanx for sharing and your efforts..

Buckie

2 years ago

Now I feel stupid. That’s cleeard it up for me

Bkmz

2 years ago

How add new marker? Interest code

Eduardo Ibarra

2 years ago

I’d like to know that too, I tried with myMapName.AddMarkerI(lat, long) but it didn’t work, what’d be the right constructor for this?

Thanks!

shweta

2 years ago

hi… as i am new to sencha…
i wanted to know how do we use google map in sencha touch in finding a particular location ??
Any help wud be awesome…
thnaks….

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.
Facebook Activity
Categories