Custom map styles using google maps platform in applications

Photo by KOBU Agency on Unsplash

Context

We had a project at Inato where we needed to display a map that would fit our design system and hence needed customization compared to the classic google map.

To avoid painful in-code configuration using the API and allow our team to be agile on potential update requests (without CI/CD) from our product team, we decided to go with a console-based solution using the following tools from Google Cloud Platform:

• Google Maps Platform — Map Management
• Google Maps Platform — Map Styles

In this article, you will find a complete walkthrough to help you:

1. Create a unique map ID for your map instance
2. Apply custom, interface based, style to your application map

Pre-requisites

Before going through this article, if you are following it as a step-by-step guide, it is primordial that you have a setup google maps API key. Here is a link to the associated documentation:

Use API Keys | Maps JavaScript API | Google for Developers

Create a map ID using Map management

First, you will need to create a map “ID” using the tool “Map Management” from the google cloud console.

Start creating a new map ID by clicking on the button “Create map ID” at the top of the page. This will display a form asking for details about your map (name, description, map type).

To help you choose the correct map type, here is a quick overview of each of them:

• JavaScript: allows you to embed interactive Google Maps directly into web pages
• Android: allows you to integrate Google Maps into Android applications
• iOS: allows you to integrate Google Maps into iOS applications
• Static: allows you to generate static map images on the server side, which can be displayed in websites or applications

If you go with JavaScript, you will still have several options:

• raster: geographic information as a grid of pixels or cells. It is used for continuous data, such as satellite imagery, aerial photographs, and elevation models
• vector: geographic information as individual objects or entities, such as points, lines, and polygons; they are defined by geometry (coordinates) and attributes (e.g., name, population). It is the most common. It is used for representing discrete features like roads, buildings, boundaries, and points of interest

Then, when selecting “JavaScript vector”, you have two options that you can tick (or not):

• tilt: the map allows you to change the viewing angle, simulating a 3D perspective
• rotation: the map allows you to change the orientation of the map, essentially rotating the entire view

At Inato we work on React and thus needed a JavaScript vector type of map for our use case, without tilt or rotate options.

Do not forget to click on the “Save” button to create your new map ID.

Create a new map style

Let’s now create a map style using the tool “Map Styles” from the google cloud console.

Start creating a new map style by clicking on the button “Create style” at the top of the page.

Once clicked, a preview page opens.

Click on the button “Open in style editor” at the bottom of the page. That opens a new page with a map where you can see the output of the chosen pre-set and a list of features that you can customize (ex: road, water, country…). What you see here is the visual of how your map will look like once integrated to your project.

Here are a couple of examples of how you can use this tool to style the map:

• Change the color of a texture.
  If you want to change the color of the water, you need to select the Water feature, then the Geometry-Fill element, then check and set the Color property

• Remove some unnecessary elements.
  If you want to remove roads, you need to select the Road feature, then the All element, then select the value off for the property Visibility

• Change the color of a specific text.
  If you want to make country names red, you can select the Administrative-Country feature, then the Text-Fill element, then check and set the Color property

When the map is configured as you like, click on the “Save” button on the top right corner. It will open a form where you can name this style and then redirect you to a recap page of your styled map.

As you can see at the bottom, there is no map ID associated with the style. To add one, you can click on the button “Add map IDs” to select the map ID that you just created earlier.

N.B: multiple map IDs can be associated to the same style

Then, click on “Save” at the bottom of the page. This will save your changes and publish a version of the map style. If you need to edit it, don’t forget to press the “Publish” button after saving.

You now have a custom-styled google map that you can use in your application by providing the “map ID” to your google map API.

If you are using React, check out the other article I wrote explaining how to setup google maps API in React.

Congratulations! 🎉

Thank you very much for reading this article 🙏

If you need more information you can check the Github pages of the packages installed above and Google Maps Platform’s documentation.