Google Maps Multiple Markers With and Without InfoWindow Open By Default

March 19, 2020 4:31 pm by ATS Staff 

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Canada - Google Map</title> 
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
  <style> .gm-ui-hover-effect { display: none !important; } /* remove infoWindow x */ </style>

</head> 
<body style="margin: 0px;">
  <div id="map" style="width: 100%; height: 500px;"></div>

  <script type="text/javascript">
    jQuery(document).ready(function() {
      jQuery('#map').css('height', window.innerHeight);
    });

    var locations = [
      ['Alberta', 53, -115, 1],
      ['British Columbia', 53, -127, 2],
      ['Manitoba', 53, -98, 3],
      ['New Brunswick', 46, -66, 4],
      ['Newfoundland and Labrador', 53, -57, 5],
      ['Northwest Territories', 65, -120, 6],
      ['Nova Scotia', 45, -63, 7],
      ['Nunavut', 65, -100, 8],
      ['Ontario', 50, -85, 9],
      ['Prince Edward Island', 46.25, -63, 10],
      ['Quebec Province', 53, -70, 11],
      ['Saskatchewan', 53, -106, 12],
      ['Yukon', 65, -135, 13]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(53, -98),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

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

    for (i = 0; i < locations.length; i++) {  
        marker = new google.maps.Marker({
          position: new google.maps.LatLng(locations[i][1], locations[i][2]),
          map: map
      });

      // click for info on each marker
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() { infowindow.setContent(locations[i][0]); infowindow.open(map, marker); }
      })(marker, i));

      // open info by default
      infowindow = new google.maps.InfoWindow({ content: locations[i][0], maxWidth: 160 });
      infowindow.open(map, marker);

        bounds.extend(marker.position);      
    }
    map.fitBounds(bounds);


  </script>
</body>
</html>