Did I integrate correctly?
Hi @MHussain8,
to implement the map you’ll need to add a div with at least the id “map”
<div id="map"></div>
and also set some sort of width and height. Otherwise the div won’t show up.
Also don’t implement the script into your for-loop. This will load the script as many times as you have elements and this will slow down your page extremly.
try it like this:
{% require_head %}
<script src="https://maps.googleapis.com...">
{% end_require_head %}
<div class="container">
<div class="card-wrapper">
{% for item in module.field_group %}
<div class="card-header">
<div class="card-title">{{item.name_field}}</div> {# tipp: you don't need the whole inline_text field... information #}
</div>
<div class="card-body">
<p class="card-text-adress">Address:...</p>
<div id="map"></div>
</div>
{% endfor %}
</div>
</div>
{% require_js %}
{% for item in module.field_group %}
<script>
function initMap(){
...
}
</script>
{% end_require_js %}
But keep in mind that you’ll need the places API and Geocoding (either direct or reverse - it depends on what you want/need)
Also you’ll need to transform the address to lat/lon coordinates and pass it into the function.
best,
Anton