19 November 2012

This example shows how to create monocrome Google Maps. Where the map will be using only shades of grey (with or without black and/or white). It might also be called grayscale or black-and-white.

Source code viewer
  1. // Style options.
  2. var map_styles = [ { featureType: "all", elementType: "all", stylers: [{ saturation: -100 } ] } ];
  3.  
  4. // Create styled map object.
  5. var styledMap = new google.maps.StyledMapType(map_styles, {name: "Styled Map"});
  6.  
  7. // Map options.
  8. var mapOptions = {
  9.   zoom: 13,
  10.   center: new google.maps.LatLng(59.428875, 24.741211),
  11.   mapTypeControlOptions: {
  12.     mapTypeIds: [google.maps.MapTypeId.ROADMAP, "styled"]
  13.   }
  14. };
  15. // Create map.
  16. var map = new google.maps.Map(document.getElementById("YOUR_MAP_ELEMENT_ID"), mapOptions);
  17. // Apply styles to map.
  18. map.mapTypes.set("styled", styledMap);
  19. map.setMapTypeId("styled");
Programming Language: Javascript