Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-05-04T17:20:07.193Z
Answers.LastActivityDate: 2015-05-04T17:59:32.120Z
Answers.LastEditDate: 2015-05-04T17:59:32.120Z
Answers.UserDisplayName: Brad Bell
Body: <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>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2015-05-04T04:52:51.113Z
Comments.Text: Are you getting any errors? What's happening?
Comments.UserDisplayName: Brad Bell
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2015-05-04T05:14:18.387Z
Comments.Text: I can't get the loop index to work. ie concatenate the 'map' and the loop index
Comments.UserDisplayName: Niall Thompson
Tags: <templating>
Title: Initiate Multiple Google Maps Instances
ThreadText: # 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() %}
      <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 %}
  
  ```
  
  **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 %}
      <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 %}
  
  ```
  
  
  ---
  
  