Google Maps Custom Tiles And Conditional Coloring

Google Maps Custom Tiles And Conditional Coloring
Devidas Labade
Posted by on March 1, 2015 in Blog

Google Maps Custom Tiles And Conditional Coloring

This article discusses about creation of custom tiles on Google Maps and display it using the Google Maps JavaScript API. The API uses a Map Type object to hold information about these map. A Map Type is an interface that defines the display and usage of map tiles and the translation of coordinate systems from screen coordinates to world coordinates (on the map). Each Map Type must contain a few methods to handle retrieval and release of tiles, and properties that define its visual behavior.

You can also define your own map tiles using custom map types or modify the presentation of existing map types using Styled Maps. When providing custom map types, you will need to understand how to modify the map’s Map Type Registry.

Here are several coordinate systems that the Google Maps API uses:

  • Latitude and Longitude values which refer a point on the world uniquely.
  • Tile coordinates which refer a specific tile on the map at the specific zoom level.

The Google Map API breaks up imagery at each zoom level into a set of map tiles. When a map scrolls to a new location, or to a new zoom level, the Maps API determines which tiles are needed using pixel coordinates, and translates those values into a set of tiles to retrieve. These tile coordinates are assigned using a scheme which makes it logically easy to determine which tile contains the imagery for any given point.

Tiles in Google Maps are numbered from the same origin as that for pixels. For Google’s implementation of the Mercator projection, the origin tile is always at the Northwest corner of the map, with x values increasing from west to east and y values increasing from north to south. Tiles are indexed using x,y coordinates from that origin. For example, at zoom level 2, when the earth is divided into 16 tiles, each tile can be referenced by a unique x,y pair. The calculation of the tile coordinates from the specified latitude-longitude value is derived from a formula which I would like to share with you:

tilex = floor(((((longitude) + 180) / 360) * (2^zoom level)))

tiley = floor(((1-(log(tan(latitude*((22/7)/180))+1.0/cos(latitude*((22/7)/180))) / (22/7))) * (2^zoom level) / 2.0))

The following JavaScript code shows how to create custom tiles and colour it based on a particular value.

function CoordMapType(tileSize) {

this.tileSize = tileSize;


CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {

var div = ownerDocument.createElement(‘div’);

div.innerHTML = coord; = this.tileSize.width + ‘px’; = this.tileSize.height + ‘px’; = ’10’; = ‘solid’; = ‘1px’; = ‘#AAAAAA’;

//The value will be change as per tiles (range,str1,str3).

var range = 5;

var str1=56;

var str3=37;

if ( ((str1==56)&&(str3==37)) && ((range>0 && range <5)) ) {’#00FF00′;


else if ( ((str1==56)&&(str3==37)) && ((range>=5 && range <8)) ) {’#FFFF00′;


else if ( ((str1==56)&&(str3==37)) && ((range>=8 && range <=10)) ) {’#FF0000′;


return div;


var map;

var India = new google.maps.LatLng(21.0000,78.0000);

function initialize() {

var mapOptions = {

zoom: 5,

center: India,

maxZoom: 15,

gridSize: 100,


draggable: true,

center: India,

scaleControl: true,

mapTypeId: google.maps.MapTypeId.ROADMAP


map = new google.maps.Map(document.getElementById(‘map-canvas’),



0, new CoordMapType(new google.maps.Size(100,100)));


google.maps.event.addDomListener(window, ‘load’, initialize);

The above code snippet will create a custom tile of 100*100 on the Google map and the colour of this tile is based on a value of ‘range’ variable.