Display Multiple Markers on Map Using Toolset Custom Fields

I really love using Toolset. It makes it easy to create really dynamic function on your site without knowing PHP. One really nice add-on they came out with a couple years ago is the Maps plugin.

So, here’s what I needed to do:

I had a list of restaurants and I wanted to display all of them on one map.

Here’s how I did it:

1) You are going to need the paid Toolset plugins including Types (free), Views and Maps
2) Create a new Post Type called “Wine & Dine” (or whatever your item is)
3) Create Post Fields for that item that includes the Google Maps address field.


Make sure to select your new custom Post Type under “Where to include this Field Group.

4) Add new Wine & Dine entries (or whatever your thing is) and fill out your Google Maps field. A map will come up to make sure you have the marker in the right place.

5) Next you need to create a View to show the results of all the restaurants you have entered. In your left-hand menu on the dashboard, go to Toolset > Views > Add New.
a) Select the Post Types that this View will display. In my case, it’s Wine & Dine.
b) Choose how you want to order your results. I chose Post Title so my results will be alphabetical.
c) Note that if you make changes to some things, Views might not let you save your changes. If you want to save the changes you’ve made, go to one of the text editor boxes and just make a space. The blue “Save all sections at once” button with then be available. (Weird quirk.)
d) You will then need to scroll down to your Loop Output Editor and choose the Fields and Views button to insert the map field. It will automatically give your new map a number.
Place your cursor outside the View loop in the Loop Output. Click on the Fields and Views button › find the Google Map section › click on the Map item.

e) Next you will insert your markers. Use the Fields and Views button again, and choose Marker, which is right next to Map.
Place your cursor inside the View loop in the Loop Output. Click again on the Fields and Views button › find the Google Map section › click on the Marker item. Now, fill the marker settings:
Map ID: same as the Map ID set for your Map
Marker address comes from: your Google Maps field


f) Now save your view and insert it into a page to make sure it’s working. It should look something like this:

Adding a Filter by Distance option

Toolset make filtering by distance super easy with their Filter Editor. Note- If you don’t see the filter editor, be sure to check the screen options at the top of the page and make sure it is selected.
1) Scroll down to Filter Editor
2) Click on New filter and select distance. This is what it should look like:

3) Note – by default the styling is really ugly. Use this CSS in the CSS editor to make it look a little nicer:

.form-group > label {
    display: block;
}
  
.form-control.js-toolset-maps-distance-value.js-wpv-filter-trigger-delayed {
    display: inline-block;
    width: 10%;
}
  
.js-toolset-maps-distance-unit.form-control.js-wpv-filter-trigger {
    display: inline-block;
    width: 10%;
}
  
.form-control.js-toolset-maps-distance-center.js-wpv-filter-trigger {
    display: inline-block;
    width: 40%;
}

Map with filter will now look more like this:

Extra Credit: Customize map popups

If you want to make the markers more helpful, be sure to customize the marker data.

This would be the code inserted between the tags:

[wpv-map-marker map_id="map-4" marker_id="marker-[wpv-post-id]" marker_title="[wpv-post-title]" marker_field="wpcf-street-address"][wpv-post-link]
[types field='street-address'][/types]
[types field='city-state-zip'][/types][/wpv-map-marker]

This is what the finished product will look like. You can see that the title is a link so the viewer can get more info about the place.

You can find more details on how to use Toolset Maps here: https://wp-types.com/documentation/user-guides/display-on-google-maps/displaying-markers-on-google-maps/