Don't show google map with business card title

Developer Support CMS Development
1 
<div class="location">
 <h1>Locations</h1>
 </div>
{% require_head %}
 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBJjMwFcFnPunS0vYdzqFOZZhmYFQ-FtWQ&libraries=places"></script>
{% end_require_head %}
 {% 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>
// Assuming you have an input field for the title and address card module
const titleInput = document.getElementById('card-title');
const addressCard = document.getElementById('card-text-address');

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

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

 // 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 %}
2

Hi @MHussain8

Here’s an updated script that includes conditional checks.

{% 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 %}

Hope this will helps you out. Please mark it as Solution Accepted & Upvote to help other Community member.
Thanks!

3

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.