created module and don't show map

Developer Support CMS Development
1 
<div class="location">
 <h1>Locations</h1>
 </div>
 <script src="https://maps.googleapis.com/maps/api/js?key=NOPE&libraries=places"></script>
 {% 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 id="map"></div>
 </div>

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

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

{% require_js %}
 {% for item in module.field_group %}
 <script>
 // Get the card title and map elements
 const titleInput = document.getElementById('card-title');
 const addressCard = document.getElementById('card-text-address');
 const mapElement = document.getElementById('map');

 // Add an event listener to the title input field
 titleInput.addEventListener('input', handleTitleChange);

 function handleTitleChange() {
 const title = titleInput.value;
 const address = addressCard.innerText;

 // Check if the title matches a specific condition to display the map
 if (title !== 'Specific Title') {
 mapElement.style.display = 'none'; // Hide the map element
 return; // Do not proceed with displaying the map
 }

 // Make a request to the geocoding API to get the coordinates
 fetch(`https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURIComponent(address)}`)
 .then(response => response.json())
 .then(data => {
 const { lat, lng } = data.results[0].geometry.location;

 // Display the map
 const map = new google.maps.Map(document.getElementById('map'), {
 center: { lat, lng },
 zoom: 10
 });

 // Add a marker to the map
 const marker = new google.maps.Marker({
 position: { lat, lng },
 map: map,
 title: title
 });
 })
 .catch(error => {
 console.error('Error:', error);
 });
 }
 </script>
 {% endfor %}
{% end_require_js %}

I will create an address card module in which repeater field is used. Now, I want whatever i write in the title field in adress card to be automatically marked up in the map.
And the problem is also coming that the map is not showing with business card module.

2

Hey, @MHussain8 :waving_hand: You exposed your private key. I suggest you rotate that to be safe. I edited your post and replaced it with a placeholder.

One thing I noticed in your example – you have a loop that creates multiple elements with the same IDs. Try using classes or create dynamic IDs using the loop index.

Have fun building! — Jaycee