Google Map infowindow opening same message on each marker

Question

I am using Google Maps to place Markers onto a Map, using Geocoder to place by address. The Markers are all placed correctly on the map, but the infowindow on each is always using the same message instead of the one relevant to that marker.

I have tried doing it a few different ways now, but always with the same result. The code I have currently is below, which is inside the Initialize function:

var locations = [
  ['Message 1', -33.890542, 151.274856, 4, 'leeds'],
  ['Message 2', -33.923036, 151.259052, 5 , 'manchester'],
  ['Message 3', -34.028249, 151.157507, 3 , 'london'],
  ['Message 4', -33.80010128657071, 151.28747820854187, 2, 'newcastle'],
  ['Message 5', -33.950198, 151.259302, 1, 'birmingham']
];
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
if (geocoder) {
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
      map.setCenter(results[0].geometry.location);

        var infowindow = new google.maps.InfoWindow();
        var image = {
            url: 'assets/img/banners/404.png',
            // This marker is 20 pixels wide by 32 pixels tall.
            size: new google.maps.Size(20, 32),
            // The origin for this image is 0,0.
            origin: new google.maps.Point(0,0),
            // The anchor for this image is the base of the flagpole at 0,32.
            anchor: new google.maps.Point(0, 32)
          };
        var marker;





        for (var x = 0; x < locations.length; x++) {

            infowindow = new google.maps.InfoWindow({content:locations[x][0]});

            $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+locations[x][4]+'&sensor=false', locations, function (data) {

                var p = data.results[0].geometry.location
                var latlng = new google.maps.LatLng(p.lat, p.lng);
                marker = new google.maps.Marker({
                    position: latlng,
                    map: map
                });

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

            });

        }



      } else {
        alert("No results found");
      }
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}

Why are you using the geocoder? You already have the coordinates for the markers. If you remove that, this is a duplicate of [Google Maps JS API v3 - Simple Multiple Marker Example](http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example?rq=1) — geocodezip, Oct 11 '14 at 23:38
The coordinates are in as an example, I need it to use location names. Thanks. — Quinny, Oct 12 '14 at 08:54
@Dr.Molle I have also tried setting the content in the click handler as you suggest, but get the same issue - just sets them all to be the final value in the array. — Quinny, Oct 12 '14 at 10:28

score 1 · Accepted Answer · answered Oct 12 '14 at 11:35

Working example(using geocoder instead of AJAX, because there is no guarantee that the service sends the required Access-Control-Allow-Origin-header):

    for (var x = 0; x < locations.length; x++) {

        geocoder.geocode({address:locations[x][4]},
                         (function(x){
                            return function(data,status){
                             if (status == google.maps.GeocoderStatus.OK) {

                              marker = new google.maps.Marker({
                                position: data[0].geometry.location,
                                map: map
                              });

                              google.maps.event.addListener(marker, 'click', 
                                (function(marker, x) {

                                  return function() {

                                    infowindow.setContent(locations[x][0]);
                                    infowindow.open(map, this);
                                  }
                                 })(marker, x));
                              }
                            }

                         })(x)
                        );
    }

Demo: http://jsfiddle.net/doktormolle/utg45kzq/

Google Map infowindow opening same message on each marker

1 Answers1