Question

I am using Google Maps V3 API to display my map.

Problem: How can I color tint the map, say blue, such that the map tiles have a blue tint to it, but the markers and other overlays do not? I do not wish to use custom-styles on the map itself which will cause me to hit the google map usage limits for styled maps quickly.

I thought of adding a blue polygon with an opacity, but figured the polygon will move off screen when you pan the map. Is there a better way to achieve this effect?

Answer 1

Adding a rectangle looks pretty convincing to me, with a defect: flicker when the map is zoomed in and out. I didn’t test thoroughly but you might run into layering issues, for example, being unable to click on a line that’s below the rectangle. The marker, as I remember, is in a different pane so it is clickable.

Demo http://jsfiddle.net/yV6xv/27/

bounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(-84.999999, -179.999999), 
  new google.maps.LatLng(84.999999, 179.999999));

rect = new google.maps.Rectangle({
    bounds: bounds,
    fillColor: "#0000ff",
    fillOpacity: 0.3,
    strokeWeight: 0,
    map: map
});

Side note: I tried a KML overlay like this:

  <ScreenOverlay>
    <name>Dynamic Positioning: Top of screen</name>
    <visibility>0</visibility>
    <Icon>
      <href>http://...blue.png</href>
    </Icon>
    <overlayXY x="0" y="1" xunits="fraction" yunits="fraction"/>
    <screenXY x="0" y="1" xunits="fraction" yunits="fraction"/>
    <rotationXY x="0" y="0" xunits="fraction" yunits="fraction"/>
    <size x="1" y="1" xunits="fraction" yunits="fraction"/>
  </ScreenOverlay>

Would have been a winner, but you can’t drag and scroll the map.