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.
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.
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’.
You will then see a screen asking you to import a map style. Click on the link to the Google Maps Platform Styling Wizard.
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.
There are six main styles you can choose to start with. In addition to Standard, Silver and Dark there are Retro, Night and Aubergine.
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.
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.
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.
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.
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.
If we zoom out on the map, we see that this new method of displaying highways has been applied to the whole map.
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.
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.
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.
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.
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.
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.
Download 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.
Hi Michael. Your tutorials are very helpful. I am working in Google Data Studio and am following your instructions on styling a map in one of my reports. I clicked on “Edit JSON” to use the Google Styling Wizard and it gave the option to use the beta version on the Google Cloud Platform. I was able to style the map the way I wanted and saved the style but there does not seem to be a way to get the JSON code that is needed to paste into the Import JSON dialog box in Data Studio. It seems that the styling functionality in the Cloud Platform only allows publishing and use via a MapID and API key, not by exporting the JSON. Do you know if there is a way to export the JSON from the Cloud Platform Map Styler?
@Ric – yup, the new Beta tool appears to be unable to export the Map Style so if you need to copy the map style to a 2nd project you’re SOL. Over 18 months, and they still haven’t fixed this, so I guess they have no intention of doing so.
A colleague of mine now has to waste a whole load of time recreating the Map Style that he created
It appears to be another case of Google releasing a new tool that is far less functional than the previous one. I can’t tell if it’s malice or incompetence.
[…] map or add one using JSON. You can create a custom Google Maps style through Google Data Studio (here is a tutorial) or […]