How TO - Grayscale Google Maps


googletag.cmd.push(function() googletag.display('div-gpt-ad-1422003450156-2'); );
How TO - Grayscale Google Maps
❮ Previous
Next ❯
Learn how to add a grayscale (black and white) filter to Google Maps.
function myMap()
var mapProp=
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
;
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
Try it Yourself »
Grayscale Google Maps
Use the CSS filter
property to convert the google map to black and white. 100% is completely black and white:
Example
<!-- Style the map -->
<style>
#map
width: 100%;
height: 400px;
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0
*/
filter: grayscale(100%);
</style>
<!-- Display the
map -->
<div id="map"></div>
<!-- Google Maps Script -->
<script>
function myMap()
var mapCanvas =
document.getElementById("map");
var mapOptions =
center: new google.maps.LatLng(51.5, -0.2),
zoom:
10
;
var map = new google.maps.Map(mapCanvas,
mapOptions);
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>
Try it Yourself »
❮ Previous
Next ❯