Harvard Extension School, Fall 2018
CSCI E-12 Fundamentals of Web Site Development

## Marker with an Information Window

Now that we have a marker on the map, we can add an information window.

There are three basic things to pay attention to:

- Create content for the information window
- Create the `google.maps.InfoWindow`
- Add a listener so that a click event on the marker causes the information window to open

These steps are shown below:

    /* Create content.  Here we are concatenating strings together with the JS "+" operator */
    var statue_info = "<strong>John Harvard Statue</strong><br/>" +
        "<a href='http://www.summer.harvard.edu/blog-news-events/3-lies-harvard'>3 Lies of Harvard</a>";

    /* Create the InfoWindow object; note we pass in the content */
    var statue_infowindow = new google.maps.InfoWindow({
        content: statue_info
    });

    /* Create the marker (we've seen this before) */
    var statue_marker = new google.maps.Marker({
      position: statue_latlng,
      map: harvard_yard_map,
      title: 'John Harvard Statue'
    });

    /* Create the listener so that the info window opens when the marker is clicked */
    google.maps.event.addListener(statue_marker, 'click', function() {
      statue_infowindow.open(harvard_yard_map,statue_marker);
    });

Full example:

Map with Marker working examples:

- Map with Marker + Info Window - Live example
- Map with Marker + Info Window - JS Fiddle

Copyright © David Heitmeyer