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
    May 4 '15 at 4:52
  • I can't get the loop index to work. ie concatenate the 'map' and the loop index May 4 '15 at 5:14
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, privacy policy and cookie policy

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