Clip Google Maps JS API ImageMapType to a polygon

Question

How can I clip a MapType in Google Maps to an arbitrary polygon. For example, if I have a custom ImageMapType that covers a large area (i.e. all the world), but I want to show i

Answer 1

You can use the canvas.toDataURI() option in HTML5 to obtain the url that is required for getTileUrl() of ImageMapType.

getTileUrl: function(coord, zoom) {
    var normalizedCoord = getNormalizedCoord(coord, zoom);
    if (!normalizedCoord) {
      return null;
    }
    var bound = Math.pow(2, zoom);
    // reset and clip the preloaded image in a hidden canvas to your required height and width

    clippedImage = canvas.toDataURL();
    return clippedImage;
    }

• To set and resize the image to correct dimension, use canvas.drawImage()
• To clip the image from canvas to any non-rectangular dimension, use the canvas clip() Sample code for canvas clipping.