When you insert a Toolset map, you need to display markers on it. This page explains how to do this for different use cases.

Marker Title and Pop-up

You can add a title and an information box (popup) to markers. This works a bit different for Google Maps than for Azure Maps:

  • With Google Maps, the title displays when you hover over a marker and the information box displays when you click on a marker.
  • With Azure Maps, the title is always displayed.
ScreenshotWhat to do

Entering the title and popup content for a marker
Entering the title and popup content for a marker

When you insert the marker, go to the Marker data tab.

Inserting fields to the title and popup
Inserting fields to the title and popup

Enter text for the marker title and popup. You can also use field shortcodes for the title and popup. To include fields in the title and popup, return to the editor and add them from the Fields and Views button.

The title attribute can only include plain texts (fields are OK, as long as they don’t produce HTML output). The popup content displays between the [wpv-map-marker…] and [/wpv-map-marker] shortcodes. It can include HTML.

The marker popup on the front-end
The marker popup on the front-end

Customizing the Marker Icons

You can choose between a number of available marker icons or upload your own. We recommend using transparent PNG or SVG format so the map is visible underneath the marker icon. We also recommend using icons that have dimensions of 32 by 32 pixels. This is also the dimension to which we automatically scale the SVG markers. We don’t scale other image formats so if you use them, upload them in the exact size as you want them to appear on the map.

ScreenshotWhat to do
Choosing the marker iconWhen you insert a marker, go to the Marker icons tab.

By default, the same graphics is used for both “normal” and “hover” states of the marker. You can choose a different icon for the hover state.

Markers with custom icons

Displaying a Map with a Single Marker for a Content Template

Let’s look at an example. A “property” item would typically have an “address” field. When you display a single property, you almost certainly want to include a Map with the property on it.

Follow the steps listed above to add an “address” field to your content.

When you edit the Content Template, you first need to add a map to it (see the previous section). Next, you add a marker to that map.

ScreenshotWhat to do

Inserting a marker for a map
Inserting a marker for a map

Place the cursor below the wpv-map-render shortcode and click again on Fields and Views. Look for the Toolset Maps section and insert the Marker field.

Selecting the source of the marker from a custom field
Selecting the source of the marker from a custom field

When you insert the marker, indicate that the marker comes from a Toolset Maps field and select the custom field that you’ve used to save the address.

After you insert the marker, the page source should look like this:

[wpv-map-render map_id="map-6"][/wpv-map-render]
[wpv-map-marker map_id="map-6" marker_id="marker-6" marker_field="wpcf-property-address"][/wpv-map-marker]

You can see first the Map field and then the Marker field. The map_id should be the same for both so that the marker will display on the correct map.

Each marker has an ID (the marker_id attribute). If we want to reference that marker, use its ID. You will need it for operations that work on specific markers, such as to center the map on a marker.

Displaying a Map with a List of Markers, Coming From a View

When you want to display a list of addresses (markers) on a map, you need to use a View.

First, make sure that the content includes an “address” custom field.

Next, create the View that will display that content (or edit an existing View).

We want the View to display one map and multiple markers on it (one marker per item in the View loop). So, we will insert the Map field outside of the View loop and the marker inside the View loop.

The View Loop needs to be created already, in order to add the map to it. If you haven’t yet created the View Loop, use the Loop Wizard. A View can display the results both on a map and as the normal View output. If you only want to display the View results on a map, still use the Loop Wizard, insert any field and delete it from the Loop Output area later.

ScreenshotWhat to do

Loop Output section in View with map and marker fields
Loop Output section in View with map and marker fields

Go to the Loop Output Editor section of the View. Find the <!– wpv-loop-start –> tag and insert the Map field before it. Alternatively, you can insert the Map field after the View loop. Just make sure to display it outside of the loop, so that it displays once for the View.

Find the <wpv-loop> tag and insert the Marker field after it. When you insert the marker, be sure to connect it with the right map and field to display.

The map displays together with the normal View output, as displayed in the following image.

A View producing a Google Map with markers and the usual output
A View producing a Map with markers and the usual output

Specify Marker Source

A marker can be a custom post, user or term field. In case of using markers in a View, the source of these fields is the current post, user or term respectively in the loop. To define a custom source, you can also set a specific post, user or term ID using the id parameter of the wpv-map-marker shortcode.

In case of post fields, you can also use the following placeholders:

  • $parent for the native parent post
  • $post_type_slug for the Types parent post

When the marker from a term field is outside a View listing terms, term ID field is mandatory in order to display a valid marker.

Displaying Current Visitor’s Location on the Map

Toolset Maps allows you to display the marker showing the current visitor’s location on the map. Naturally, you can combine this marker with other. This allows you, for example, to display the visitor’s location in relation to other points of interest on the map.

Inserting a marker that displays the current visitor’s location is the same as for any other. In the Marker insertion dialog, simply scroll down to the Marker address comes from section.

Displaying a marker with current visitor's location

Here, click The location of the current visitor option and select the map rendering option.

Grouping Close Markers into Clusters

With Toolset Maps, you can group close markers on a map into clusters. Clusters are represented by a single, cluster icon on a map, and when you zoom the map closer, individual marker icons are shown on the map.

Following image shows a front-end example of a Google Map with some clusters on it.

Toolset Maps - Clusters Example

By default, clusters are displayed as colored circles containing a number at their center. This number as well as their size, represent the number of markers they contain: a blue circle for less than 10 markers, a yellow circle for 10 to 99 markers, and so on.

You can enable clustering for any map, while you are inserting it into your contents.

ScreenshotWhat to do

Dialog options for marker clusters
Dialog options for marker clusters

In the Map insertion dialog, go to the Marker clustering & spiderfying tab and turn the clustering on. The additional set of clustering options will appear and you can choose their respective values.

Toolset Maps plugin allows you to further customize the clustering options, for example, change the cluster icons, use different numbers of markers per clusters, etc. This involves a bit of custom JavaScript coding and you can learn how to do it in our separate user guide: Customizing Cluster Markers With Javascript Functions.

Displaying multiple markers that appear on the same location

Sometimes, you need to display multiple markers that are in the same location. For example, multiple apartments could be present on the same address.

To avoid issues with overlapping markers, Toolset comes with a “spiderfy” library which can be used when displaying a map. It visually leaves markers overlapped, but when clicked, they open into a web of separate markers. Once displayed in a web, all markers are accessible, including their hover texts and information pop-ups.

Map markers displayed using the spiderfy option

You can enable the spiderfying option in the Marker clustering & spiderfying tab of the map insertion dialog.

Options for spiderfying the markers

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.