SimpleMaps

by Lawrence Ross

HTML

<!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=AIzaSyBIwzALxUPNbatRBj3Xi1Uhp0fFzwWNBkE&libraries=&v=weekly" ></script>
  </body>
</html>

CSS

/* 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;
}

JavaScript

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);