CODEWITHSUNDEEP
javascriptgoogle-maps
CJWEB
CJWEB

Reputation: 591

Transparent color overlay to Google Satellite map?

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.

Upvotes: 2

Views: 3950

Answers (1)

geocodezip
geocodezip

Reputation: 161324

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

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

above link no longer works, version on archive.org

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

screenshot of resulting map

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.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas"></div>

Upvotes: 6

Related Questions