Skip Navigation
Buy Now
Home » Course lessons » Using custom styles for maps in WordPress

Using custom styles for maps in WordPress

It is possible to use custom styles when displaying Google Maps on your site. You can customize which elements are displayed, select their colors, size and much more.

Azure Maps currently do not allow using custom styles for maps.

Toolset Maps allows you to easily use these custom styles when displaying maps. You can set a default map style for your site and also to select a style per map, which overwrites the default one. The following two images show examples of different styles.

Map using the “Silver” custom style

Map using the “Lost in the desert” custom style

Map using the
Map using the

Toolset Maps also allows you to set the map styles programmatically, using custom code.

Creating a Custom Style File

To create your custom map style, or get ready-to-use ones, you can use Google’s Styling Wizard or Snazzy Maps, for example. Details on how to use these sites is beyond the scope of this page, however, a simple online search should provide you with many tutorials. Both sites eventually present you with a generated JSON code. The following image shows how this looks like in Google’s Styling Wizard.

A styling file generated using Google Styling Wizard
A styling file generated using Google Styling Wizard

You need to copy this code and paste it into a text editor of your choice. Then, save the file with the .json extension, for example:

  • black-and-white-map.json

Changing the Default Map Style for Your Site

Go to the Toolset → Settings page, click the Maps tab and scroll down to the Map styles section.

Map styles section of the Toolset Settings page

Use the Default map style dropdown to select a style. By default, you can select from three classic Google Maps styling: Night, Silver, and Standard. Use the Upload a different map style (JSON file) button to upload a file created through steps explained in the previous section.

Selecting a Custom Style for Specific Maps

When inserting a map into your pages or templates, you can select the style specifically for that map. Add the Map block and in the block settings look for the Map style section. You can use the dropdown menu to select one of the available styles.

Selecting the custom map style
Selecting the custom map style

Use custom map marker icons

Out-of-the-box, Toolset provides you with an array of map marker icons. You can also easily add your own custom ones.

Go to the Toolset → Settings page and click the Maps tab. There, look for the Map markers section and click the Add a new marker button.

We recommend using the following format:

  • Use transparent PNG or SVG format so the map is visible underneath the marker icon.
  • Use icons with dimensions of 32 x 32 pixels. This is the dimension we automatically resize the SVG markers to. We don’t scale other image format so if you use them, upload them in the exact size as you want them to appear on the map.

Dario
Updated
January 19, 2021
Send feedback to our documentation team