Styling Google Maps [Guide]

Posted on - Last Modified on

Google Maps is a powerful tool that you can use on your website. For starters, it's free and the maps that you produce are really easy to embed. They're also interactive and full of information, so your users can get the most out of them.

 

One downside with standard Google Maps, however, is that they all look the same. You don't have to have the same template as everyone else, though. It's possible to style your Google Maps using Google's straightforward API to get the map to look the way you want.

 

Before You Begin

 

Before you can start styling your Google Map, you need to have one embedded on a Web page. You will also need to load the Google Maps JavaScript API – just make sure you change the YOUR_API_KEY in the code.

 

A basic page with the API called and a map displayed would look something like this:

 

<!DOCTYPE html>

<html>

  <head>

    <title>Simple Map</title>

    <meta name="viewport" content="initial-scale=1.0">

    <meta charset="utf-8">

    <style>

      html, body {

        height: 100%;

        margin: 0;

        padding: 0;

      }

      #map {

        height: 100%;

      }

    </style>

  </head>

  <body>

    <div id="map"></div>

    <script>

 

var map;

function initMap() {

  map = new google.maps.Map(document.getElementById('map'), {

    center: {lat: 51.5072, lng: 0.1275},

    zoom: 8

  });

}

 

    </script>

    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"

        async defer></script>

  </body>

</html>

 

This creates a road map centered on London and set with a zoom of eight (zoom settings can range from 0, which is the farthest away, to 22, which is the closest).

 


 

Components

 

The components that you can use to adjust the code above in order to style your map are:

 

·         stylers - this hides or makes objects visible, and changes s

·         elementTypes - this lets you target specific elements

·         featureTypes - these are objects on the map

 

The featureTypes you can select include:

 

·         water - lakes, oceans, rivers etc

·         road - all roads including motorways, streets etc

·         landscape - hills, fields, etc

·         poi - points of interest

·         transit - train stations, bus stations, ferry terminals, airports, etc

·         administrative - the admin areas

 

Styling

 

The styles that you can apply will typically have a featureType and a styler, while the elementType is optional.

 

Let's look at some sample code:

 

<!DOCTYPE html>

<html>

  <head>

    <title>Simple 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 customMapType = new google.maps.StyledMapType([

     

            {

    featureType: 'road',

    elementType: 'all',

    stylers: [

        { hue: '#d5c18c' },

    ]

},

{

        featureType: 'landscape.natural',

        elementType: 'all',

        stylers: [

            { hue: '#809f80' },

            { lightness: -35 }

        ]

    },

      {

        elementType: 'labels',

        stylers: [{visibility: 'off'}]

      },

      {

        featureType: 'water',

        stylers: [{: '#0000ff'}]

      }

    ], {

      name: 'Custom Style'

  });

  var customMapTypeId = 'custom_style';

 

  var map = new google.maps.Map(document.getElementById('map'), {

    zoom: 8,

    center: {lat: 51.5072, lng: 0.1275},

    mapTypeControlOptions: {

      mapTypeIds: [google.maps.MapTypeId.ROADMAP, customMapTypeId]

    }

  });

 

  map.mapTypes.set(customMapTypeId, customMapType);

  map.setMapTypeId(customMapTypeId);

}

 

    </script>

    <script src="https://maps.googleapis.com/maps/api/js?

 

key=AIzaSyAVi7QSKcgER0HHllOdJdiBEgmAWqO1cuw&signed_in=true&callback=initMap"

        async defer></script>

  </body>

</html>

 

The first styling element of this code is:

 

{

    featureType: 'road',

    elementType: 'all',

    stylers: [

        { hue: '#d5c18c' },

    ]

},

 

This changes all the roads on the map from orange to yellow.

 

The next element is:

 

{

        featureType: 'landscape.natural',

        elementType: 'all',

        stylers: [

            { hue: '#809f80' },

            { lightness: -35 }

        ]

    }

 

This changes the landscape to green, and sets the lightness at -35.

 

The next part of the code removes the labels:

 

{

        elementType: 'labels',

        stylers: [{visibility: 'off'}]

      }

 

And finally the last part of the code is concerned with styling changes of the water on the map from a light blue to a deep blue. Here is this part of the code:

 

{

        featureType: 'water',

        stylers: [{: '#0000ff'}]

      }

    ]

 

The end result is a map that looks much different from the original:

Syntax

As already mentioned, Google Maps are styled using two things—features and stylers. You can see this in the example above:

·         Water is the map feature

·         The color #0000ff is the styler

 

This would be coded as follows:

 {

    featureType: '',

    elementType: '',

    stylers: [

      {hue: ''},

      {saturation: ''},

      {lightness: ''},

    ]

  },

A full list of map features is available in the Google Maps JavaScript API Reference section, but it should be noted that some categories of map features also have sub categories. We have one in the example above: landscape.natural. The main map feature is "landscape" and the sub-category is "natural"

In addition to this, many map features have elements, referred to above as elementTypes:

·         all - selects everything

·         geometry - selects elements of the feature based on geometry. For example, the fill or the stroke.

·         labels - selects the labels associated with a feature so you can do things like style the text or the fill

Stylers are based around the hue, saturation and lightness model, also known as HSL. If you are familiar with graphic design this concept will be familiar. Hue determines the base color, saturation determines the intensity of the color, and lightness determines the amount of black or white that is shown.

The hue is represented as an HTML hex color. In the example above, the HTML hex color #809f80 is used for the landscape map features.

Saturation is represented by a number between 0 and 100, with 100 being the most intense. Lightness is represented on a similar scale, with 0 being black, and 100 being white.

The Wizard

The number of options and possibilities that you have when styling a Google Map is huge. This can take quite a bit of time to go through, particularly if you are trying to get specific details on things like certain buildings or roads.

The Styled Map Wizard is therefore a great help. You can use it to set up a JSON for the styles of map that you need. All of the features and elements indicated above can be selected, and you can easily apply stylers. It gives you a visual representation as you go so you can check your progress, and, once complete, you can copy it into your website or application.

Posted 26 October, 2015

Happymarli

Proofreader, Editor, Writer and App Developer

Do you need a professional editor and writer to proofread your technical documents, thesis, novel, statement of purpose, personal statement, resume, cover letter, manuscript, essay, short story, textbook content, or articles? Do you want to make sure that your marketing material content is flawless and appealing to readers? I can do any of that! I am a professional editor (academic, copy, line/su...

Next Article

5 Amazing Ways to Generate Leads on a Tight Budget