LabeledMarker v1.0: Do More with Your Markers!

Friday, April 27, 2007 at 1:24:00 PM

I'll admit it -- I sometimes get tired of staring at a map full of reddish-pink markers, and find myself too lazy to click on the markers to find out what information they represent. I'm inclined to believe I'm not the only lazy user out there. That's why I think it's important for map mashup designers to put some effort into creating their map's markers to convey more than just simply "there is a data point here," when possible.

There are several techniques for conveying additional information: colored markers, markers with symbols (like a bike or eating utensils), or markers of varying sizes. There's also the possibility of overlaying letters or numbers on top of your marker to associate it with a rank or code. In the past, users have typically had to create those kinds of markers individually (in Photoshop, for example), increasing the map development time as well as the download time for the maps user.

Mike Purvis, a Maps API developer and co-author of "Beginning Google Maps Applications with PHP and Ajax", realized there was a need for an easy way to overlay text on markers a few months ago, and introduced his LabeledMarker extension that does just that. Since then, he's added it to the Google Maps API Utility Library open source project, and together we've put together documentation and examples to show it off. With just one line of code, you can create a LabeledMarker with a custom icon and any text overlaid on top:

  var marker = new LabeledMarker(myPoint, {icon: myIcon, labelText: "A"});

Since LabeledMarker is an extension of GMarker, you can use many of the GMarker options and methods with it, like adding a click listener or changing the icon image dynamically. Below is a map based on an example from the documentation, where I've used LabeledMarker to show a map of the top 20 airports in the world and used their airport codes as the marker label.

If you think that LabeledMarker will be useful for your next maps project, check out the examples and browse the reference. Please report any issues you find in the Maps API Google Group, and consider joining the open-source project if you'd like to work on extending LabeledMarker further.