MapMarkerJS – Create rich, interactive Google Maps markers

August 25, 2012

Even with Symbols introduced recently, I didn’t find a way in Google Maps Api V3 to have creative freedom while working with Markers. It was the one feature I missed most from the Flash version of the API.

So I wrote a little MapMarker class, which enables you to create Google Maps Markers from any HTML content ( including videos, iframes, vector graphics, flash files etc. ). Furthemore the HMTL within marker is is still fully accessible so you can create truly animated and fully interactive markers. The class takes advantage of the google.maps.OverlayView.

Example 1 – img element with fadeIns and fadeOuts

View example Download sources

Example 2 -  iframes with embedded youtube videos

View example Download sources

Example 2 -  gRaphael piecharts

View example Download sources

The idea for the library came to me when I was trying to replicate this flash project (http://www.geographics.cz/velov/) using gRapheal and Google Maps. It’s heavily “work in progress” and there might be some issues with performance, or certain dom elements.

The library is available on Github as well.