Infowindow Google Maps not working?

Question

JavaScript

// Markers
        var jsonMarkers = <?php echo json_encode($our_offices); ?>;
        var markers = [];
        var markersPopup = [];
        var markersPopupContent = [];

        for (var i = 0; i < jsonMarkers.length; i++) {
          markers[i] = new google.maps.Marker({
            position: { lat: parseFloat(jsonMarkers[i][0].lat), lng: parseFloat(jsonMarkers[i][0].lng) },
            title: jsonMarkers[i][0].title,
            map: map,
          });

          markersPopupContent[i] = jsonMarkers[i][0].title;

          markersPopup[i] = new google.maps.InfoWindow({
            content: 'dwadawdawdwa',
          });
          
          markers[i].addListener('click', function() {
            markersPopup[i].open(map, markers[i]);
          });
        };

Clicking on a marker on the map gives an error i.imgur.com/GZAgVva.png

Answer 1

At the time of the click , the variable i will be equal to jsonMarkers.length and therefore markersPopup[i] will be undefined (indices in the array start from 0). A closure like this can save you

markers[i].addListener('click', (function(i) {
  return function() {
    markersPopup[i].open(map, markers[i]);
  };
})(i));

Live example