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)
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.
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.
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
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 Harbour Bridge and the Anzac Bridge are no longer visible on the Map.
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.
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) -> Settings -> Themes -> Theme data
Right-click into the text box and press {Ctrl}{v} to paste your JSON code. Then click the Save Button
Your Map now has a custom theme.
