How can I show a custom DIV element on a google map as a marker?

Question

I want to be able to show a custom DIV element on a Google Map (V3 API) as a marker but it only seems to allow images to be used instead. Is there any way around this using the standard google map API?

Answer 1

Here's an excellent little library: RichMarker. Its documentation is here.

You can use the content property of the json object passed to the constructor like this:

var marker = new RichMarker({
      position: yourLatLng,
      map: yourMap,
      content: '<div class="my-flexible-marker">initial content</div>'
});

And later change the content with the setContent method:

marker.setContent('<div class="my-flexible-marker">new content</div>');