Infowindow won't pop up on click

Question

I am trying to get the info windows of the markers that I have set to have dynamic content but the issue that I have been having is that info windows on won't open at all when clicked.

I believe I may be implementing the code infowindow in the wrong manner.

Code


var mosqueMarker, count;

for (count = 0; count < mosqueLocations.length; count++){
      mosqueMarker = new google.maps.Marker({
      position: new google.maps.LatLng(mosqueLocations[count][1], mosqueLocations[count][2]),
      title: mosqueLocations[count][0],
      map: map
   })
}

 var mosqueInfowindow = new google.maps.InfoWindow({})

     mosqueMarker.addListener('click', function(count) {
           mosqueInfowindow.setContent(mosqueLocations[count][0]),
           console.log(mosqueLocations)
           mosqueInfowindow.open(map, mosqueMarker)


     })

You are only adding the click event handler to the last marker. Possible duplicate of: [Google Maps JS API v3 - Simple Multiple Marker Example](https://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example) — geocodezip, Jan 24 '20 at 07:33

score 2 · Accepted Answer · answered Jan 24 '20 at 07:45

You need to change (at least) three things:

move the mosqueMarker event listener inside the loop
get function closure on the count variable in the loop
use this to refer to the marker inside the listener function (otherwise it will always open the infowindow on the last marker in the loop).

  for (var count = 0; count < mosqueLocations.length; count++) {
    var mosqueMarker = new google.maps.Marker({
      position: new google.maps.LatLng(mosqueLocations[count][1], mosqueLocations[count][2]),
      title: mosqueLocations[count][0],
      map: map
    });
    mosqueMarker.addListener('click', (function(count) {
    return function(evt) {
      mosqueInfowindow.setContent(mosqueLocations[count][0]),
        console.log(mosqueLocations)
      mosqueInfowindow.open(map, this)
      }})(count))
  }

proof of concept fiddle

code snippet:

// The following example creates complex markers to indicate beaches near
// Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond
// to the base of the flagpole.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: {
      lat: -33.9,
      lng: 151.2
    }
  });

  setMarkers(map);
}

// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
var mosqueLocations = [
  ['Bondi Beach', -33.890542, 151.274856],
  ['Coogee Beach', -33.923036, 151.259052],
  ['Cronulla Beach', -34.028249, 151.157507],
  ['Manly Beach', -33.80010128657071, 151.28747820854187],
  ['Maroubra Beach', -33.950198, 151.259302]
];

function setMarkers(map) {
  var mosqueInfowindow = new google.maps.InfoWindow({})
  for (var count = 0; count < mosqueLocations.length; count++) {
    var mosqueMarker = new google.maps.Marker({
      position: new google.maps.LatLng(mosqueLocations[count][1], mosqueLocations[count][2]),
      title: mosqueLocations[count][0],
      map: map
    });
    mosqueMarker.addListener('click', (function(count) {
      return function(evt) {
        mosqueInfowindow.setContent(mosqueLocations[count][0]),
          console.log(mosqueLocations)
        mosqueInfowindow.open(map, this)
      }
    })(count))
  }
}

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

Infowindow won't pop up on click

1 Answers1