1

I am trying to initiate multiple Google Map instances on a page.

I need to set a dynamic ID for each one. I've tried doing it with loop.index but no joy.

{% for marker in event.eventMap.getMarkers() %}
    <div class="google-maps">
        {% set options = {
            id: 'map',
            width: '100%',
            height: '150px',
            options: {
                disableDoubleClickZoom: true,
                maxZoom: 15,
                minZoom: 5,
                scrollwheel: false
            }
        } %}

        {{ craft.googleMaps.map() }}

        {{ craft.googleMaps.data('map', event.eventMap) }}

    </div>
{% endfor %}
2
  • Are you getting any errors? What's happening?
    – Brad Bell
    Commented May 4, 2015 at 4:52
  • I can't get the loop index to work. ie concatenate the 'map' and the loop index Commented May 4, 2015 at 5:14

1 Answer 1

3

Something like this?

{% for marker in event.eventMap.getMarkers() %}
    {% set mapId = 'map' ~ loop.index %}
    <div class="google-maps">
        {% set options = {
            id: mapId,
            width: '100%',
            height: '150px',
            options: {
                disableDoubleClickZoom: true,
                maxZoom: 15,
                minZoom: 5,
                scrollwheel: false
            }
        } %}

        {{ craft.googleMaps.map() }}

        {{ craft.googleMaps.data(mapId, event.eventMap) }}

    </div>
{% endfor %}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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