HOW TO: Make a Custom Map on Google Maps

The Google Map customization options are plentiful

This guide covers both the new Google Maps cloud-based styling as well as the previous and only option; JSON based styling. Both options have a fairly approachable interface, once you get over the seemingly overwhelming number of options to customize every road type, point of interest category, transit lines etc.

While you can’t change the font style of labels, you can change pretty much everything else on a map.

We’ve switched from JSON only to cloud-based styling for both web development and app development projects, as it’s less fuzz to keep track of when using cloud-based styling.

JSON is still supported but cloud-based updates are easier

Google is still offering JSON style declarations for customizing colors etc., but have introduced Cloud-based tooling to make it easier to roll-out map updates on websites and apps.

Cloud-based features also include adding/removing POI’s, new map-feature types and vector maps as an option to use instead of static images on websites.

Cloud-based styling: You can set everything up in the Google Cloud console when customizing a map, both when creating and editing styles. You do not need to code anything as previously with JSON. Also, when you update a map style, it will automatically be applied to your website or app.

JSON style declarations: You can either hand-code JSON declarations to style maps and exclude POIs or use Google’s Maps Styling Wizard tool. If you use this method, you will have to update client-side code using the end user’s device to perform operations and update your website or app.

Be aware of role limitations

Before beginning to customize your maps, do note that you either have to be the Project Owner or a Project Editor IAM. You can learn more about how to manage project members or change project ownership here.

How to make a custom Google Map using cloud-based styling

Let’s look at the new cloud-based styling first. You will do everything from inside the Google Cloud Console.

First we will create a MAP ID and then a Map Style.

Create a map ID

1. In the Google Cloud Console, go to the Maps Management page
2. Select Create New Map ID
3. Choose a unique Map Name
4. Select Map Type or platform (JavaScript, Android, iOS or Static)
5. Write a short Description to remember your Map IDs purpose (optional)
6. Click Next

A new unique Map ID has now been created and can be used with your custom map style. For example, if you have created a unique map style for iOS devices, you can refer to this MAP ID every time you are making maps for IOS devices.

The next step is to customize the map and make it look great. For that to happen you need to create a map style.

Create a map style

1. Go to the Map Styles page
2. Select Create New Map Style from the left navigation menu
3. Choose a Map Style (Standard, Silver, Retro, Dark, Night or Aubergine)
4. Associate your newly created Map ID
5. Select Customize in Style Editor

The Style Editor is where you can stylize your map to your hearts content. You can apply colors, stroke weights, saturation and lightness to every element on the map. They are grouped in the main categories Administrative, Landscape, Points of Interest, Road, Transit and Water.

Each category then has one or more sub categories drilling down in fine details what exactly it is you want to change. It could be the color of a highway, the label of an attraction or an entire locality.

How to make a custom Google Map using JSON style declarations

While the new Cloud-based tooling is marketed as an easier way to update your maps in any future revisions, you may want to use JSON instead. We’ll go through how to use the JSON style declarations below.

Follow steps 1 through 5 in the Create a MAP ID section above (or reuse an existing MAP ID), then:

Create a map ID

1. In the Google Cloud Console, go to the Maps Management page
2. Select Create New Map ID
3. Choose a unique Map Name
4. Select Map Type or platform (JavaScript, Android, iOS or Static)
5. Write a short Description to remember your Map IDs purpose (optional)
6. Click Next

Your unique Map ID is ready for use. Next you’ll set up a map style to apply colors and visual styles to your map.

Create a map style

1. Select Map Styles
2. Select Create New Map Style from the left navigation menu
3. Select Import JSON
   Here you will need to import your JSON code and paste in the window. The JSON can be created in two different ways, see below.
4. Associate your newly created Map ID
5. Either Skip or Customize in Style Editor
   This is optional. Since you have already applied a JSON based style, there’s probably no reason to go in and tweak your style further in the Cloud Console based style editor.

For Step 3, you can either choose to hand-code or generate the JSON code to paste in the window.

• If you choose to hand-code, jump to the JSON Hand-Code Styling Example section for examples.
• If you choose to use Styling Wizard, jump to the JSON Maps Styling Wizard section for more information.

JSON hand-code styling example

JSON has the following declarations; featureType (optional), elementType (optional) and stylers (required). An example with all three declarations looks like this:

This JSON code will turn all map features green, color highways purple and disable labels for Points of Interest.

There’s a comprehensive guide with all styles and attributes described in Google’s documentation.

JSON maps styling wizard

You can also still use the old Maps Styling Wizard to apply the same effects as above.

Once you are done customizing and happy with the result, you can Select Finish and you’ll get the JSON in an exportable format for either your app or website or an URL for Google’s Static Maps API.

Conclusion

We hope this guide has helped you get a better idea of how to style the Google Map API to your brand. It’s what we follow when we develop Android and iOS apps to make the map fit the company brand to a T.

If you are struggling to customize your Google maps so they work flawlessly in your app, or if you would just like to include customized Google maps in your Android, iOS or cross-platform app, we are just a phone call or email away.

Don’t launch an app or website with a buggy or poorly made Google Map, instead make it fit your brand.

At Inspire Visual we are experts at helping with mobile app and website development, including integrating great features such as branded Google Maps styles. Get in touch today!