CMS retrieving Google maps API help

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 {&quot;path&quot;:&quot;nombre-del-proyecto&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}"; // Location name or address
        var latitude = parseFloat("{{wf {&quot;path&quot;:&quot;latitude&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}");
        var longitude = parseFloat("{{wf {&quot;path&quot;:&quot;longitude&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}");

        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.