<p>Something like this?</p>

<pre><code>{% for marker in event.eventMap.getMarkers() %}
    {% set mapId = 'map' ~ loop.index %}
    &lt;div class="google-maps"&gt;
        {% 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) }}

    &lt;/div&gt;
{% endfor %}
</code></pre>

CC BY-SA 3.0
2015-05-04T17:20:07.193Z
2015-05-04T17:59:32.120Z
2015-05-04T17:59:32.120Z
Brad Bell
<p>I am trying to initiate multiple Google Map instances on a page.</p>

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

<pre><code>{% for marker in event.eventMap.getMarkers() %}
    &lt;div class="google-maps"&gt;
        {% 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) }}

    &lt;/div&gt;
{% endfor %}
</code></pre>

CC BY-SA 3.0
2015-05-04T04:52:51.113Z
Are you getting any errors? What's happening?
Brad Bell
CC BY-SA 3.0
2015-05-04T05:14:18.387Z
I can't get the loop index to work. ie concatenate the 'map' and the loop index
Niall Thompson
<templating>
Initiate Multiple Google Maps Instances
# Initiate Multiple Google Maps Instances

(Asked by: username_0 on 2015-05-03)

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() %}
    
        {% 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) }}

    
{% endfor %}

**Tags:** templating
> **Comments:**
> **username_1**: Are you getting any errors? What's happening?  
> **username_0**: I can't get the loop index to work. ie concatenate the 'map' and the loop index  

---

## 1 answers

### Answer by username_1 on 2015-05-04. Score: 3

Something like this?
{% for marker in event.eventMap.getMarkers() %}
    {% set mapId = 'map' ~ loop.index %}
    
        {% 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) }}

    
{% endfor %}


---

