Slide 18 - Marker with an Information Window § Session 10

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: