In usability we trust

Markers is one of the core features in Google Maps and an effective way of displaying places on a map. In this article I will show you how to add a basic marker to a map and also how to add some interactivity to it.

Adding a marker

A marker is a type of overlay, just as it’s siblings polyline and polygon. To add a basic marker to a Google Map all you have to do is to define it with a coordinate of type GLatLng using the GMarker constructor.

// Init the map
var map = new GMap2(document.getElementById('map'));
map.addControl(new GSmallMapControl());
map.setCenter(new GLatLng(59.5, 14.0), 6);
// Create a marker
var marker = new GMarker(new GLatLng(59.0, 13.80))
// Add the marker to the map
map.addOverlay(marker);

This code will create a map and add a basic marker to it.

Making it draggable

To make the marker draggable is really easy. the GMarker constructor takes options in the form of an object literal as it’s second parameter. You simply add {draggable: true} after the coordinates.

var marker = new GMarker(new GLatLng(59.0, 13.80), {draggable: true});

Voila, the marker is now draggable. This is excellent for applications where you want the user to define places on a map.

Adding a Tooltip

Adding a tooltip is done the same way as making the marker draggable. It’s done using another option called title. It will create the same kind of tooltip that adding the attribute title to HTML-elements does.

var marker = new GMarker(new GLatLng(59.0, 13.80), {
    draggable: true,
    title: 'Drag me'
});

This code will produce a standard tooltip when putting the cursor over the marker.

There are a lot of other options you can add to a marker. For a full list check out the documentation.

Adding an Info Window

An InfoWindow is a great way to show more information about a location. It’s done by adding a click event to the marker with the help of the GEvent class. When the click event is triggered, the InfoWindow is opened using the method GMarker2.openInfoWindow().

// Adding a click event to the marker
GEvent.addListener(marker, "click", function() {
    marker.openInfoWindow('My InfoWindow');
});

The result is a standard GInfoWindow which open up when you click the marker. You can close it by either clicking the closing X in the upper right corner or by clicking somewhere in the map.

GMarker.openInfoWindow is the most basic variant of InfoWindows in the API and can only contain plain text. Other types can contain HTML and have tabs. For a full description of the other options available check out the Documentation.

Preventing InfoWindow offset

When using a combination of drag and drop and infowindow a weird thing can happen. It’s that the InfoWindow stay in the same place while the marker is moved.

To prevent this we have to make sure to close the InfoWindow when initiating the drag and drop operation. This is done by listening to the event with GEvent.addListener and close the window with GMap2.closeInfoWindow().

// Close InfoWindow at dragstart
GEvent.addListener(marker, 'dragstart', function() {
    map.closeInfoWindow();
});

Live example

I’ve put together a live example which contains all the techniques described in this article.

Watch the live example.

Conclusion

Markers is an effective way of displaying places on a map. It has a simple yet powerful set of methods to create interactivity. The techniques described here are just a few of all the things you can do, but I think they’ll provide a good starting point.

This article was published on Tuesday, December 16th, 2008 in Tutorials.