Changing map address with jquery
<p>I currently have this code, when user clicks on the div, the map on the changes the position with the updated addresss:</p>

<pre><code>&lt;div class="row"&gt;
        &lt;div class="col-sm-12 col-lg-6"&gt;
          &lt;div class="dir"&gt;
          &lt;h3 class="title"&gt;Shopping abasto&lt;/h3&gt;
          &lt;p&gt;tel: 4676-4565&lt;/p&gt;
          &lt;p&gt;Avenida Marota&lt;/p&gt;
          &lt;div id="map" data-maps="Av. Aconquija 600, Paseo Heller, Yerba Buena, Tucuman"&gt;&lt;span class="glyphicon glyphicon-map-marker" id="dir"&gt;&lt;/span&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="dir"&gt;
          &lt;h3 class="title"&gt;Shopping abasto&lt;/h3&gt;
          &lt;p&gt;tel: 4676-4565&lt;/p&gt;
          &lt;p&gt;Avenida Marota&lt;/p&gt;
          &lt;div id="map" data-maps="Juncal 1213, Buenos Aires, Argentina"&gt;&lt;span class="glyphicon glyphicon-map-marker"&gt;&lt;/span&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="dir"&gt;
          &lt;h3 class="title"&gt;Shopping abasto&lt;/h3&gt;
          &lt;p&gt;tel: 4676-4565&lt;/p&gt;
          &lt;p&gt;Avenida Marota&lt;/p&gt;
          &lt;div id="map" data-maps="Paseo Pilar, Del Viso, Buenos Aires Province"&gt;&lt;span class="glyphicon glyphicon-map-marker"&gt;&lt;/span&gt;&lt;/div&gt;
          &lt;/div&gt;

        &lt;/div&gt;
        &lt;div class="col-sm-12 col-lg-6"&gt;
            &lt;div class="map"&gt;
                &lt;iframe width="100%" height="368" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=Buenos%20Aires%2C%20Argentina&amp;key=AIzaSyCDg1Dfoxg3cKcOsucYZQnTjpmPjbUqe2M"&gt;&lt;/iframe&gt;
            &lt;/div&gt;
            &lt;div class="col-separador-s"&gt;&lt;/div&gt;
            &lt;div class=""&gt;
            &lt;img src="http://placehold.it/727x502"&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
</code></pre>

<p>I want the map to update the position when clicking on any of the divs with the id 'map'.
The problem is that it only works with the first div, here is my script so far:</p>

<pre><code>jQuery(function(){
    jQuery('#map').on('click', function() {
        var maps = jQuery(this).data('maps');
         jQuery('.map iframe').attr('src','https://www.google.com/maps/embed/v1/place?q=' + maps + '&amp;key=AIzaSyCDg1Dfoxg3cKcOsucYZQnTjpmPjbUqe2M');
    });
});
</code></pre>