CODEWITHSUNDEEP
javascriptjquerygoogle-maps
Nyxynyx
Nyxynyx

Reputation: 63619

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 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?

Upvotes: 1

Views: 3964

Answers (3)

Eric
Eric

Reputation: 18922

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!

Upvotes: 0

Tina CG Hoehr
Tina CG Hoehr

Reputation: 6779

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.

Upvotes: 1

john.weland
john.weland

Reputation: 266

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.

Upvotes: 0

Related Questions