title: How to Add Google Maps with Multiple Markers Showing Infowindows on Load and on Click
body: <p>I am trying to add Google Maps with multiple markers. All markers have info windows. I want to show all infowindows to show by default on page load. When someone clicks on map or on a marker, all infowindows must close and then show by clicking on the markers.</p>
  
  <p>Here is how I am trying to achieve it:</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-html lang-html prettyprint-override"><code>&lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"/&gt;
  &lt;style type="text/css"&gt;
  html {
      height: 100%
  }
  
  body {
      height: 100%;
      margin: 0;
      padding: 0
  }
  
  #map {
      height: 100%
  }
  &lt;/style&gt;
  
  &lt;script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  var locations = [
      ['loan 1', 33.890542, 151.274856, 'address 1'],
      ['loan 2', 33.923036, 151.259052, 'address 2'],
      ['loan 3', 34.028249, 151.157507, 'address 3'],
      ['loan 4', 33.80010128657071, 151.28747820854187, 'address 4'],
      ['loan 5', 33.950198, 151.259302, 'address 5']
  ];
      
  function initMap() {
      var latlng = new google.maps.LatLng(locations[0][1], locations[0][2]);
      mapOptions = {
          zoom:               8,
          center:             latlng
      }
      var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  
      var infowindow = new google.maps.InfoWindow();
  
      for (i = 0; i &lt; locations.length; i++) {
          var icon = '';
          if ( locations[i][0].length != '' &amp;&amp; locations[i][1].length != '' ) {
  
              var marker = new google.maps.Marker({
                  position:       new google.maps.LatLng(locations[i][1], locations[i][2]),
                  map:            map,
                  title:          locations[i][3],
              });
              
              var contentString = 'Title on Load';
              var infowindow = new google.maps.InfoWindow({
                  content:    contentString,
                  maxWidth:   160
              });
              infowindow.open(map, marker);
  
              // Event that closes the Info Window with a click on the map
              google.maps.event.addListener(map, 'click', function() {
                  infowindow.close();
              });
  
              google.maps.event.addListener(marker, 'click', (function(marker, i) {
                  return function() {
                      var contentString = 'Title on Click';
                      infowindow.setContent(contentString);
                      infowindow.open(map, marker);
                  }
              })(marker, i));
          }
      }
  }
  google.maps.event.addDomListener(window, 'load', initMap);
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="map"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The code above works fine but it shows duplicate infowindows. On click the infowindows that open on load must close but they are not closing.</p>