Google Map Markers Information Windows

Google map markers are great to mark locations on the map, assuming you have content on your page that says something like: "Our office is located where the marker is shown on the map."

Why use Info-Windows?

If you have multiple markers then it is pretty difficult to identify what the markers mean without some other aid. That is where the pop-up windows, called "Info-Windows" in Google parlance. Info-Windows are pretty handy, because you can use them to identify what each marker means. You can use HTML within them. Using HTML, you can dress them up quite a bit, having control over fonts and including things like images and URLs.

First let's add an InfoWindow for the marker we created previously. First we'll set up the HTML in a variable. Then create a marker as before. The code that follows makes the marker respond to a "mouseover" event. Here's how the code looks:

var html_text	= "<table><tr><td>This is San Francisco</td></tr>
         <tr><td>Home of the Golden Gate Bridge.</td></tr></table>";
     
var infowindow = new google.maps.InfoWindow({
   content: html_text
});

var marker = new google.maps.Marker({
   position: latlng,
   map: map,
   title:'San Francisco'
});

google.maps.event.addListener(marker, 'mouseover', function() {
   infowindow.open(map,marker);
});

The first 2 lines above are identical to the maps version 2 tutorials. It's just about assigning some HTML code to a variable. After these lines, however, everything changes.

The 3 lines starting with "var infowindow ..." creates a new "InfoWindow" object and assigns the HTML text to it.

The 5 lines starting with "var marker ..." are the same as the previous lesson. This is just how you create a marker.

The 3 lines starting with "google.maps.event ..." in the listing is interesting to look at.
For a map to 'know' about events happening to it, it needs to have some special code called a "listener" turned on. The first part shows the interface to do this: "google.maps.event.addListener". This "listener" then needs to know what to listen to:

Google Map Events

The What, When, and Action of the Listener

The first parameter of the listener is the what to be listened to (marker),
the second the when to create an event (mouseover) and
the third action is what to do when the event happens (function()).

So if the marker has the mouse pointer pass over it, the function will be called and the Info-Window will be shown.

Now if we put all this together we will have a map of San Francisco with a marker. If you pass your mouse pointer over the marker you should see an InfoWindow with the 2 lines of text we entered into the HTML above.

Google Map Info Windows

Why use Info-Windows?

Google Map Events

The What, When, and Action of the Listener