Tuesday, May 24, 2011

Introducing the Google Maps Label Library

MapLabel Utility Library

MapLabel is a very nice utility library for the Google Maps API that allows you to add labels to Google Maps.

Labels created with the utility are dynamically rendered on Google Maps using Canvas 2D. Developers can define the font size, the font face, color and alignment of the labels. I've created a demo of the library in action here, which (at the risk of seeming obsessive) places labels on a map of the 2012 London Olympics site.

One really useful feature in the library is the maxZoom and minZoom controls. These let you define at what zoom levels labels should be visible. In my example map above if you zoom in on the Westfield Shopping Mall the 'Westfield Shopping Mall' label disappears and a number of other labels become visible, showing the locations of individual stores.

If you want to know more check out the reference documents and the source code.

_________________

6 comments:

Richard Carmel said...

I just wrapped an overlay. Works in both IE and Chrome. Check it out: http://www.olysei.com

I'm interested in your feedback.

Richard

Anonymous said...

Thank you for posting this!

Gregor said...

Awesome. Perfect. Just what I wanted. You rock.

Anonymous said...

Page look great in firefox, the IE-8 browser I'm using gets javascript errors.

Kyle said...

I didn't see labels for individual stores though I did see basic things like the cinema and car park.

Keir Clarke said...

Hi Kyle,

I made the map before many of the stores had decided to open and before a detailed floor plan was available.