Google Maps Tile Overlay

Question

I am currently working on google map and new to it.. I want to know is it possible to divide the map into certain tiles with definite height and width and to color them.. If yes then somebody can just explain how to do it as i am facing difficulties.

Answer 1

Maybe the source code in the samples section in the Google Maps API Documentation can give you some pointers.

Answer 2

I think what you are referring to is known as overlays in the Google Maps API. Do you want to achieve something like this? (click to show overlay)

The polygons section in the Google Maps API documentation would be the place to go to learn more.

Answer 3

If there is a limited area (geographically) that you would like to color based on map tiles, then you could create a custom tile layer overlay for that area (with each tile colored appropriately).

You can read the documentation for Tile Layer Overlays, but the gist is that you create a GTileLayer object, then set a property on that object with a function, getTileUrl, that is called when Google maps need to insert a tile in Google Maps.

In your getTileUrl function, you can return your own version of the tile (which you can draw with a colored tint based on the origional tile):

tilelayer.getTileUrl = function(point,  zoom) { 
    if (zoom == 17 && point.x == 38598 && point.y == 49259)
            return "../pics/origional_tile_with_colored_tint.png"; 
};

Once you have a a GTileLayer object, you instantiate a GTileLayerOverlay (passing in your GTileLayer) and add it to the GMap2 object (with the addOverlay method).

You can find an example of this here.