How to use an Image field as a map marker

In Advanced Views Lite, Layouts allow you to display map fields out of the box.

In Advanced Views Pro, you can customize the appearance of map markers, including using a custom marker image.

In some cases, however, you may want to display the same map on different pages while using a different marker image for each one. This can be achieved by using the value of an Image field as the marker icon, allowing content editors to control the marker image for each map individually.

1. Step-by-step guide

Select the Map field from the Field list, and also assign the map marker Image field you'd like to use.

Publish or Update your Layout to Save.

Switch to the Template tab, copy and paste the Default Template code into the Custom Template field.

In the Custom Template field copy the {{ map_marker.value }} from the src attribute of the Image field.

Paste it, replacing the data-icon="{{ map.marker_icon }}" attribute of the Map field.

Then delete the lines for the map marker Image field markup.

Save or update to publish your Layout.