Google Maps, info window not working with multiple markers after getting all markers in the bounds of window

Question

I have multiple markers being add dynamically to a map. I need the map to focus on all markers displayed on the map. This will vary depending on input in search fields. I also need an info window for each marker. I had the info window working before I got the map to focus on all of the markers. Now that I found code that will focus on all markers even if they are on the other side of the country, I can not get the info window to work.

<script>
function map_initialize() {
  var member_locations = [ 
      [ "Member 1", new google.maps.LatLng(47.1330611, -122.4350594),1],
      [ "Member 12", new google.maps.LatLng(47.2394208, -122.3549794),2],
      [ "Member 123", new google.maps.LatLng(47.2071584, -122.2370664),3],
      [ "Member 11", new google.maps.LatLng(47.1520592, -122.3524013),4],
      [ "Member 112", new google.maps.LatLng(47.1178347, -122.0554941),5],
      [ "Member 1122", new google.maps.LatLng(47.3104558, -122.5861279),6]
  ];
  var map = new google.maps.Map(document.getElementById("directory_map"), {
    center: new google.maps.LatLng(0, 0),
    zoom: 0,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  for (var i = 0; i < member_locations.length; i++) {
    new google.maps.Marker({
      position: member_locations[i][1],
      map: map,
      title: member_locations[i][0]
    });
  }

  var infowindow = new google.maps.InfoWindow();
  var marker, i;      

  var latlngbounds = new google.maps.LatLngBounds();
  for (var i = 0; i < member_locations.length; i++) {
    latlngbounds.extend(member_locations[i][1]);
  }
  map.fitBounds(latlngbounds);

  for (var i = 0; i < member_locations.length; i++) {
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(member_locations[i][0]);
        infowindow.open(map, marker);
      }
    })(marker, i));        
  }   

  new google.maps.Rectangle({
    bounds: latlngbounds,
    map: map,
    fillColor: "#000000",
    fillOpacity: 0.2,
    strokeWeight: 0
  });
}
google.maps.event.addDomListener(window, 'load', map_initialize);
</script>

score 2 · Accepted Answer · answered Apr 01 '21 at 01:53

You aren't adding the InfoWindow to the markers correctly, marker is not defined in the loop below, and member_locations is not an array of google.maps.Marker objects:

  for (var i = 0; i < member_locations.length; i++) {
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(member_locations[i][0]);
        infowindow.open(map, marker);
      }
    })(marker, i));        
  }

Best to do something like in the related/duplicate question: Google Maps JS API v3 - Simple Multiple Marker Example. Create the marker, add the InfoWindow in the same loop.

proof of concept fiddle

code snippet:

function map_initialize() {
  var member_locations = [
    ["Member 1", new google.maps.LatLng(47.1330611, -122.4350594), 1],
    ["Member 12", new google.maps.LatLng(47.2394208, -122.3549794), 2],
    ["Member 123", new google.maps.LatLng(47.2071584, -122.2370664), 3],
    ["Member 11", new google.maps.LatLng(47.1520592, -122.3524013), 4],
    ["Member 112", new google.maps.LatLng(47.1178347, -122.0554941), 5],
    ["Member 1122", new google.maps.LatLng(47.3104558, -122.5861279), 6]
  ];
  var map = new google.maps.Map(document.getElementById("directory_map"), {
    center: new google.maps.LatLng(0, 0),
    zoom: 0,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  for (var i = 0; i < member_locations.length; i++) {
    let marker = new google.maps.Marker({
      position: member_locations[i][1],
      map: map,
      title: member_locations[i][0]
    });
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(member_locations[i][0]);
        infowindow.open(map, marker);
      }
    })(marker, i));
  }

  var infowindow = new google.maps.InfoWindow();
  var marker, i;

  var latlngbounds = new google.maps.LatLngBounds();
  for (var i = 0; i < member_locations.length; i++) {
    latlngbounds.extend(member_locations[i][1]);
  }
  map.fitBounds(latlngbounds);

  new google.maps.Rectangle({
    bounds: latlngbounds,
    map: map,
    fillColor: "#000000",
    fillOpacity: 0.2,
    strokeWeight: 0
  });
}
google.maps.event.addDomListener(window, 'load', map_initialize);

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

#directory_map {
  height: 100%;
}


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

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

<!DOCTYPE html>
<html>

<head>
  <title>Simple Map</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="directory_map"></div>

  <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=&v=weekly"></script>
</body>

</html>

Google Maps, info window not working with multiple markers after getting all markers in the bounds of window

1 Answers1