Ext.ux.GMapPanel - Google Maps

[VinylFox]

Updated April 26th 2009

This is an extension that adds Google Map functionality to any panel, or panel type of component. It has been tested with both 2.x and 3.x branches and appears to work fine in both.

Features:

• Render google map to a panels body
• Add map controls
• Set map center
• Add markers
• Geocode center location or markers
• Localization for error messages
• Use any Google map type, Moon, Sky, etc.

Working on:

• Add map controls via config (no instantiated) - added July 31
• Add multiple map controls - added July 31
• Add listeners for marker interaction - added July 31
• Add gmap config options - added July 31
• Document code - added August 20th
• Load KML file - added November 22nd
• Document code better - added January 27th
• Mars, Moon and Sky map support - added sky on March 19th (working on others still)
• Add more examples - added tab example on March 19th (will add more as needed), added more on April 26th

Bugs:

• setCenter killing controls when lat/lng used for center point instead of geocode - fixed August 20th
• Too many to remember - fixed January 27th
• setCenter kills the map when using lat/lng - unable to locate problem as of yet

*

The UX and Example code can be found on the Google SVN
http://code.google.com/p/ext-ux-gmappanel/

*

Please feel free to make modifications or additions and post them back to this thread - I will integrate them with the extension.

Blog Post:http://extjs.com/blog/2008/07/01/int...pi-with-extjs/

Live Example:http://www.extjs.com/playpen/gmaps/ux.gmaps.php (uses out-dated component code)

[willgillen]

Can you please outline the Licensing?

[NeonMonk]

Very cool!

[JorisA]

Awesome, I created something similar a while ago with the ability to automaticly add markers from a datastore, but I din't really finish it.

[EzBulka]

This might be old news but it's the first time I've discovered it. Apparently, if you copy the code in IE and paste it into your IDE, it pastes it as one line! Yikes. It works fine in the superior Firefox browser - at least 3.0 does. So in the future, could you post a link to the JS file to make it easier for use in IE? Thanks.

[LouiSe]

Hi VinylFox,

This is an excellent extension! But i've a - maybe stupid - question, how can i POST selected Google Maps position (LAT, LANG) by SUBMIT with FormPanel?

[VinylFox]

Originally Posted by LouiSe

Hi VinylFox,

This is an excellent extension! But i've a - maybe stupid - question, how can i POST selected Google Maps position (LAT, LANG) by SUBMIT with FormPanel?

Not a stupid question at all...what you will need is the center point from the maps handlers that Google provides. You can get a reference to the Google map by using getMap()

For example:

Ext.getCmp('yourmapid').getMap().getCenterPoint();

That would return a GMaps GLatLng object which could be used to retrieve lat/long info.

ie:

var cur_glatlng = Ext.getCmp('yourmapid').getMap().getCenterPoint();
var cur_lat = cur_glatlng.lat();
var cur_lng = cur_glatlng.lng();

Hope that helps.

[runnersixty]

thanks for the work.
I use this for map options:

just after this line

this.gmap = new GMap2(this.body.dom);

if(Ext.isArray(this.mapConfOpts)){
                for(I=0;I<this.mapConfOpts.length;I++){
                    try{
                        eval('this.gmap.'+this.mapConfOpts[I]+'();');
                    }
                    catch(e){
                        alert(this.mapConfOpts[I]+' is not a map configuration method');
                    }
                }
            } 

using this way:

addControl: new GSmallMapControl(),
mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
..... 

for sure not the best and clean way, but it works.

Davide.

[LouiSe]

Thanks, this is helpful for me!

[EzBulka]

Perhaps this problem exists outside of the GMapPanel as well. But if you move the Panel outside the bounds of the browser, there might be no way to get it back. If you try to grab the panel, of course, you will simply grab the map. I put this in to prevent that:

listeners:{

    'move':{

        fn:function(){

            if (this.y < 0) this.setPosition(this.x,0);

        }

    }

}