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.
Adding a Google Map to a Tab or Window
Getting Started
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);
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);
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.
|
