PDA

View Full Version : Issue with Markers in a Map within a TabPanel



kru424
30 Jul 2010, 10:36 AM
I've got an Ext.Map object running perfectly as a standalone panel. It has a single marker which shows up fine. When I add this working object to a TabPanel, it still displays the map centered correctly. However, the marker never shows up. Am I supposed to attach a marker via a listener when the map renders? Hope this makes sense....

taylon
30 Jul 2010, 11:59 AM
You do have to have a listener so that it adds the maker after the map renders. I think something like the below should give you an idea along with an infowindow for the marker. Also I've never been able to get getLocation = true to work. My map never renders if I use it.

Anyway hope this helps.



var myMap = new Ext.Map({
// getLocation: true,
mapOptions: {
center: myLocation,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
listeners: {
delay: 500,
afterrender: function(){
// here we are adding the users location to the map
var marker = new google.maps.Marker({
map: myMap.map,
position: myLocation
});

var infowindow = new google.maps.InfoWindow({
content: 'You are here!'
});

google.maps.event.addListener(marker, 'click', function() {
infowindow.open(myMap.map, marker);
});
}
}
});

kru424
2 Aug 2010, 6:30 AM
It's not working for me... Did I miss something?

var mapdemo = new Ext.Map({
fullscreen:true,
title: 'Contact',
iconCls: 'search',
mapOptions: { center: position },
listeners: {
delay: 500,
afterrender: function(){
var infowindow = new google.maps.InfoWindow({ content: 'Liggett Stashower<br>LS Brand Building<br>1240 Huron Road<br>Cleveland, OH 44149' })
var marker = new google.maps.Marker({ map:mapdemo.map, position: position });
google.maps.event.addListener(marker, 'click', function() { infowindow.open(mapdemo.map, marker); });
}
}});

taylon
2 Aug 2010, 6:40 AM
Do you need your semi-colon at the end of your infowindow var? I didn't test your code but it might be hanging up there. I use it all the time so I tend to forget when it's actually required and when it's not.

Other then that the code looks like my example which I'm using in my app.

kru424
2 Aug 2010, 6:47 AM
Thank you for your help... I got it to work. My altered code is:

var mapdemo = new Ext.Map({
mapOptions: { center: position },
listeners: {
delay: 500,
afterrender: function(){
var infowindow = new google.maps.InfoWindow({ content: 'stuff' });
var marker = new google.maps.Marker({ map:mapdemo.map, position: position });
google.maps.event.addListener(marker, 'click', function() { infowindow.open(mapdemo.map, marker); });
}
}});

then, I moved the properties related to the TabPanel:
{
title: 'Location',
iconCls: 'search',
layout: 'fit',
items: mapdemo
}

Seems like having title, cls and iconCls as properties on the map were messing things up?

Again, thank you.