# Markup location

**URL:** <https://community.hubspot.com/t/markup-location/94410>\
**Category:** CMS Development\
**Tags:** design-manager\
**Created:** [November 20, 2023, 5:23pm UTC](https://community.hubspot.com/t/markup-location/94410 "2023-11-20T17:23:52Z")\
**Posts on this page:** 3\
**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:** [November 20, 2023, 5:23pm UTC](https://community.hubspot.com/t/markup-location/94410/1 "2023-11-20T17:23:52Z")

</div>

How to markup adress card to map with repeater field.

---

<div class="post-metadata">

**Author:** ![Berangere](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/berangere/32/220784_2.png) [@Berangere](https://community.hubspot.com/u/Berangere)\
**Post date:** [November 22, 2023, 9:38am UTC](https://community.hubspot.com/t/markup-location/94410/2 "2023-11-22T09:38:46Z")

</div>

Hi @MHussain8, I hope that you are well!  
Thanks for reaching out to the Community!  
I am not sure to understand what you are looking for, could you please give more details please?  
The more info, screenshots (without sensitive/confidential information), and details you can provide, the better the Community can assist.  
I’d like to invite a couple of subject matter experts to this conversation: Hi @LaurenRyan, @mangelet and @Josh do you have tips to help @MHussain8, please?  
**Also, if anybody else has anything to add and/or share, please feel free to join in the conversation 🙂**  
Thanks a lot for your help ❤ and have a great day!  
Best,  
Bérangère

---

<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:** [November 22, 2023, 4:21pm UTC](https://community.hubspot.com/t/markup-location/94410/3 "2023-11-22T16:21:20Z")

</div>

```lia-code-sample
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d14160407.488009982!2d58.3559282380058!3d29.946917979856096!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x38db52d2f8fd751f%3A0x46b7a1f7e614925c!2sPakistan!5e0!3m2!1sen!2s!4v1700235148453!5m2!1sen!2s" width="980" height="535" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
<!-- Start card -->
<div class="location">
 <h1>Address card</h1>
 </div>

 {% for item in module.field_group %}
<div id="address-card" style="background-color:{{ item.color_field.color }}; border-color:{{ item.color_field.color }};">
 <div class="card-header"> 
 <h3 id="card-title">{% inline_text field="name_field" value="{{ item.name_field }}" %}</h3>
 </div>

 <div class="card-body" style="padding-top:1px;">
 <p id="card-text-address" style="color:{{ item.color_field.color }};">Address:</p>
 <h4>{% inline_text field="address_field" value="{{ item.address_field }}"%}</h4>

 <p class="card-text-phone" style="color:{{ item.color_field.color }};">Phone:</p>
 <h4>{% inline_text field="phone_number_field" value="{{ item.phone_number_field }}"%}</h4>
 </div>
</div>
 {% endfor%} 

```

**My task:**

Automatic generation of address markup based on the information provided in the address cards.  
The map’s markup name should be derived from the heading of the address card.

**…**

Now, I have shown the map and the address card has also been created. Now the address card configuration is automatically uploaded to the map. All that’s left is what needs help.