You're all set!

To start developing, please head over to our developer documentation.

Activate the Google Maps JavaScript API

To get you started we'll guide you through the Google Developers Console to do a few things first:

  1. Create or choose a project
  2. Activate the Google Maps JavaScript API and related services
  3. Create appropriate keys
Continue

Customizing a Google Map: Styled Maps

Overview

This tutorial teaches you how to customize a Google base map by changing the style of map features like roads, parks, or built-up areas. To gain a more comprehensive understanding of styling maps, read the complete styling guide.

The university map below illustrates the concepts of styling in this tutorial. Notice that it includes custom colors on the base map, and hides certain map features.

Try it yourself

All the HTML, JavaScript and CSS code you need to create the map is below.

var map;
function initialize() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: new google.maps.LatLng(-33.91722, 151.23064),
    mapTypeId: 'roadmap',
    styles: [
      {
        featureType: 'road',
        elementType: 'geometry',
        stylers: [
          { color: '#000000' },
          { weight: 1.6 }
        ]
      }, {
        featureType: 'road',
        elementType: 'labels',
        stylers: [
          { saturation: -100 },
          { invert_lightness: true }
        ]
      }, {
        featureType: 'landscape',
        elementType: 'geometry',
        stylers: [
          { hue: '#ffff00' },
          { gamma: 1.4 },
          { saturation: 82 },
          { lightness: 96 }
        ]
      }, {
        featureType: 'poi.school',
        elementType: 'geometry',
        stylers: [
          { hue: '#fff700' },
          { lightness: -15 },
          { saturation: 99 }
        ]
      }, {
        featureType: 'poi',
        elementType: 'geometry',
        stylers: [
          { visibility: 'off' }
        ]
      }, {
        featureType: 'poi.school',
        elementType: 'geometry',
        stylers: [
          { visibility: 'on' },
          { hue: '#fff700' },
          { lightness: -15 },
          { saturation: 99 }
        ]
      }
    ]
  });
}
<div id="map"></div>
html, body, #map {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%
}
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize" async defer></script>
<!DOCTYPE html>
<html>
  <head>
    <title>Styling the Base Map</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
   <script>
      var map;
      function initialize() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 16,
          center: new google.maps.LatLng(-33.91722, 151.23064),
          mapTypeId: 'roadmap',
          styles: [
            {
              featureType: 'road',
              elementType: 'geometry',
              stylers: [
                { color: '#000000' },
                { weight: 1.6 }
              ]
            }, {
              featureType: 'road',
              elementType: 'labels',
              stylers: [
                { saturation: -100 },
                { invert_lightness: true }
              ]
            }, {
              featureType: 'landscape',
              elementType: 'geometry',
              stylers: [
                { hue: '#ffff00' },
                { gamma: 1.4 },
                { saturation: 82 },
                { lightness: 96 }
              ]
            }, {
              featureType: 'poi.school',
              elementType: 'geometry',
              stylers: [
                { hue: '#fff700' },
                { lightness: -15 },
                { saturation: 99 }
              ]
            }, {
              featureType: 'poi',
              elementType: 'geometry',
              stylers: [
                { visibility: 'off' }
              ]
            }, {
              featureType: 'poi.school',
              elementType: 'geometry',
              stylers: [
                { visibility: 'on' },
                { hue: '#fff700' },
                { lightness: -15 },
                { saturation: 99 }
              ]
            }
          ]
        });
      }
    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize">
    </script>
  </body>
</html>

Changing base colors

You can use the Styled Maps feature in the Google Maps JavaScript API to change a map's base colors. Styled maps accept an array of stylers which can define the color, visibility, and weight of each featureType on the map.

Each style consists of the following:

  • featureType: Specifies the map feature
  • elementType: An optional type that specifies sub-features of featureType
  • stylers array: Specifies color and visibility properties of map features like hue, lightness, visibility, and other possible options.

In the code sample below, notice how the styles array selects and styles a number of feature types like road, landscape and poi.school.
Styled map

  • Road lines are colored black.
  • Road labels are colored white.
  • The landscape is colored yellow.
  • School features (such as campus buildings) are colored white.
map.set('styles', [
  {
    featureType: 'road',
    elementType: 'geometry',
    stylers: [
      { color: '#000000' },
      { weight: 1.6 }
    ]
  }, {
    featureType: 'road',
    elementType: 'labels',
    stylers: [
      { saturation: -100 },
      { invert_lightness: true }
    ]
  }, {
    featureType: 'landscape',
    elementType: 'geometry',
    stylers: [
      { hue: '#ffff00' },
      { gamma: 1.4 },
      { saturation: 82 },
      { lightness: 96 }
    ]
  }, {
    featureType: 'poi.school',
    elementType: 'geometry',
    stylers: [
      { hue: '#fff700' },
      { lightness: -15 },
      { saturation: 99 }
    ]
  }
]);

Hiding features in the map

You can choose to hide features on a customized map.

The sample map in this tutorial specifies points of interest like parks or schools as poi feature types. The code sample below hides poi feature types by setting their visibility style off. Notice that for the poi.school subtype, the visibility style is set on.

You must apply styles to the map in the order they're specified in the style reference. Following this rule, the sample below adds the poi style before the poi.school style.

{
  featureType: 'poi',
  elementType: 'geometry',
  stylers: [
    { visibility: 'off' }
  ]
}, {
  featureType: 'poi.school',
  elementType: 'geometry',
  stylers: [
    { visibility: 'on' },
    { hue: '#fff700' },
    { lightness: -15 },
    { saturation: 99 }
  ]
}

Additional styling options and tools

You can apply the concepts in this tutorial to hide other icons or style other map features. See the complete list of featureType and elementType values in the style reference.

Use the Google Maps APIs Styling Wizard to experiment with styles. When you're ready, you can copy the resulting JSON style array and paste it into your code.

Send feedback about...

Google Maps JavaScript API
Google Maps JavaScript API
Need help? Visit our support page.