Google Map Layer Effect

Question

I'm created a div and embed Google Map code.

Like this:

But, i want make effect on my Google map.

But i don't know Google Map Api.

Have easy way or other soluitons? Thank you.

Answer 1

You can customize the style of your map. In this case you probably just want to set the Saturation to -100.

For a static map, the url might be: http://maps.googleapis.com/maps/api/staticmap?center=0,0&zoom=2&format=png&sensor=false&size=640x480&maptype=roadmap&style=saturation:-100

For a dynamic map, just create a style and pass it into your map options:

var styles = [
  {
    stylers: [
      { saturation: -100 }
    ]
  }
]

var mapOptions = {
  zoom: 12,
  center: new google.maps.LatLng(47.5,-122.5),
  styles : styles
}

var map = map = new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions);