2

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 %}
Lindsey D
  • 23,974
  • 5
  • 53
  • 110
BryanB
  • 23
  • 3

1 Answers1

2

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';
Lindsey D
  • 23,974
  • 5
  • 53
  • 110