15min

Creating a Custom Map Theme - Google maps engine

Overview

This article covers creating a custom theme for your WP Go Maps Map. You will learn how to create a theme for Google Maps engine and how to add it to the settings for your Map.

Setup

Prerequisites

The Following Plugin/s need to be installed and active

  • WP Go Maps

The Following Map engine needs to be enabled

  • WP Google Maps Engine

Create a Custom Map Theme

We will use the Google Maps APIs Styling Wizard to create a style for our Map. Start by going to this URL,  https://mapstyle.withgoogle.com/, and select the "No thanks, take me to the old style wizard" URL at bottom of the modal.(The old style wizard is used because it makes the JSON code available for the theme that has been created/customized)

Select "No thanks, take me to the old style wizard"
Select "No thanks, take me to the old style wizard"

From the left Create map style sidebar, select one of the 6 sample themes as a starting point. For this article, we chose the Retro style. When you select a style by clicking in the appropriate radio button the map preview will change to your selected style.

Select a starting theme
Select a starting theme

The next step is to fine-tune the details for our new theme. Click the MORE OPTIONS button at the bottom of the left sidebar. You can now make changes to all of your map’s features.

The highest level at which you can make changes is All. To make changes at this level, click the arrow to the right of All in the sidebar. The sidebar will expand as shown below.

Feature, elements, stylers
Feature, elements, stylers

You can make global changes to the Geometry and Labels on your map here. Click on the arrow for the feature you want to change. In the screenshot below we are changing the color of the Icon associated with each Label. Please note the changed icon colors on the preview map

label icons updated colors
label icons updated colors

You can make changes to any of the following feature types using the Styling Wizard:

  • All (Global Changes)
  • Administrative (Borders – both official and unofficial)
  • Landscape (Terrain – both man-made and natural)
  • Points of Interest
  • Road
  • Transit
  • Water

One of the most useful changes you can make to personalize a map is to hide different features. In the screenshot below, all Business Points of Interest are hidden. Compare this screenshot with those above and you will see that both the Sydney Harbor Bridge and the Anzac Bridge are no longer visible on the Map.

Hidden maps features
Hidden maps features

Once you have finished customizing a theme, click the FINISH button.

The Export Style window opens up. Copy the JSON code for pasting into the WP Go Maps settings for our Map. 

Copy JSON
Copy JSON

Next we'll paste this code directly into the WP Go Maps settings.

Use Your Custom Theme in WP Go Maps

Navigate to the Themes area of the map you'd like to apply your custom style to

WP Go Maps -> Maps (edit your chosen map) -> Themes

Select the "Enter theme JSON data manually" URL

Select "Enter theme JSON manually"
Select "Enter theme JSON manually"



Right-click into the text box and press {Ctrl}{v} to paste your JSON code. Then click the Save Button

Paste JSON and save map
Paste JSON and save map

Your Map now has a custom theme.



Updated 27 Jun 2022
Did this page help you?
Yes
No