title: Google Map Clustering Is Not Working With Info Windows
body: <p>Below is the javascript code that I have in my file.</p>
  
  <p>............................................................................................................................................................
  ..............................................................................
  ..............................................................................
  ..............................................................................
  ..............................................................................</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script&gt;
          var map;
          var InforObj = [];
          var centerCords = {
              lat: 42.4519,
              lng: -83.43609
          };
          var markersOnMap = [{
                  placeName: "Americana Estates",
                  address: "5407 Aloha Lane, Casco, MI, 48064",
                  addressLink: "https://www.google.com/maps/place/Americana+Estates+of+Casco/@42.7386738,-82.7299418,17z/data=!4m5!3m4!1s0x8825109b143319f5:0x4fc50b237bb5f9c9!8m2!3d42.7390147!4d-82.7274216",
                  phone: "Call 586-749-5169",
                  phoneLink: "tel:586-749-5169",
                  websiteLink: "https://www.york-americanaestates.com/",
                  LatLng: [{ lat: 42.73872, lng: -82.72808 }]
              },
              {
                  placeName: "Arbor Knoll Apartments",
                  LatLng: [{ lat: 42.20447, lng: -83.69314 }]
              },
              {
                  placeName: "Ashbury Place Apartments",
                  LatLng: [{ lat: 42.12653, lng: -83.21234 }]
              },
              {
                  placeName: "Bridgewood Apartments",
                  LatLng: [{ lat: 42.11713, lng: -83.28699 }]
              },
               {
                  placeName: "Cambridge Apartments",
                  LatLng: [{ lat: 42.33896, lng: -83.31214 }]
              },
               {
                  placeName: "Glens of Northville Apartments",
                  LatLng: [{ lat: 42.4417, lng: -83.46313 }]
              },
               {
                  placeName: "Heights of Novi",
                  LatLng: [{ lat: 42.4519, lng: -83.43609 }]
              },
               {
                  placeName: "Legacy Place",
                  LatLng: [{ lat: 42.45781, lng: -83.20854 }]
              },
               {
                  placeName: "Orchards of Newburgh",
                  LatLng: [{ lat: 42.34334, lng: -83.40822 }]
              },
               {
                  placeName: "Orion Cove Apartments",
                  LatLng: [{ lat: 42.77281, lng: -83.24194 }]
              },
               {
                  placeName: "Orleans Place Apartments",
                  LatLng: [{ lat: 42.13748, lng: -83.24922 }]
              },
               {
                  placeName: "Plymouth House Apartments",
                  LatLng: [{ lat: 42.35734, lng: -83.46253 }]
              },
               {
                  placeName: "Plymouth Manor Apartments",
                  LatLng: [{ lat: 42.35467, lng: -83.45953 }]
              },
               {
                  placeName: "The Park at Sagebrush Circle",
                  LatLng: [{ lat: 42.26836, lng: -83.78569 }]
              },
               {
                  placeName: "Round Hill Apartments",
                  LatLng: [{ lat: 42.62152, lng: -83.42639 }]
              },
               {
                  placeName: "Sunset Plaza Apartments",
                  LatLng: [{ lat: 42.92254, lng: -83.62385 }]
              },
               {
                  placeName: "Venoy Pines Apartments",
                  LatLng: [{ lat: 42.33807, lng: -83.36682 }]
              },
               {
                  placeName: "Westridge Mobile Home Park",
                  LatLng: [{ lat: 42.26391, lng: -83.55855 }]
              }
          ];
          // Add a marker clusterer to manage the markers.
          var markerCluster = new MarkerClusterer(map, markers,{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
          
          window.onload = function () {
              initMap();
          };
  
          function addMarkerInfo() {
              for (var i = 0; i &lt; markersOnMap.length; i++) {
                  var contentString = '&lt;div id="infocontent"&gt;&lt;h1&gt;' + markersOnMap[i].placeName +
                      '&lt;/h1&gt;&lt;p&gt;&lt;a href="' + markersOnMap[i].addressLink + '" target="_blank"&gt;' + markersOnMap[i].address +
                      '&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;&lt;a href="' + markersOnMap[i].phoneLink + '"&gt;' + markersOnMap[i].phone +
                      '&lt;/a&gt;&lt;br /&gt;&lt;br /&gt;&lt;a href="' + markersOnMap[i].websiteLink + '" target="_blank"&gt;View Property&lt;/a&gt;&lt;/p&gt;&lt;br /&gt;&lt;/div&gt;';
  
                  const marker = new google.maps.Marker({
                      position: markersOnMap[i].LatLng[0],
                      map: map
                  });
  
                  const infowindow = new google.maps.InfoWindow({
                      content: contentString,
                      maxWidth: 500
                  });
  
                  marker.addListener('click', function () {
                      closeOtherInfo();
                      infowindow.open(marker.get('map'), marker);
                      InforObj[0] = infowindow;
                  });
                  // marker.addListener('mouseover', function () {
                  //     closeOtherInfo();
                  //     infowindow.open(marker.get('map'), marker);
                  //     InforObj[0] = infowindow;
                  // });
                  // marker.addListener('mouseout', function () {
                  //     closeOtherInfo();
                  //     infowindow.close();
                  //     InforObj[0] = infowindow;
                  // });
              }
          }
  
          function closeOtherInfo() {
              if (InforObj.length &gt; 0) {
                  /* detach the info-window from the marker ... undocumented in the API docs */
                  InforObj[0].set("marker", null);
                  /* and close it */
                  InforObj[0].close();
                  /* blank the array */
                  InforObj.length = 0;
              }
          }
  
          function initMap() {
              map = new google.maps.Map(document.getElementById('map'), {
                  zoom: 9,
                  center: centerCords
              });
              addMarkerInfo();
          }
      &lt;/script&gt;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;style&gt;
        /* Always set the map height explicitly to define the size of the div
         * element that contains the map. */
        #map {
          height: 100%;
        }
        #infocontent {
          background-color: #061e3a;
          text-align: center;
          padding: 10px;
        }
        #infocontent h1 {
          color: #ffffff;
          font-size: 16px;
          font-weight: bold;
        }
        #infocontent p {
          color: #ffffff;
        }
        #infocontent a {
          color: #ffffff;
        } 
        /* Optional: Makes the sample page fill the window. */
        html, body {
          height: 100%;
          margin: 0;
          padding: 0;
        }
      &lt;/style&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="map"&gt;&lt;/div&gt;
      
      &lt;script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCiI58y7JXyz9sVXI5WQPTmMCu7psgSCcQ&amp;callback=initMap"&gt;
      &lt;/script&gt;
      &lt;script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/map_cluster.js"&gt;
      &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I can get the info window click function to work correctly but clustering is not working. Can someone help with the clustering issue?</p>
  
  <p><a href="http://bhwnetwork.com/york/york_map_api_v3.html" rel="nofollow noreferrer">http://bhwnetwork.com/york/york_map_api_v3.html</a></p>