I need to apply a color tint to a Google Satellite map.

I know it is possible to style RoadMaps but the API documentation says this is not possible with satellite imagery - I guess because they are photos.

But could I had a tiling transparent PNG layer to achieve the desired effect? While still having clickable markers above the tint layer?

The API documentation describes polygon overlays but the examples are all affixed to latlng points. I want to cover the entire canvas.

I need to apply a color tint to a Google Satellite map.

I know it is possible to style RoadMaps but the API documentation says this is not possible with satellite imagery - I guess because they are photos.

But could I had a tiling transparent PNG layer to achieve the desired effect? While still having clickable markers above the tint layer?

The API documentation describes polygon overlays but the examples are all affixed to latlng points. I want to cover the entire canvas.

• javascript
• google-maps

1 Answer 1

There is a fairly simple example of a custom map in the documentation:

https://google-developers.appspot./maps/documentation/javascript/examples/full/maptype-overlay (no longer working)

above link no longer works, version on archive

Changing the getTile routine in that example to the below version gives a green tinted overlay, markers and infowindows still work as expected:

CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
  var div = ownerDocument.createElement('div');
  div.style.width = this.tileSize.width + 'px';
  div.style.height = this.tileSize.height + 'px';
  div.style.fontSize = '10';
  div.style.backgroundColor = '#00FF00';
  div.style.opacity = 0.4;
  return div;
};

Working example

code snippet:

/** @constructor */
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';
  div.style.backgroundColor = '#00FF00';
  div.style.opacity = 0.4;
  return div;
};

var map;
var chicago = new google.maps.LatLng(41.850033, -87.6500523);

function initialize() {
  var mapOptions = {
    zoom: 10,
    center: chicago,
    mapTypeId: google.maps.MapTypeId.HYBRID
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  var marker = new google.maps.Marker({
    position: chicago,
    title: "test",
    map: map
  });
  var infowindow = new google.maps.InfoWindow({});
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent("Hello<br>" + marker.getPosition().toUrlValue(6));
    infowindow.open(map, marker);
  });

  // Insert this overlay map type as the first overlay map type at
  // position 0. Note that all overlay map types appear on top of
  // their parent base map.
  map.overlayMapTypes.insertAt(
    0, new CoordMapType(new google.maps.Size(256, 256)));
}

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

html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis./maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas"></div>