Google maps API infowindow showing only last statement from array

Question

I have this code. Adding Markers work great but right infowindow to markers don't.. (title in marker too)

It's returning only last statements from array infoUser for all markers.

I know.. I'm duplicating a question but I tried fix it with a lot of answered questions but it doesn't work.

    function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          center: {lat: 49.7437895, lng: 15.3360726}
        });
//array
        var infoUser = [
            ['Germany','Maj','TUC','20','300'],
            ['Czech Republic','admin','Bla','50','400'],
            ['Italy','HOOOO','BUC','1','50'],
            ['Italy','aaaaa','aaa','10','20'],
            ['Germany','adminek','hopinek','50','1000']
        ]; 

        var infoWindow = new google.maps.InfoWindow();

        var markerCluster = new MarkerClusterer(map, markers,
      {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});

        var markers = [];

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

            var adresa = infoUser[x][0],
                name = infoUser[x][1],
                firstname = infoUser[x][2],
                age =  infoUser[x][3],
                price =  infoUser[x][4];    

          $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+adresa, null, function (data) {
              var p = data.results[0].geometry.location;
              var latlng = new google.maps.LatLng(p.lat, p.lng);
              var marker = new google.maps.Marker({
                position: latlng,
                title: adresa,
                map: map
              }); markers.push(marker); markerCluster.addMarker(marker);

              var content = 'Adresa: ' + adresa + 'username: ' + name;

              google.maps.event.addListener(marker,'click', (function(marker, content, infoWindow){ 
                    return function() {
                        infoWindow.setContent(content);
                        infoWindow.open(map,marker);
                    };
                })(marker, content, infoWindow)); 
          });
        }
    }

possible duplicate of Google Maps V3 - I cannot reconcile closure — geocodezip
– geocodezip, Commented Nov 16, 2016 at 14:04
possible duplicate of Google Maps infowindow don't work on marker click — geocodezip
– geocodezip, Commented Nov 16, 2016 at 14:04
possible duplicate of Mapping multiple locations with Google Maps JavaScript API v3 and Geocoding API — geocodezip
– geocodezip, Commented Nov 16, 2016 at 14:06
This is duplicate to closure. Please do read about closures. Google maps has nothing to do with this. Just some advance JS pitfalls — Jereme
– Jereme, Commented Nov 16, 2016 at 14:29

geocodezip · Accepted Answer · 2016-11-16 14:20:46Z

You need function closure on the data outside the geocoder call (adresa and name) as well as the infowindow content/marker/infoWindow:

working fiddle

code snippet:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {
      lat: 49.7437895,
      lng: 15.3360726
    }
  });
  //array
  var infoUser = [
    ['Germany', 'Maj', 'TUC', '20', '300'],
    ['Czech Republic', 'admin', 'Bla', '50', '400'],
    ['Italy', 'HOOOO', 'BUC', '1', '50'],
    ['Italy', 'aaaaa', 'aaa', '10', '20'],
    ['Germany', 'adminek', 'hopinek', '50', '1000']
  ];

  var infoWindow = new google.maps.InfoWindow();

  var markerCluster = new MarkerClusterer(map, markers, {
    maxZoom: 18,
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
  });

  var markers = [];

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

    var adresa = infoUser[x][0],
      name = infoUser[x][1],
      firstname = infoUser[x][2],
      age = infoUser[x][3],
      price = infoUser[x][4];

    $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=' + adresa, null, function(adresa, name) {
      return function(data) {
        var p = data.results[0].geometry.location;
        var latlng = new google.maps.LatLng(p.lat, p.lng);
        var marker = new google.maps.Marker({
          position: latlng,
          title: adresa,
          map: map
        });
        markers.push(marker);
        markerCluster.addMarker(marker);

        var content = 'Adresa: ' + adresa + '<br>username: ' + name;

        google.maps.event.addListener(marker, 'click', (function(marker, content, infoWindow) {
          return function() {
            infoWindow.setContent(content);
            infoWindow.open(map, marker);
          };
        })(marker, content, infoWindow));
      }
    }(adresa, name));
  }
}
google.maps.event.addDomListener(window, "load", initMap);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js"></script>
<div id="map"></div>

yep definitely closure. From the title itself you can tell the problem

Collectives™ on Stack Overflow

Google maps API infowindow showing only last statement from array

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related