# Integration of map

**URL:** <https://community.hubspot.com/t/integration-of-map/92811>\
**Category:** CMS Development\
**Tags:** design-manager\
**Created:** [October 29, 2023, 5:45pm UTC](https://community.hubspot.com/t/integration-of-map/92811 "2023-10-29T17:45:04Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![MHussain8](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mhussain8/32/198394_2.png) [@MHussain8](https://community.hubspot.com/u/MHussain8)\
**Post date:** [October 29, 2023, 5:45pm UTC](https://community.hubspot.com/t/integration-of-map/92811/1 "2023-10-29T17:45:04Z")

</div>

![Screenshot_20231029-224229.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/1/7/1779fa0c68db97c8be95442e2f85324d059557c2.jpeg)

Did I integrate correctly?

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [October 30, 2023, 9:59pm UTC](https://community.hubspot.com/t/integration-of-map/92811/2 "2023-10-30T21:59:55Z")

</div>

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:

```lia-code-sample
{% 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](https://developers.google.com/maps/documentation/geocoding/overview?hl=en) (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