Is there any way to display a Google Map (embedded via the Javascript API) in grayscale without losing any other functionality?
Sometimes when you scroll across a Google Map screen you'll see blocks of grey. Usually this occurs when the map is set to satellite view and the application struggles to load the data fast enough. However, sometimes this phenomenon occurs in map view if Google doesn't have access to the right data.
Yes, in V3 of the api they have introduced StyledMaps
.
They've even provided a tool for you to generate the code for the styles you like. Slide the "Saturation" all the way down and you've got grayscale going on!
The following example displays a grayscale map of Brooklyn:
var map; var brooklyn = new google.maps.LatLng(40.6743890, -73.9455); var stylez = [ { featureType: "all", elementType: "all", stylers: [ { saturation: -100 } // <-- THIS ] } ]; var mapOptions = { zoom: 11, center: brooklyn, mapTypeControlOptions: { mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'tehgrayz'] } }; map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); var mapType = new google.maps.StyledMapType(stylez, { name:"Grayscale" }); map.mapTypes.set('tehgrayz', mapType); map.setMapTypeId('tehgrayz');
There's a little shorter way (comparing to @Roatin Marth's best answer) to make your Google map grayscale with Google Maps JavaScript API v3 by directly including styles you generated with Google Maps API Styled Map Wizard into google.maps.MapOptions
object:
var container = document.getElementById('map_canvas'); var mapOptions = { zoom: 11, center: new google.maps.LatLng(40.6743890, -73.9455), styles: [{ stylers: [{ saturation: -100 }] }] }; var map = new google.maps.Map(container, mapOptions);
You get the array set under styles
property in mapOptions
variable by clicking onto "Show JSON" button inside Map Style panel when finishing your styles customisation using Google Maps API Styled Map Wizard.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With