Databases
StackOverflow2013
Postsdbo
POGoogle Maps geocoding and markers in loop
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGoogle Maps geocoding and markers in loop
    text
    copied!<p>I'm completely puzzled here. I have a list of objects each containing a location. I look up this location using the google.maps.geocoder and afterwards I put a marker for that location on a map.</p> <p>But for some reason only one marker appears. I guess this has to do with the closures problem I've seen in other threads around here but I just can't seem to apply the solution to what I have.</p> <p>My code is as follows:</p> <pre><code>var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); map.fitBounds(bounds); for (var item in list) { var geocoder = new google.maps.Geocoder(); var geoOptions = { address: item.location, bounds: bounds, region: "NO" }; geocoder.geocode(geoOptions, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { addMarker(map, item, results[0].geometry.location); } else { console.log("Geocode failed " + status); } }); } function addMarker(map, item, location) { var marker = new google.maps.Marker({ map : map, position : location}); marker.setTitle(item.title); var infowindow = new google.maps.InfoWindow( { content : item.body, size : new google.maps.Size(100, 300) }); (function(map, marker) { new google.maps.event.addListener(marker, "click", function() { infowindow.open(map, marker); }); })(map, marker); } </code></pre> <p>Any help is appreciated.</p> <p><strong>Update:</strong> To avoid closures in loops as suggested in first answer, I have changed the code to this:</p> <pre><code>//This is the entry function codeLocations(list, map) { for (var i = 0; i &lt; list.length; i++) { console.log("Looping " + list[i].location); var geocoder = new google.maps.Geocoder(); var geoOptions = { address: list[i].location, bounds: getBounds(), region: "NO" }; geocoder.geocode(geoOptions, createGeocodeCallback(list[i], map)); } } function createGeocodeCallback(item, map) { console.log("Generating geocode callback for " + item.location); return function(results, status) { if (status == google.maps.GeocoderStatus.OK) { console.log("Geocoding " + item.location + " OK"); addMarker(map, item, results[0].geometry.location); } else { console.log("Geocode failed " + status); } } } function addMarker(map, item, location) { console.log("Setting marker for " + item.location + " (location: " + location + ")"); var marker = new google.maps.Marker({ map : map, position : location}); marker.setTitle(item.title); var infowindow = new google.maps.InfoWindow( { content : item.body, size : new google.maps.Size(100, 300) }); new google.maps.event.addListener(marker, "click", function() { infowindow.open(map, marker); }); } </code></pre> <p>According to the log statements, I now have the correct objects at the correct places, meaning the item and location objects are different for every time the marker is set, but I still only get one marker on my map. How can this be?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload