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.