Toolset Maps plugin makes it easy to display any sort of information on Google and Azure Maps. You can use special custom fields for addresses, display the maps and add pointers to them.

First, install the Toolset Maps plugin, which is included in the full Toolset and Views packages.

Before you can start using the Google or Azure Maps API, you need to enter your API key.

After activating Toolset Maps, go to the Toolset -> Settings page and click the Maps tab. Enter the API key you got from the maps service of your choice.

Once everything is set up, you will have the following:

  • An Address field type, to use as a custom field or user field
  • A Map field, which displays a map on the front-end
  • A Marker field, which adds a marker to a map
  • Several additional fields that control the map on the front-end

Displaying Maps on the Site’s Front-end

You can display maps inside regular content, in Content Templates, in Views, and in WordPress Archives.

The following table summarizes typical uses for a map and how to implement:

Display a page with “our address”
  1. Create a regular WordPress page.
  2. Click on Fields and Views and insert the Map field from under the Toolset Maps section.
  3. Add a Marker field, and in the Marker address comes from section, select An address option and enter the address.
Display a map with a marker for a single item
  1. Add an Address field to the content-type that needs to display an address on the map.
  2. Create a Content Template for that content-type
  3. When editing the Content Template, click on Fields and Views and insert the Map field from under the Toolset Maps section.
  4. Add a Marker field and select the data-source as the custom field that you’ve added in step (1).
Display a list of items on a map
  1. Add an Address field to the content-type that needs to display an address on the map.
  2. Create a View that will display that content-type
  3. When editing the Loop Output, position the cursor before the View Loop, click on Fields and Views and insert the Map field from under the Toolset Maps section.
  4. Position the cursor inside the View Loop, add a Marker field and select the data-source as the custom field that you’ve added in step (1).

Adding Map Addresses as Custom Fields for Posts, Terms and Users

Once the Toolset Maps plugin is active, you will see a new kind of field called Address. You can use it as a custom field for your custom post types and as a term or user field.

In the WordPress editor, the field will display like this:

Address field in the WordPress admin

You can enter the address by typing it, or by clicking on the map. The Address field is saved as an address string.

You can adjust the location of the address by dragging the marker on the map preview, or by setting latitude and longitude coordinates manually. In this case, the field value will be stored as a pair – {latitude,longitude}. After fine tuning this location, you can also pick the nearest street address if you want.

The Address field will display very similarly in Toolset forms and in Field Tables.

Displaying a Map

Under Fields and Views, you will find a new section for Toolset Maps. In it, there are different fields for maps-related functionality.

You should always start by inserting the Map field.

The “map” field alone will display just the map, without any markers on it. Usually, you will include some markers on the map (see the next section). When you add markers to the map, the markers will center it.

After you insert the map, you will get a wpv-map-render shortcode, like this one:

[wpv-map-render map_id="map-5"]

Every map that you insert gets a “map ID” and in the insertion dialog, Toolset Maps plugin will automatically suggest the best Map ID option. This ID will appear in the resulting shortcode (which will display the map on the front-end). You need these map IDs, in order to display markers on maps. The marker knows which map to display on, according to the map ID.

If you don’t need any markers on the map, you should center it manually. In that case, click on the Map zoom and center tab, disable the Adjust automatically to show all markers option and enter the map coordinates.

Displaying Custom Message While the Map is Loading

Sometimes, maps take time to load and display on the page and Toolset Maps allows you to display a custom message while the map is loading.

In the Map insertion dialog, click the Map style and marker options tab and scroll down to the Text to show while the map is loading section.

Toolset Maps - Select text to display while Google Map is loading

Enter your text here and feel free to use HTML, if needed.

Selecting the map controls and type

When inserting the map, you can select its type, like the default road view and satellite view. Additionally, you can customize which map controls are displayed.

To customize these options, use the Map controls and types tab in the map insertion dialog.

Using Custom Styles for Maps

You can easily upload and use custom styles for Google Maps on your site. The styles can be created or downloaded in JSON format from the Google Styling Wizard page or websites like Snazzy Maps, and then uploaded and selected from the Toolset Maps user interface.

To learn more details about how to do this visit our page about using custom maps styles.

Map using the "Silver" custom style
Map using the “Silver” custom style

Displaying Additional Controls for Maps

Toolset allows you to display additional controls for the maps you create.

Map with additional controls

These controls provide the following functionality:

  • Focus the map on a specific marker – For example, you could make it focus on the marker with your business’ headquarters.
  • Reload a map – Map is reloaded to the original state of zoom, position, and other settings.
  • Zoom out – Map is zoomed out to the original state. Other settings, like a map type, are preserved.

You can insert these buttons using the Fields and Views button, under the Toolset Maps section. In the insertion dialog, you can select if you want them to be in a form of a button or a link. Naturally, you can also add custom styling to them.

Displaying A Street View

If you are using a Google Maps API, you can make the map display in a Street View mode.

Click the Street View tab when inserting a map and select the option to automatically open Street View. Adjust the options that appear to select which location Street View will display.

Displaying Street View when a map loads
Displaying Street View when a map loads

Once the shortcode is created you can edit it manually to include two additional parameters, heading and pitch. They allow manual tuning of the street view.

The heading parameter can have value in the range between 0 and 359. If the value is not set it is determined automatically.

The Pitch can have the value between -90 and 90.  If the value is not set it is then set to 0.

Using these two parameters, your shorcode could look something like this:

[wpv-map-render map_id="map-130" street_view="on" address="Berlin, Germany" heading="355" pitch="10"][/wpv-map-render]

Displaying Markers on Maps

Once you’ve inserted a map (using the Map field), you can display markers on it. You can display any number of markers on a map.

There are various ways of displaying markers on a map. You can:

  • Display a map with a single marker for a Content Template
  • Display a map with a list of markers, coming from a View
  • Display the current visitor’s location on the map
  • Specify if the marker source is a post, user or term field
  • Group close markers into clusters
  • Display multiple markers that appear on the same location
  • Customize the marker title and pop-up
  • Customize the marker icons

Learn all about doing this on the page about displaying markers on maps.

Filtering and Ordering Map Markers by Distance

When displaying multiple markers on a map, you can add front-end controls that allow visitors to filter the markers by distance.  It is also possible to order posts listed by a View, by their distance from a fixed location or users geolocation. You can also calculate the distance between two given points.

Learn all about doing this on the page about filtering and ordering map markers by distance.

Creating a Maps API Key

Both Google and Azure Maps require the usage of an API key, in order to work properly.

Please note that both services require you to enter a billing information before providing you with the API key. While they both include a free limit on accessing the maps API, once you cross this limit, they will charge your account automatically.

You can find the exact steps for creating a maps API key on our page about registering your site for a Maps API key.

Toolset Maps Data Caching

When you use the Toolset Maps plugin, Views will cache every address that needs to be displayed on a map. This makes the maps load quicker and helps to avoid reaching the data request limits of the Google or Azure Maps API. You can read more about this feature in a separate user guide Data Caching For Maps Addresses.

Using Address Fields in Toolset Forms

Toolset allows you to add custom Address fields to your Toolset forms. The form then allows to type in the address manually, use the user’s location, or select the location by pointing on the displayed map.

To learn more, visit our page about how Address fields work in Forms.

Limitation for Using Maps in Certain Countries

Both Google Maps and Azure Maps APIs are restricted from use in certain countries. This means that if a server is located in one of those countries, it will not be able to properly communicate with the respective maps API.

You cannot use Google Maps API in China but we have a dedicated documentation page about a workaround for this.

You cannot use Azure Maps API in Argentina, China, India, Morocco, Pakistan, and South Korea. There is currently no workaround for this. You can find more information about this in the official Azure Maps documentation.