I'm struggling to access the contents of an overlay once it is added. I add an overlay that contains, say, a div with a particular class. If I later on try to amend the CSS of this class with jQuery, nothing happens.
Ultimately what I want to do is load the map, then fade the array of overlays in with a slight delay between each - not triggered by click or mouseover, simply after loading the map.
My ideal code would be:
<script>
var twitmarkers = [];
$(function(){
$('#map').gmap3({
action:'init',
options:{
center:[55.944878,-3.187469],
zoom: 15,
mapTypeId: google.maps.MapTypeId.SATELLITE
}
},
{
action: 'addMarker',
latLng:[55.944878,-3.187469],
data: "Remember When..?",
options:{
icon:"icon_youarehere.png"
}
}
);
twitmarkers = document.getElementById("tw").getElementsByTagName("marker");
$.each(twitmarkers, function(i) {
var lat = val.getAttribute("lat");
var lng = val.getAttribute("lng");
var text = val.getAttribute("content");
var img = val.getAttribute("user");
var name = val.getAttribute("name");
$('#map').gmap3({
action:'addMarker',
latLng:[lat, lng],
options:{
icon: "icon_twit.png"
}
},
{
action:'addOverlay',
latLng:[lat, lng],
content: '<div class="infoBox"><div class="tweet"><img src="' + img + '" /><h1>' + name + '</h1><p>' + text + '</p></div></div>',
offset: {
x:0,
y:0
}
}
);
});
});
</script>
/*** other stuff ****/
<script>
$('.infoBox').each(function (i) {
$(this).delay(1000*i).fadeIn();
});
</script>
I have tried doing the addOverlay in a separate function and calling it with a setTimeout within the $.each loop, but nothing loads at all.
Am I making a ridiculous mistake with my JavaScript, or missing something else completely, or is it much harder to do than I expect?