Different icons for different marker types

Smart Map has been replaced by Google Maps

Please install the Google Maps plugin instead. ➡️

As of February 2021, the Smart Map plugin has been completely rebuilt and replaced with the new Google Maps plugin for Craft CMS. For more details, see here...

---

The documentation below is for historical reference only.

Occasionally, you want to display different marker icons based on some distinction between marker types.

You can use the following pseudo-code as a basis for performing that task. It will need to be customized to suit your own unique purposes.

{# Render map normally #}
{{ craft.smartMap.map(locations, options) }}

{# Loop through location entries #}
{% for entry in locations %}

    {#
      Perform custom logic
      to determine which icon
      will be assigned to each entry
    #}
    {% switch entry.markerType %}
        {% case 'exampleA' %}
            {% set icon = 'path/to/icon-A.jpg' %}
        {% case 'exampleB' %}
            {% set icon = 'path/to/icon-B.jpg' %}
        {% default %}
            {% set icon = 'path/to/default-icon.jpg' %}
    {% endswitch %}

    {# JS: Change marker icon #}
    {% js %}

        var markerId = 'smartmap-mapcanvas-1.{{ entry.id }}.myAddressField';
        smartMap.marker[markerId].setOptions({'icon': '{{ icon }}'});

    {% endjs %}

{% endfor %}

JavaScript "markerId"

This example makes some assumptions about markerId, which may vary in your actual code:

• smartmap-mapcanvas-1 is assumed to be the id of your map. If you haven't specified it elsewhere, this will be the default map name.
• Change myAddressField to be the actual field handle of your Address field.