Customizing Google Maps: Styling the Base Map

Overview

This lesson teaches you to:

• Style the base map’s colors.
• Hide base map geometry, labels and icons.

Description

Map styles allow you to customize the presentation of the standard Google base map, by changing the visual display of elements such as roads, parks, and built-up areas.

In this lesson, you'll create a styled map of a University campus. The map will be branded with the school colors, and non-school-related features will be hidden, to enhance the relevant content.

Try it out

Changing colors

We'll change the map's colors using the API's Styled Maps feature. Styled Maps accept an array of map stylers which define the colors, visibility, and weight of featureTypes on the map.

Each style consists of a featureType, an optional elementType which can be used to specify sub-features, and a stylers array, which contains the values for hue, lightness, visibility, etc.

The styles array below selects a number of feature types for styling:

• 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

Some parts of the map above remain un-styled, such as parks and other points of interest - specified in the API as poi feature types. To hide these, we add another style to hide all poi geometry.

It's important to note that styles are applied to the map in the order they're specified. Therefore, this style must be added before the poi.school style; we also need to explicitly set visibility back on for the school features.

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

Extra credit

Many other map features can be hidden or styled - try hiding other icons or parcel boundary outlines. The full list of featureType and elementType values is provided in the google.maps.MapTypeStyleFeatureType reference documentation.

You should also try out the Styled Maps Wizard, which allows you to easily experiment with styles, and which creates a style array that you can copy and paste into your code.

Next chapter: Creating custom markers