How to fill color inside tiles using tile co-ordinates Google Maps?

user_9317496 0
Viewed 71

I have a tile overlay on google map.I would like to shade or fill color the tile(10,15) as red.I here by attached the image how the result should be. here is the link to my code .https://jsfiddle.net/60fhd57b/3/

function CoordMapType(tileSize) {
 this.tileSize = tileSize;
 }

CoordMapType.prototype.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.borderStyle = 'solid';
div.style.borderWidth = '1px';
div.style.borderColor = '#AAAAAA';
return div;
};

function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {lat: 41.850, lng: -87.650}
});

  map.overlayMapTypes.insertAt(
  0, new CoordMapType(new google.maps.Size(200, 200)));
 }

enter image description here

google-maps css jquery javascript
1 Answers

Heres a working example: https://jsfiddle.net/60fhd57b/13/

You should replace the image with a something that looks like the example you listed.

It works by checking if the current cordinates are the ones you specified

  if(coord.x == 10 && coord.y == 15){
    div.style.backgroundImage = 'url("url to image")'
  }
user_81654780
Related