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
If you have any queries, please do not hesitate to contact me at Jainish Senjaliya