How to display black & white google map

For display google map black and white then you have to set below script in your google map code.

  var mapOptions = new Object();
  mapOptions.styles = [{featureType:'all',stylers:[{saturation:-100},{gamma:0.50}]}];

Below is a eaxmple for display black & white google map

<script src="" type="text/javascript"></script>
<script type="text/javascript">

function createMap(lat, lng, zoomVal)
      var mapOptions ={
          center: new google.maps.LatLng(lat, lng),    
          zoom: zoomVal,   
          scrollwheel: false,  
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          styles : [{featureType:'all',stylers:[{saturation:-100},{gamma:0.0}]}]
      map = new google.maps.Map(document.getElementById("googleMap"), mapOptions);
      markerData = {0:{lat:21.5200,lng:70.4700,url:'',icon:"",title:"Hariom Rubber",data:{drive:false, zip:"362002",region:"Gujarat", city:"Junagadh", address:" Murlidhar So-1"}},1:{lat:23.0300,lng:72.5800,icon:"",title:"TYPO Help",data:{drive:false, zip:"380058",region:"Gujarat", city:"Ahmedabad", address:"Bodakdev"}}};
      for(markerId in markerData)
          markers[markerId] = createMarker(markerData[markerId]);

function createMarker(data)
      var myLatLng = new google.maps.LatLng(, data.lng);

      var marker = new google.maps.Marker({
          position: myLatLng,
          icon: data.icon,
          map: map,
          title: data.title
      google.maps.event.addListener(marker, 'click', function() {
          window.location.href = data.url;
    return marker;

var map;
var markers = {};

function initialize() {

google.maps.event.addDomListener(window, 'load', initialize);


<div id="googleMap" style="width:1000px; height:800px;"></div>

It will look like below image

Black & White google Map

Black & White google Map

If you have any queries, please do not hesitate to contact me at Jainish Senjaliya

One thought on “How to display black & white google map

  1. Pingback: Links of the Week for January 7th 2014 | Codepenguin blog

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s