The first new sample demonstrates two things that allot of people seem to strugle with. First off, using a map within a border layout, which when you get down too it is dead simple, but causes much frustration and confusion if you happen to do it incorrectly. The second thing is using a DataView (could be a grid, tree, etc) to interact with the map by giving a list of points to recenter the map on. Recentering is accomplished by clicking on an item in the DataView list, this triggers a click event in the DataView which then pulls the lat/lng from the DataStore and tells the map to center on it.

The next example is also a new one, demonstrating how to use a form to interact with the map. A basic dialog has been created with a form in it, this dialog is opened from the tool section of the window in the recenter-map example. From this form you can enter in either a lat/lng or a street address, and the data entered is used to manipulate the map. Its a handy and fun little example.

This last one was something I did on a whim, because I noticed these map windows being used all around the world I thought it would be a good idea to follow the standards used by ExtJS and localize the text contained within the code. When I set in to do this, I assumed I could pull localized text messages from Google for the error numbers Google provided – go figure, their API actually provides no text at all for the error codes they return. I ended up copying the error text from the Google API reference/docs into my code, which was annoying, but I didn’t see any other options.

Thats it for now, enjoy the map panel updates!

http://code.google.com/p/ext-ux-gmappanel/source/detail?r=17

http://code.google.com/p/ext-ux-gmappanel/

“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 extension. This is another useful example of extending a standard Ext component, in this case to interface with an external API. Check out the live example.”

I initially built this to use in a client project, and it struck me that maybe someone else would have this same need. This code also functions as an example for programmers looking to extend ExtJS components to their liking, its simple enough to be broken down and understood. The client had no problem with me releasing the code, so into the wild it went.

Upgrades will continue on this extension based on community feedback.

Getting Started

If you havent yet used the Google Maps API, then I would suggest going through some of their examples prior to this. I will assume that you already have knowledge of how the Google Maps API works.

Sadly, its quite easy if you already know what the Google Maps API needs, and what Ext provides. Getting to this point took me a few evenings of goofing with it. A Google Map initialization expects to be passed a DOM object, like what you would get from getElementById(‘bla’), and Ext provides this with Ext.get(‘bla’).dom. This changes slightly when your using a tab or window, because you want your map to render in the body area of the tab/window, Ext provides body.dom for these situations.

The window and Tab need to be rendered before you can gain access to the body.dom element, for this I just tag a show() in the end when they are being created.

Tabs

<br /> var tabs = new Ext.TabPanel({<br /> renderTo: ‘tabs’,<br /> width:450,<br /> height: 300,<br /> frame:true<br /> });<br /> var tab1 = tabs.add({id: ‘gmap’,title: ‘Map Tab’,html: ‘map’,tbar: [<br /> 'Address',<br /> addr_field = new Ext.form.TextField({<br /> width:200,<br /> qtip:'Example: 123 Fake Street, Baltimore, MD, 21211, US'<br /> })<br /> ]}).show();<br /> var tab2 = tabs.add({title: ‘Some Other Tab’});<br /> map = new GMap2(tab1.body.dom);<br />

Windows

<br /> dialog = new Ext.Window({<br /> title: ‘Google Map in a Window’,<br /> width:535,<br /> height:500,<br /> shadow:true,<br /> closeAction: ‘hide’,<br /> buttons: [<br /> {<br /> text:'Map Address',<br /> handler: function(){ Map.addressPrompt(); }<br /> },<br /> {<br /> text:'Close',<br /> handler: function(){ dialog.hide(); }<br /> }<br /> ]<br /> }).show();<br /> map = new GMap2(dialog.body.dom);<br />

The last line of each of these sniplets is the important part, it gives the Google Maps API access to the proper DOM element. Its just that simple, and when I figured it out, I was kicking myself.