Color Tint My Google Map

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 overlay

Solution 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.

Demohttp://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><overlayXYx="0"y="1"xunits="fraction"yunits="fraction"/><screenXYx="0"y="1"xunits="fraction"yunits="fraction"/><rotationXYx="0"y="0"xunits="fraction"yunits="fraction"/><sizex="1"y="1"xunits="fraction"yunits="fraction"/></ScreenOverlay>

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

Solution 2:

I am going to make the assumption you mean to embed the API into a webpage. IF that is true you could wrap the API in to a div let us say then use a bit of CSS to fill the div with a blue color of your choosing and set the opacity of said div to maybe 0.4 or (40%). Your code would look something like this:

HTML

<div id="mapwrapper">MAP API EMBEDDING CODE</div>

CSS

#mapwrapper{
      opacity:0.4;
      filter:alpha(opacity=40); /* For IE8 and earlier */
      }

as cited by w3schools.com

I have used it for social media /social networking connections on websites.

Again this is if you are embedding into a website, I'd ask specifically about your intent but this dang thing won't let me post a comment.

Solution 3:

I actually found out myself a solution that works even better than the one suggested.

My solution will prevent the flickering as well. Check it out in this thread!