I\'m having trouble getting map markers to display using Google Maps API v3. I\'m attempting to keep them all in a single array, to make displaying a large amount relativel
Okay, after quite a bit of messing around in Chrome's JavaScript console (I love that thing), I was able to get it working perfectly. I rewrote the mapinit()
and mark()
functions to this:
function mapinit() {
var conf = {
zoom: 11,
center: new google.maps.LatLng(45.7832856,-108.5006904),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('mapcont'),conf);
for(i in markers) {
markers[i][3] = new google.maps.LatLng(markers[i][0],markers[i][1]);
window.setTimeout('mark('+i+')',i*200);
}
}
function mark(i){
new google.maps.Marker({
position: markers[i][3],
animation: google.maps.Animation.DROP,
map: map,
title: markers[i][2]
});
}
The main difference here is that the position
variable of the marker seems to require being initialized in an outside variable for some reason, so when I loop through the markers
array, I generate a google.maps.LatLng
as the fourth item for each marker. This is then referenced within the mark()
function, and the marker displays successfully. The setTimeout
for staggering the display of the markers works wonderfully, especially on faster connections where the scripts and map load quickly.
View the end result on my inClass site