How to create Custom Google Map Styles in Google Data Studio

By 18th Jul 2020Blog, Google Data Studio
How to create Custom Google Map Styles in Google Data Studio

In this post I’ll talk about how to create a custom Google Map style in Google Data Studio. Recently the ability to use Google Maps in your reports was added to Data Studio. One of the nice features of this was being able to customize the styles of map you can use.

Default Google Map Styles available in Data Studio

At the time of writing there are three default styles available to use on your Google Map; Silver, Standard and Dark.

 Silver, Standard and Dark map styles in google maps for data studio

There are some basic customization options available for these three map styles. These include filtering the number of Roads, Landmarks and Labels that are visible on the map.

adjusting the number of roads landmarks and labels in google data studio for a google map

However there are some other options for customizing our maps if we use the custom styling options available.

Google Maps Platform Styling Wizard

To open up the Google Maps Platform Styling Wizard open the Style tab of the map and click ‘Edit JSON’.

clicking the edit JSON option in google data studio

You will then see a screen asking you to import a map style. Click on the link to the Google Maps Platform Styling Wizard.

the import map style screen in google maps

You will then be taken to the Platform Styling Wizard site. Click on ‘Create a Style’ to proceed. This is the first step towards creating a Custom Google Map Styles.

the google maps platform styling wizard for creating a Custom Google Map Style

There are six main styles you can choose to start with. In addition to Standard, Silver and Dark there are Retro, Night and Aubergine.

the six options for maps in google maps styling platform

Below are examples of what Retro, Night and Aubergine map styles look like. These can used as the basis for a custom Google Map Style.

Retro, Night and Aubergine map styles for google maps. these styles can be used as the basis for a Custom Google Map Style

Let’s move on and look at the ways we can create and customize our own map style.

Creating our own Map Style

So below our different map styles we see the option to click ‘More Options’. If we click this we get presented with a variety of ways to change how maps are displayed.

a map of cape town south africa showing the standard google map style

For example, let’s say we want to change how highways are displayed on our map.

We click Road > Highways and are presented with various options for changing the styling options. In the image below we can see the default way in which highways are displayed in the standard version of Google Maps.

adjusting the settings for displaying highways in google maps platform styling

Let’s say we want the highways to be purple. We can select Geometry . Fill and the change the colour to purple and then change the visibility setting to shown.

adjusting the fill of highways in google maps

We can also change the stroke colour to a dark blue and change how much weight is given to it. We can also adjust the colour to the exact one we want as shown in the image below.

adjusting the fill and stroke of highways in google maps

If we zoom out on the map, we see that this new method of displaying highways has been applied to the whole map.

a map of south africa showing highways highlighted in a very extreme way in the google maps platform styling

If we decided that the map looks hideous and we want to revert back to a standard option then there is the option for resetting the map to its default settings. Simply click the top right hamburger menu and click ‘Reset’ to change everything back it its default settings.

how to reset the map style in the google platform wizard

There are also options for highlighting specific features. For example airports as shown below.

On the left is the standard way of displaying airports and on the right is the airport highlighted by customizing the map style.

cape town international airport highlighted in a google map

Another example is if we wanted to highlight all parks in a city. Below we’ve changed the colour of parks to highlight parks in Cape Town.

parks in cape town south africa highlighted in a google map

You can also change the settings of some of the default map styles too. These are standard, silver, dark, retro, night, and aubergine.

Below is the dark map style with some adjustments. I’ve changed highways to be white and water to be white. Depending on what you are wanting to display on your map you can change the style to suit your needs.

a map of South Africa showing roads highlighted in white

Now what we need to do is import one of these map styles into Google Data Studio!

Import a Map Style in Google Data Studio

So once we’ve made our adjustments to our map we can now do the final step of importing the Google Map style in Data Studio.

Once you’ve finished the styling details of your map click ‘Finish’ in the bottom right corner.

Once you click ‘Finish’ you will be presented with a Export Style screen. For the purposes of using this style in Google Data Studio click ‘COPY JSON’ to copy the custom code.

Once you’ve clicked it you will see a confirmation that the JSON code has been copied to your clipboard as shown below.

You can then go back to your Data Studio report and click to paste the custom JSON code into the field provided.

Click ‘Import’ to finish the process.

Now we can view our finished and active Data Studio report with the custom Map Style!

The Finished Data Studio Report

Below is our finished Google Data Studio report with the custom Map Style active.

Unfortunately at the time of writing it is not possible to view Google Maps in embedded Google Data Studio reports.

Click on the ‘Google Data Studio’ icon in the bottom right hand corner of the report to open the report and view the interactive Google Map.

For those unable to view the live report here is a screenshot of the custom map that was created using the Google Maps Styling Wizard.

a screenshot of the custom map that was created using the Google Maps Styling Wizard.

I hope you found this post useful and interesting and good luck making some interesting maps in Data Studio!

My Other Blog posts

If you liked this blog post you might enjoy some of my other articles.

Purchase Google Data Studio Templates

If you’d like to download one of my Google Data Studio reports as a template to use for your own data, you can visit Data Studio Templates and purchase one.