Geek Answers Handbook

Markers do not display (JavaScript / Google Maps V3 API)

I'm having trouble displaying map markers using the Google Maps API v3. I try to keep them all in one array to make displaying a large number relatively easy. Currently, the map loads fine, but when I try to draw markers, it throws an Uncaught TypeError: Object #<Object> has no method 'setValues' error Uncaught TypeError: Object #<Object> has no method 'setValues' . The error is repeated with each iteration performed by setTimeout() . Any recommendations would be highly appreciated.

This is the JavaScript used:

 var map; var markers = [ [ 45.768366, -108.5975760, 'Fitness 19' ], [ 45.785684, -108.6144625, 'Granite Fitness' ], ... (more, syntactically correct) [ 45.7920092, -108.4886232, 'Steepworld' ] ]; 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) { window.setTimeout('mark('+i+')',i*200); } } function mark(i){ google.maps.Marker({ position: google.maps.LatLng(markers[i][0],markers[i][1]), animation: google.maps.Animation.DROP, title: markers[i][2] }); }
+3
javascript google-maps
source share
2 answers

Well, after I figured out a bit in the Chrome JavaScript console (I like it), I was able to make it work fine. I rewrote the mapinit() and mark() functions:

 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 marker position variable seems to require initialization in an external variable for some reason, so when I go through the markers array, I generate google.maps.LatLng as the fourth for each marker. This parameter then refers to the mark() function, and the marker is displayed successfully. setTimeout for a stunning display of markers works great, especially on faster connections where scripts and a map load quickly.

View the final result on my inClass website

+5
source share

This is the new keyword that makes all the difference!

I had the same problem. Using a new keyword when building a Marker object makes it work in Chrome at least. There was no waiting for him at different times. And here I thought that new was nothing more than syntactic sugar ...

+6
source share

More articles:


All Articles