László Kozma


Home | About me | Projects | Links | Weblog | Ideas


Smarter markers/labels for Google Maps [more ideas]

Recently I tried to add a new feature to Wikipediavision, displaying on the same map the latest 100 or so anonymous edits. This could make a nice poster if designed properly.

The first obstacle was that the Google Maps API doesn't seem to include any kind of labels. Sure, you can add markers (those small arrow- or teardrop-shaped icons), and you can display text when the marker is clicked, but this is not too nice here. First, the markers and the opening bubbles take up way too much space, and second, there is no way to display more than one bubble at the same time.

Luckily there are third-party extensions for adding markers, but they don't produce too nice results either.
This solution:
http://googlemapsbook.com/2007/01/22/extending-gmarker/
can only draw circular labels, which is useful only for labels a few letters long.
Two other solutions I've found are:
http://econym.googlepages.com/elabel.htm
and
http://gmaps.tommangan.us/tlabel.html

While these libraries let you display arbitrary html labels, the results are not really nice or readable, especially if there are many labels displayed on the same map. The layout would look much nicer if the labels would be positioned such as to avoid overlap as much as possible. Both libraries have the option to manually set the position of the label with respect to the anchor point, but this is tedious to do separately for every marker.

An elegant solution would be to have a less rigid layout of the labels, where I specify just the coordinates of the anchor point where the label is pointing, and the function would find an optimal location for the label, connecting it with a line or arrow to the anchor. The conditions to produce a nice layout would be (in this order of importance): avoid displaying labels outside of current viewing area if the anchor point is visible, avoid overlap of labels, minimize distances of labels from their anchor points, (if possible) prefer displaying labels over relatively empty areas (for ex. ocean) rather than land.

Does something like this exist already? Is anyone thinking/working on such thing? Would such a library be useful to others as well? If it existed, I would improve the layout of this page with it.



blog comments powered by Disqus