Hello everyone,
I’ve been working on a website for a construction firm, and I’m currently trying to incorporate a map into every CMS entry within the collection. To achieve this, I’ve added latitude and longitude fields, utilized the API, and designated a div for the map to appear in. Everything seemed to be set up correctly, but upon publishing and navigating to the website, I noticed that every listing in the collection displays the same map. It appears that the CMS data isn’t being retrieved properly.
Here’s the embed code I’m using:
<script async defer src="https://maps.googleapis.com/maps/api/js?key=APIHERE&callback=initialize"></script>
<!-- Initialization Script -->
<script>
function initialize() {
var geocoder = new google.maps.Geocoder();
var mapContainer = document.getElementById("map-container");
if (!mapContainer) {
console.error('Map container not found');
return;
}
// Retrieve the CMS data
var locationName = "{{wf {"path":"nombre-del-proyecto","type":"PlainText"\} }}"; // Location name or address
var latitude = parseFloat("{{wf {"path":"latitude","type":"PlainText"\} }}");
var longitude = parseFloat("{{wf {"path":"longitude","type":"PlainText"\} }}");
console.log('Location Name:', locationName);
console.log('Latitude:', latitude);
console.log('Longitude:', longitude);
// Default map options
var mapOptions = {
zoom: 17,
center: new google.maps.LatLng(-33.4489, -70.6693), // Default to Santiago, Chile
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(mapContainer, mapOptions);
// Check if latitude and longitude are valid
if (!isNaN(latitude) && !isNaN(longitude)) {
var position = new google.maps.LatLng(latitude, longitude);
placeMarker(map, position, locationName);
} else if (locationName) {
geocodeAddress(geocoder, map, locationName);
} else {
console.error('No valid location data provided');
}
}
function geocodeAddress(geocoder, map, address) {
geocoder.geocode({ 'address': address }, function(results, status) {
if (status === 'OK') {
var position = results[0].geometry.location;
placeMarker(map, position, address);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
function placeMarker(map, position, locationName) {
map.setCenter(position);
var marker = new google.maps.Marker({
map: map,
position: position,
icon: {
url: 'https://uploads-ssl.webflow.com/6555276feb3575fd21fad01f/6658e8db90dd18e237eca09e_maps-flags_447031.png',
scaledSize: new google.maps.Size(36, 36) // Adjust the size here
}
});
var infowindow = new google.maps.InfoWindow({
content: '<p><b>' + locationName + '</b></p>'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
</script>
On the Retrieve the CMS data field I just link the CMS collection Field with the same name. latitude, longitude and nombre.
I would appreciate any insights or suggestions on how to troubleshoot this issue. Thanks in advance for your help!
Here is my site: proyect 1 y 2, showing the same map and location.
