Google Maps

Adding a Description to a Marker

A marker isn't much use on a map if you don't know what the marker is for. What we need is some way of attaching a description to our marker. Google maps provides an info window that can be attached to markers that can contain HTML and so can display whatever you want.

You then get a choice of how you attach the info window to the marker. Do you want it to always display or do you want it to only display when someone clicks on the marker (and therefore give the map a less cluttered appearance).

Let's say we just want to add the simple text "here I am" to the marker. To get that text to display all the time we simply specify one extra line of code:

We can instead attach that to the marker so that it only displays when people click on the marker by adding it inside another function provided by Google maps:

GEvent.addListener(marker, "click", function()
{marker.openInfoWindowHtml('here I am');});

Here's what our map looks like with the description set to only display when the marker is clicked on.

The main part of our map code with all of the changes we have made in the last couple of tutorials now looks like this:

var point = new GLatLng(-33.9417, 150.9473);
map.setCenter(point, 10);
var marker = new GMarker(point);
map.addOverlay(marker);
GEvent.addListener(marker, "click", function()
{marker.openInfoWindowHtml('here I am');});