I'm having some trouble setting different markers using the smart map plugin and was hoping someone might be able to point me in a direction I might not see.

The different locations are are set through a matrix field with two different block types; one that should return a blue marker and one that should return a green. I've been following the docs at: https://plugins.doublesecretagency.com/smart-map/different-icons-for-different-marker-types/ but have still been getting a javascript error preventing it to be rendered.

The javascript error is "uncaught TypeError: Cannot read property 'setOptions' of undefined. I'm sure this is because the markerId variable isn't getting the address from the matrix field.

Any help or insight would be greatly appreciated, thanks!

 {% set locations = entry.filmMap %}
{% set mapOptions = {
    height: 580,
    zoom: 10,
    draggable: true,
    markerInfo: '_includes/mapInfoBubble',
    markerOptions: {
    icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
} %}

{{ craft.smartMap.map(locations, mapOptions) }}

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

  {% switch item.type %}
    {% case 'filmSites' %}
      {% set icon = '/assets/src/images/blue-marker.png' %}
    {% case 'castingCalls' %}
      {% set icon = '/assets/src/images/green-marker.png' %}
    {% default %}
      {% set icon = 'http://maps.google.com/mapfiles/ms/icons/green-dot.png' %}
  {% endswitch %}

  {% set address = item.address %}

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

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

  {% endincludejs %}

{% endfor %}
  • I'm impressed... I only added that page to the documentation 2 days ago. ;)
    – Lindsey D
    Jan 4 '16 at 21:05

I believe the problem is in this line of code:

var markerId = 'smartmap-mapcanvas-1.{{ entry.id }}.address';

Because you're generating markers from matrix blocks, you'll need to use the block ID instead of the entry ID. In your case, that may looks something like this:

var markerId = 'smartmap-mapcanvas-1.{{ item.id }}.address';
  • This was indeed the source of my problem, thank you very much!
    – BryanB
    Jan 4 '16 at 21:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.