PDA

View Full Version : Google Map in a Panel



alfiethecoder
8 Sep 2011, 4:17 AM
I'm having real trouble getting a map panel to display in part of a vbox layout.

My code:


this.pnlSiteDetailContentMap = new Ext.Map({
useCurrentLocation: true,
flex: 1
});


/*
* Detail panel for the site screen
*/
this.pnlSiteDetailContent = new Ext.Panel ({
layout: {
type: 'vbox',
align: 'stretch'
},
items: [this.frmSiteDetail, this.pnlSiteDetailContentMap]
});



/*
* Detail panel for the site screen
*/
this.pnlSiteDetailWrapper = new Ext.Panel ({
id: 'pnlSiteDetailWrapper',
items: [isis.pnlSiteDetailContent],
dockedItems: [isis.pnlSiteDetailToolbar]
});




The code compiles and runs fine, without any errors in the Console. Although the form (frmSiteDetail) is displayed in the top half of the vbox, the Map is not displayed in the bottom half. Any ideas what I'm doing wrong?

Thanks in advance.

NickT
8 Sep 2011, 8:30 AM
A few possible solutions:

1. on your outermost containing panel, did you set fullscreen:true ?
2. you have 2 items in that outermost panel, one of them having a flex. did you specify a static height for the other?

Here is an example of a vbox stretch panel containing 2 items. I added the map to a panel as you will see, and i would recommend you do that because you will want to have the ability to contain the drag event and possibly the scrolling. In the example, i believe the height and width of 100% is redundant to fullscreen: true. I would suggest setting fullscreen if you can. also, as stated, i have wrapped the map inside a panel and added flex to it, while statically defining a height for the un-flexed item.



var latitude = 19.929192,
longitude = 73.836038;


var map = new Ext.Map({
mapOptions: {
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
geo:new Ext.util.GeoLocation({
autoUpdate:false,
timeout:1000,
listeners:{
locationupdate: function(geo) {
var center = new google.maps.LatLng(latitude, longitude);




if (map.rendered)
map.update(center);
else
map.on('activate', map.onUpdate, map, {single: true, data: center});
},
locationerror: function(geo) {
alert('got geo error');
}
}
})
});



{ fullscreen: true,
xtype: 'formpanel',
layout: {
type: 'vbox',
align: 'stretch'
},
baseCls: 'ts-list-panel',
width: '100%',
height: '100%',
scroll: 'vertical',
defaults: {
labelWidth: '20%'
},
dockedItems: [
{
xtype: 'toolbar',
back: {
text: 'Back',
handler: function(button) {
}
}
}
],
items:[
{
xtype:'panel',
html:'Test Page!',
height: 100
},
{
xtype:'panel',
flex: 1,
scroll: false,
listeners: {
el: {
drag: { fn: function() {
} }
}
},
items:[map]
}
]
}

alfiethecoder
13 Sep 2011, 2:16 AM
Thanks for your reply.

In the end, to save screen real estate, I opted to put the map in a TabPanel, so the user could switch between it and the form details. What a nightmare! It took me days to get the map to actually draw properly and centre properly.

In the end I had to force an activate on the MapPanel every time a record from my list was selected:


isis.pnlSiteDetailContentMap.fireEvent('activate', isis.pnlSiteDetailContentMap);

and then in the Activate event handler, I had to force it to resize and redraw the map.


activate : function(theMap){
theMap.setWidth('100%');
theMap.setHeight('100%');
theMap.map.setCenter(isis.pnlSiteDetailContentMap.currentLatLng);
theMap.map.panTo (isis.pnlSiteDetailContentMap.currentLatLng);}

google.maps.event.trigger(theMap.map, 'resize');
}


If I didn't do this, then the map wouldn't re-render, and it wouldn't fill the panel either, but it took me a long time to work it out.