canvas.toDataURL for Google map ground overlays

Question

None of the Google map API's support the ability to rotate a map overlay. For an application I am writing, I need to rotate a map overlay to an arbitrary angle.

So I thought I could render my image resource to a canvas like:

    overlay = new Image();
overlay.onload = function(){
    if (context != false){
        context.translate(canvas.width / 2, canvas.height / 2);
        context.rotate(Math.PI / 4);
        context.drawImage(overlay,0,0,67,360);

    }
};
overlay.src = 'myimage.png';

Using the Google maps API I can now create a ground overlay:

var thing = new google.maps.GroundOverlay(href, bounds);

where href is canvas.toDataURL('image/png');

Unfortunately the above idea is not working. At the moment it only works with an actual image url such as http://www.mydomain/theimage.png

Looking for documentation it appears possible to use the canvas to render custom markers

How to create Google Latitude like markers?

but I need this to work for ground overlays.

score 3 · Answer 1 · answered May 15 '12 at 07:46

A canvas can definitely work as an image source. toDataURL gives you exactly what it says, and data URLs are interchangeable with image URLs in browsers that support them (in most cases). As broady noted, you are subject to same origin restrictions to get the data URL in the first place, but if the image is from the same domain (or has CORS properly enabled), that shouldn't be an issue.

Short of being able to look at your code to see what's going on, here's a working example on jsbin:

JSBin: Canvas.toDataURL Overlay

(it draws lots of little images to a canvas instead of a larger, rotated image like you mentioned in your post, but hopefully this gives enough of an idea).

The key part:

var canvasImage = canvas.toDataURL('image/png');

var canvasOverlay = new google.maps.GroundOverlay(
    canvasImage,
    overlayLatLngBounds);
canvasOverlay.setMap(map);

There's no reason that won't work elsewhere. Make sure to double-check the console for any possible errors.

That is a fantastic example. I must have done something wrong but now I can pin it down. I can't vote you up yet but thanks a lot. — Paul van Dinther, May 16 '12 at 06:01

score 1 · Answer 2 · answered May 15 '12 at 03:41

1

Using Canvas's toDataURL to generate the image will only work if you comply with same-origin policy.

answered May 15 '12 at 03:41

Chris Broadfoot

5,082
1
29
37

Same origin as what? The image comes from the same domain as the html page. In the debugger it can be seen that it does produce the dataURL required. – Paul van Dinther May 15 '12 at 05:59

canvas.toDataURL for Google map ground overlays

2 Answers2