You can define many overlay map types this way:
var getTile = function(coord, zoom, ownerDocument) { var div = ownerDocument.createElement('div'); div.innerHTML = coord; div.style.width = this.tileSize.width + 'px'; div.style.height = this.tileSize.height + 'px'; div.style.fontSize = '10'; div.style.fontWeight = 'bolder'; div.style.border = 'dotted 1px #aaa'; div.style.textAlign = 'center'; div.style.lineHeight = this.tileSize.height + 'px'; return div; }; map.addOverlayMapType({ index: 0, tileSize: new google.maps.Size(256, 256), getTile: getTile });
You must define a function called getTile
, which returns a HTML element used to fill the map overlay. Also, you have to set an overlay index
, which place the overlay on top of the base map, according this index.
NOTE: You can remove an overlay map type using removeOverlayMapType(overlay_index)
.