追加されたオーバーレイのコンテンツにアクセスするのに苦労しています。たとえば、特定のクラスの div を含むオーバーレイを追加します。後でこのクラスの CSS を jQuery で修正しようとしても、何も起こりません。
最終的に私がやりたいことは、マップをロードしてから、マップをロードした後、クリックやマウスオーバーによってトリガーされるのではなく、それぞれの間にわずかな遅延を加えてオーバーレイの配列をフェードインすることです。
私の理想的なコードは次のとおりです。
<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>
別の関数で addOverlay を実行し、$.each ループ内で setTimeout を指定して呼び出してみましたが、何も読み込まれません。
JavaScript でばかげた間違いを犯したり、他の何かを完全に見逃したりすることはありますか?