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
Toolset Maps also allows you to set the map styles programmatically, using custom code.
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.
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:
Go to the Toolset → Settings page, click the Maps tab and scroll down to the Map styles section.
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.
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.
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.
- Installing Toolset Maps and Adding Address Fields
- Displaying a Simple Map
- Displaying a Map on A Single Post Template
- Displaying a List of Posts on A Map
- Filtering and Ordering Map Markers by Distance
- Show all related topics...
- Creating an API Key for Using Google and Azure Maps
- How to Use Google Maps API from China
- Data Caching For Maps Addresses