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="http://maps.google.com/maps/api/js?sensor=false" 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:'http://hariomrubber.com/',icon:"http://labs.google.com/ridefinder/images/mm_20_red.png",title:"Hariom Rubber",data:{drive:false, zip:"362002",region:"Gujarat", city:"Junagadh", address:" Murlidhar So-1"}},1:{lat:23.0300,lng:72.5800,icon:"http://labs.google.com/ridefinder/images/mm_20_purple.png",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.lat, 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() {
  createMap(21.0000,78.0000,5);
}

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

</script>

<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

Advertisements

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:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s