Using jquery 1.7.2, jquery-tools 1.2.7, and googlemaps api v3
First, here is a snippet of my code that creates a marker in googlemaps:
function createMarker(latlng, id) {
var marker = new google.maps.Marker({
map: googleMap,
position: latlng,
});
marker.set('id', id);
google.maps.event.addListener(marker, 'click', function() {
property_id = marker.get('id');
alert("add listener -> " + property_id);
$("#contentWrapBeta").overlay({
mask: {
color: '#ebecff',
loadSpeed: 100,
opacity: 0.5
},
effect: 'apple',
left: '2%',
top: '5%',
load: false,
onBeforeLoad: function() {
alert("on before load" + property_id);
var wrap = this.getOverlay().find(".contentWrap");
wrap.load('details.php?id=' + property_id);
}
});
alert("overlay.load ->" + property_id);
$("#contentWrapBeta").overlay().load();
});
markers.push(marker);
}
So, when i click the first marker, the alert "add listener" fires with the correct property_id, the "on before load" alert has the correct property id, and the "overlay.load" has the correct ID, the popup appears, all is well....
When i click on a second marker on the map, the "add listener" alert shows the correct ID (the new marker id that i set), the "overlay.load" is correct too, however,
The "on before load" alert has the previous markers property_id (!) - no matter what im try i cant seem to update it with new markers id's that i click, its "stuck" on the first markers property_id - so the wrap.load() calls with the same &id= variable.
Can anyone tell me why - its been bugging me for days now! And i cant seem to solve it.
many thanks