How TO - Grayscale Google Maps
Learn how to add a grayscale (black and white) filter to Google Maps.
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 »
