Change the color scheme of google maps

When we use Google Maps JavaScript API v3 we have the extreme freedom to customize the output we gets like to change the color scheme of google maps

You can create a new map type to which to apply styles, by creating a StyledMapType and passing the feature and styler information to the constructor. This approach does not affect the style of the default map types.

To create a new map type:

  • Create your array of styles. See Map Features and Stylers for instructions.
  • Create a new google.maps.StyledMapType object, passing it the array of styles, as well as a name for the new map type.
  • Create your map object and, in the map options, include an identifier for the the new map type in the mapTypeIds array (which is a property of the mapTypeControlOptions object).
  • Associate the identifier in the last step with the new styled map.
  • Set the map to use the new map type.

And the code is shown below

function initialize() {

  // Create an array of styles.
  var styles = [
    {
      stylers: [
        { hue: "#00ffe6" },
        { saturation: -20 }
      ]
    },{
      featureType: "road",
      elementType: "geometry",
      stylers: [
        { lightness: 100 },
        { visibility: "simplified" }
      ]
    },{
      featureType: "road",
      elementType: "labels",
      stylers: [
        { visibility: "off" }
      ]
    }
  ];

  // Create a new StyledMapType object, passing it the array of styles,
  // as well as the name to be displayed on the map type control.
  var styledMap = new google.maps.StyledMapType(styles,
    {name: "Styled Map"});

  // Create a map object, and include the MapTypeId to add
  // to the map type control.
  var mapOptions = {
    zoom: 11,
    center: new google.maps.LatLng(55.6468, 37.581),
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
    }
  };
  var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  //Associate the styled map with the MapTypeId and set it to display.
  map.mapTypes.set('map_style', styledMap);
  map.setMapTypeId('map_style');
}

So i think you will get an little idea on how we can customize the google maps and we are mainly discussed about the change the color scheme of google maps

One Comment on “Change the color scheme of google maps

  1. Leonardo
    February 23, 2017

    Hi , good information , but maybe add an example on how the code actually changes the map will be appreciated

Leave a Reply

Your email address will not be published.