Dynamic listener in javascript Google Maps API

Question

i have source JSON file and javascript code. I want dynamically load markers from JSON. For each marker is there one contentString, which has to be displayed after click on marker. But the problem is that after click on first marker is showed marker two info. Is there a solution and what is the best?

JSON:

[  
   {  
      "Nazev":"Pobocka 1",
      "Mesto":"Praha",
      "Ulice":"Nejvetsi 35\/352",
      "PSC":"12345",
      "Web":"www.praha.cz",
      "Lat":"50.0596696",
      "Long":"14.4656239"
   },
   {  
      "Nazev":"Pobocka 2",
      "Mesto":"Brno",
      "Ulice":"Nejmensi 384\/64",
      "PSC":"54321",
      "Web":"www.brno.cz",
      "Lat":"49.2020701",
      "Long":"16.5779606"
   }
]

Javascript source:

<script>
function initialize() {
  var json = getdata();
  var center = new google.maps.LatLng(49.9789391,15.6342143);
  var mapOptions = {
    zoom: 8,
    center: center
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  for( i = 0; i < json.length; i++) {
            var Nazev =  json[i].Nazev;
            var Mesto =  json[i].Mesto;
            var Ulice =  json[i].Ulice;
            var PSC   =  json[i].PSC;
            var Web   =  json[i].Web;
            var Lat   =  json[i].Lat;
            var Long  =  json[i].Long;
            var contentString = "<b>"+Nazev+"</b><br>"+Mesto+"<br>"+Ulice+"<br>"+PSC+"<br><a href='http://"+Web+"'>"+Web+"</a>";
            var latLng = new google.maps.LatLng(Lat,Long);
            var marker = new google.maps.Marker({
                position: latLng,
                map: map
            });

            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', initialize);

    </script>

score 1 · Answer 1 · answered May 23 '15 at 20:09

1

Your issue is that your event listener is asynchronous, so by the time it gets called, the for loop has reached the end and the value of contentString is at the end. You need to fix your scope.

answered May 23 '15 at 20:09

Isaac Ray

1,351
9
17

What exactly do you mean? – Bullman May 23 '15 at 21:00

score 1 · Accepted Answer · edited May 23 '17 at 12:15

This is a duplicate of Google Maps JS API v3 - Simple Multiple Marker Example

working code snippet:

function initialize() {
  var json = [{
    "Nazev": "Pobocka 1",
    "Mesto": "Praha",
    "Ulice": "Nejvetsi 35\/352",
    "PSC": "12345",
    "Web": "www.praha.cz",
    "Lat": "50.0596696",
    "Long": "14.4656239"
  }, {
    "Nazev": "Pobocka 2",
    "Mesto": "Brno",
    "Ulice": "Nejmensi 384\/64",
    "PSC": "54321",
    "Web": "www.brno.cz",
    "Lat": "49.2020701",
    "Long": "16.5779606"
  }];
  var center = new google.maps.LatLng(49.9789391, 15.6342143);
  var mapOptions = {
    zoom: 8,
    center: center
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  for (i = 0; i < json.length; i++) {
    var Nazev = json[i].Nazev;
    var Mesto = json[i].Mesto;
    var Ulice = json[i].Ulice;
    var PSC = json[i].PSC;
    var Web = json[i].Web;
    var Lat = json[i].Lat;
    var Long = json[i].Long;
    var contentString = "<b>" + Nazev + "</b><br>" + Mesto + "<br>" + Ulice + "<br>" + PSC + "<br><a href='http://" + Web + "'>" + Web + "</a>";
    var latLng = new google.maps.LatLng(Lat, Long);
    var marker = new google.maps.Marker({
      position: latLng,
      map: map
    });

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

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

  }

}

google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>

Dynamic listener in javascript Google Maps API

2 Answers2