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

Start Styling your Map

Using a styled map, you can customize the presentation of the Google base maps, changing the visual display of such elements as roads, parks, and built-up areas.

Example

The following example turns all map features to gray, colors arterial road geometry blue, and hides all business labels.

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 40.674, lng: -73.945},
    zoom: 12,
    styles: [
      {
        featureType: 'all',
        stylers: [
          { saturation: -80 }
        ]
      },{
        featureType: 'road.arterial',
        elementType: 'geometry',
        stylers: [
          { hue: '#00ffee' },
          { saturation: 50 }
        ]
      },{
        featureType: 'poi.business',
        elementType: 'labels',
        stylers: [
          { visibility: 'off' }
        ]
      }
    ]
  });
}
<div id="map"></div>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
<!DOCTYPE html>
<html>
  <head>
    <title>Styled Maps</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      function initMap() {

        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 40.674, lng: -73.945},
          zoom: 12,
          styles: [
            {
              featureType: 'all',
              stylers: [
                { saturation: -80 }
              ]
            },{
              featureType: 'road.arterial',
              elementType: 'geometry',
              stylers: [
                { hue: '#00ffee' },
                { saturation: 50 }
              ]
            },{
              featureType: 'poi.business',
              elementType: 'labels',
              stylers: [
                { visibility: 'off' }
              ]
            }
          ]
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>
  </body>
</html>

For a list of all available values for featureType, elementType and stylers, see the JSON style reference.

Style the standard map types or create your own map type

There are two ways to apply styles to a map:

  • Set the .styles property of the map's MapOptions object. This approach changes the style of the standard map types. Base imagery in terrain and satellite views is not affected, but roads, labels, and other map components do respect the styling rules. See how to change the default map style.
  • Create a StyledMapType and apply it to the map. This creates a new map type, which the user can select from the map type control. See how to create a styled map type.

Both approaches take an array of MapTypeStyle objects, each of which is composed of selectors and stylers. See the section on style syntax below.

For Google Maps APIs Premium Plan customers, the default map style has labels turned off for map features in the poi.business category. You can turn these labels back on by applying a custom style.

Style syntax

Styled maps use two concepts to apply colors and other style changes to a map:

  • Selectors specify the geographic components that you can style on the map. These include roads, parks, bodies of water, and more, as well as their labels. The selectors include features and elements, specified as featureType and elementType properties.
  • Stylers are color and visibility properties that you can apply to map elements. They define the displayed color through a combination of hue, color, and lightness/gamma values.

To style your map, combine the selectors and stylers into a style array, and pass it to the default map's MapOptions object, or to the StyledMapType constructor. The array takes the following form:

var stylesArray = [
  {
    featureType: '',
    elementType: '',
    stylers: [
      {hue: ''},
      {saturation: ''},
      {lightness: ''},
      // etc...
    ]
  },
  {
    featureType: '',
    // etc...
  }
]

For a list of all available values for featureType, elementType and stylers, see the JSON style reference.

Changing the default map style

To modify the styles of the default map types, set the style array in the map's MapOptions either at time of construction or by calling Map.setOptions. Changes to labels and roads affect all map types (terrain, satellite and hybrid maps as well as the default roadmap type).

See the example at the top of this page.

For a list of all available values for featureType, elementType and stylers, see the JSON style reference.

Creating a styled map type

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

In the following example, notice the Styled Map control at the top left of the map. This is the new map type created in the example code.

function initMap() {

  // Create a new StyledMapType object, passing it an array of styles,
  // and the name to be displayed on the map type control.
  var styledMapType = new google.maps.StyledMapType(
    [
      {
        stylers: [
          { hue: '#00ffe6' },
          { saturation: -20 }
        ]
      },{
        featureType: 'road',
        elementType: 'geometry',
        stylers: [
          { lightness: 100 },
          { visibility: 'simplified' }
        ]
      },{
        featureType: 'road',
        elementType: 'labels',
        stylers: [
          { visibility: 'off' }
        ]
      }
    ],
    {name: 'Styled Map'});

  // Create a map object, and include the MapTypeId to add
  // to the map type control.
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 55.647, lng: 37.581},
    zoom: 11,
    mapTypeControlOptions: {
      mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain',
              'styled_map']
    }
  });

  //Associate the styled map with the MapTypeId and set it to display.
  map.mapTypes.set('styled_map', styledMapType);
  map.setMapTypeId('styled_map');
}
<div id="map"></div>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
<!DOCTYPE html>
<html>
  <head>
    <title>Styled Map Types</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      function initMap() {

        // Create a new StyledMapType object, passing it an array of styles,
        // and the name to be displayed on the map type control.
        var styledMapType = new google.maps.StyledMapType(
          [
            {
              stylers: [
                { hue: '#00ffe6' },
                { saturation: -20 }
              ]
            },{
              featureType: 'road',
              elementType: 'geometry',
              stylers: [
                { lightness: 100 },
                { visibility: 'simplified' }
              ]
            },{
              featureType: 'road',
              elementType: 'labels',
              stylers: [
                { visibility: 'off' }
              ]
            }
          ],
          {name: 'Styled Map'});

        // Create a map object, and include the MapTypeId to add
        // to the map type control.
        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 55.647, lng: 37.581},
          zoom: 11,
          mapTypeControlOptions: {
            mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain',
                    'styled_map']
          }
        });

        //Associate the styled map with the MapTypeId and set it to display.
        map.mapTypes.set('styled_map', styledMapType);
        map.setMapTypeId('styled_map');
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

For a list of all available values for featureType, elementType and stylers, see the JSON style reference.

The Styled Map Wizard

You can use the Styled Map Wizard to set up the JSON for your map's styles. The wizard allows you to select features and their elements, apply stylers to those features, and save the styles to JSON, which you can copy and paste into your application.

Send feedback about...

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