Google Map - Marker + Info

by Ramya Ranganathan

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<h1>Map of Harvard Yard</h1>
<div id="map-canvas"></div>

CSS

html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}

JavaScript

var harvard_yard_map;
/* John Harvard Status
42.374474,-71.117207 */

var statue_latlng = new google.maps.LatLng(42.374474, -71.117207);
var nw_latlng = new google.maps.LatLng(42.3795462, -71.1156024);

function initialize() {
  var mapOptions = {
    zoom: 16,
    center: statue_latlng
  };
  harvard_yard_map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  var statue_info = "<strong>John Harvard Statue</strong><br/>" +
    "<a href='https://www.summer.harvard.edu/inside-summer/3-lies-harvard'>3 Lies of Harvard</a>";

  var statue_infowindow = new google.maps.InfoWindow({
    content: statue_info
  });

  var statue_marker = new google.maps.Marker({
    position: statue_latlng,
    map: harvard_yard_map,
    title: 'John Harvard Statue'
  });

  google.maps.event.addListener(statue_marker, 'click', function() {
    statue_infowindow.open(harvard_yard_map, statue_marker);

    var nw_info = "<strong>Northwest Building</strong><br/>" +
      "<a href='http://www.universityevents.harvard.edu/venues/northwest-building'>Northwest Info</a>";

    var nw_infowindow = new google.maps.InfoWindow({
      content: nw_info
    });

    var nw_marker = new google.maps.Marker({
      position: nw_latlng,
      map: harvard_yard_map,
      title: 'Northwest Building'
    });
    
     google.maps.event.addListener(nw_marker, 'click', function() {
    nw_infowindow.open(harvard_yard_map, nw_marker);

  });
}

google.maps.event.addDomListener(window, 'load', initialize);