Add more than one map in a same page using custom module in hubspot.

Html
==================================


<div class="offices-group">
<h4 class="offices-heading">{{ module.heading }}</h4>
  <div class="offices-wrapper">
    {% for item in module.office_item %}
    <div class="office-col">
      <div class="office-inner">
        <h5 class="office-title">{{ item.location }}</h5>
        <p class="office-address">{{ item.address }}</p>
        <div id="map-aux{{ loop.index }}" style="height: 325px; width: 100%;"></div>
      </div>
    </div>
    {% endfor %}
  </div>
</div>

----------------------------------------------------------

JS
==================================
<script src="map1.js"></script>
<script>
  {% for item in module.office_item %}
function initMap{{ loop.index }}() {
 var map2{{ loop.index }} = new google.maps.Map(document.getElementById('map-aux{{ loop.index }}'), {
   zoom:  {{ item.map_zoom }} ,
   center: {lat:  {{item.map_latitude}} , lng: {{item.map_longitude}} }
 });
 var marker2{{ loop.index }} = new google.maps.Marker({
         position: {lat:  {{item.map_latitude}} , lng: {{item.map_longitude}} },
         map: map2{{ loop.index }}
       });
 //var geocoder2{{ loop.index }} = new google.maps.Geocoder;

<!--if u dont need to display address on map | remove this | iff needed then change address and link-->

//  var infowindow2 = new google.maps.InfoWindow({
//       content: '<span style="color:#111;">{{item.address}}</span>'
//   });

<!-- Till here-->

//  infowindow2.open(map2{{ loop.index }},marker2{{ loop.index }});

//   google.maps.event.addListener(marker2{{ loop.index }}, 'click', function() {
//       infowindow2.open(map2{{ loop.index }},marker2{{ loop.index }});
//   });
}
$(window).load(function(){
initMap{{ loop.index }}();
});
{% endfor %}
</script>

----------------------------------------------------------

click below for download google map plugin.

Download Here