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.

Screenshot

What to do

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

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

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.

Screenshot

What to do

When 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.

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.

Screenshot

What to do

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.

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.

Screenshot

What to do

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 Map with markers and the usual output

Specify Marker Source

A marker can be a custom post, user, or term field. In the 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 the 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 View listing terms, the 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 others. This allows you, for example, to display the visitor’s location in relation to other points of interest on the map.

Important: For this feature to work, your site needs to use the secure, HTTPS protocol. This is because all modern browsers require a secure connection for getting the visitor’s location.

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.

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

Grouping Close Markers into Clusters

Important: You can use clustering with Azure Maps but advanced options are not available. You can only turn this option on or off.

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.

By default, clusters are displayed as colored circles containing a number at their center. This number as well as their size represents 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 content.

Screenshot

What to do

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.

Displaying multiple markers that appear on the same location

Important: The spiderfying feature is not available when using Azure Maps.

Sometimes, you need to display multiple markers that are in the same location. For example, multiple apartments could be present at 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.

Important: Clusterfying and spiderfying options can easily be combined on the same map. Use the clusterfying options to find the best display options for both clusters and markers with the same location.

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

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.