VinylFox

Adding a Google Map to a Tab or Window

The code used for this example is available here. Working examples can be found here.

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

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

Windows

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

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.