HTML5 Canvas Placemark for Google Maps API v3

Question

I'm looking for a way to generate complex Placemarks (or overlays that are "attached" to placemarks).

Is there a way (I haven't found it) with the Map v3 api to attach/overlay a on placemark?

Or, will I need to draw outside of the Google api and then have listener/s that trigger redrawing when the user pans the map?

Answer 1

You extend google.maps.OverlayView with an object that override onAdd(), draw(), and onRemove()

In onAdd you'll probably want to set up a reference to a pane in google.maps.MapPanes to put your markup into. Then you'll have to handle the pan and zoom events. You do that like so:

CustomOverlayView.prototype.initPanes = function() {
var panes = this.getPanes(); //object of type google.maps.MapPanes
this.drawPane = jQuery(panes.floatPane); //we will initialize our stuff in this div element
this.drawPane.attr("id", "map-draw-pane"); //conceivable to want to reference this, usefull for debugging
this.drawPane.css("background-color", "transparent"); //DONT COVER THE GOOGLE COPYRIGHT
};

In order for your canvas to be useful for drawing, you need a way to convert your google.maps.LatLng objects into Point objects with x and y variables. The answer is in google.maps.MapCanvasProjection which has various methods that compute location objects encoded as google.maps.LatLng objects into useful pixel coordinates (and back again).

var projection = this.getProjection();//google.maps.MapCanvasProjection
var drawingLocationPoint = projection.fromLatLngToContainerPixel(markerData.location);

Some details of how to put a canvas in google maps here: http://www.samedwards.net

Answer 2

This is easily done, so I'm sorry an answer didn't appear sooner. Hopefully this is still useful to you.

See: http://code.google.com/apis/maps/documentation/javascript/overlays.html#CustomOverlays

And here's an example: http://code.google.com/apis/maps/documentation/javascript/examples/overlay-simple.html

You need to implement a Javascript class which extends OverlayView. Specifically, you will write a draw() method that the Maps API will call whenever the state of the map has been changed (e.g. it has been dragged or zoomed).

In that method you can create a HTML5 canvas (or anything really) and draw whatever you need. You get access to the underlying map projection, which lets you reliably convert LatLngs to pixels for the current zoom level and projection type.