Miles Miles - 3 months ago 6
Javascript Question

Google Maps Passing Data To Marker

I'm having a hard time getting the information in the infowindow on a Google Map Marker correct. The markers are in the correct place but, this is passing the name of the second place into both the first and second infowindows.

<script>
function initMap() {
var mapOptions = {
zoom: 14,
scrollwheel: false,
center: new google.maps.LatLng(31.44, -100.47)
}

var map = new google.maps.Map(document.getElementById('super_map'), mapOptions);

var geocoder = new google.maps.Geocoder();

var addresses = ["3000 Main St San Angelo TX", "4001 Sunset Dr San Angelo TX"];

var names = ['First Place', 'Second Place'];

for(var x = 0; x < addresses.length; x++){
var name = names[x];

geocoder.geocode( { 'address': addresses[x]}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {


var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
animation: google.maps.Animation.DROP,
});

var contentString = name;

var infowindow = new google.maps.InfoWindow({
content: contentString
});

google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}

});
}

}

google.maps.event.addDomListener(window, 'load', initMap);
google.maps.event.addDomListener(window, 'resize', initMap);
</script>


I've tried to set it with the setContent but with the same results...

google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(names[0]);
infowindow.open(map,marker);
});

Answer

One option to solve your issue would be function closure on the "name". The code below creates an anonymous function for each iteration of the loop which holds function closure on the name variable.

geocoder.geocode({
  'address': addresses[x]
// get function closure on "name"
}, (function(name) {
  return function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location,
        animation: google.maps.Animation.DROP,
      });
      var contentString = name;
      var infowindow = new google.maps.InfoWindow({
        content: contentString
      });
      google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map, marker);
      });
    }
  }
})(name));

proof of concept fiddle

code snippet:

function initMap() {
  var mapOptions = {
    zoom: 14,
    scrollwheel: false,
    center: new google.maps.LatLng(31.44, -100.47)
  }
  var map = new google.maps.Map(document.getElementById('super_map'), mapOptions);
  var bounds = new google.maps.LatLngBounds();
  var geocoder = new google.maps.Geocoder();
  for (var x = 0; x < addresses.length; x++) {
    var name = names[x];
    geocoder.geocode({
      'address': addresses[x]
    }, (function(name) {
      // get function closure on "name"
      return function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          bounds.extend(results[0].geometry.location);
          map.fitBounds(bounds);
          var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location,
            animation: google.maps.Animation.DROP,
          });
          var contentString = name;
          var infowindow = new google.maps.InfoWindow({
            content: contentString
          });
          google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map, marker);
          });
        }
      }
    })(name));
  }
}

google.maps.event.addDomListener(window, 'load', initMap);
google.maps.event.addDomListener(window, 'resize', initMap);
var addresses = ["3000 Main St San Angelo TX", "4001 Sunset Dr San Angelo TX"];
var names = ['First Place', 'Second Place'];
html,
body,
#super_map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="super_map"></div>