How can I display items from CMS in an Embedded Google Maps using Webflow? I have embedded the Google Maps API and specified the location of the markers using custom code, but it is not taking the lat and lng variables from the CMS items. Any ideas on how to fix this?
- Ensure CMS fields for latitude and longitude are linked to the map component correctly using Webflow's dynamic embed feature.
- Include the Google Maps script correctly, verify latitude and longitude references, and check for syntax errors.
- Publish the site to test changes and resolve JavaScript errors by confirming API key implementation and data format.
Integrating CMS items into a Google Maps embed in Webflow can be tricky if the map does not display custom marker positions correctly. Here’s how to ensure the lat and lng variables from your Webflow CMS items are working properly with the Google Maps API.
1. Verify CMS Fields
- Ensure your CMS Collection contains fields for both latitude (lat) and longitude (lng).
- Check that these fields are correctly linked in your Webflow designer to the map component for dynamic use.
2. Use Custom Code for Google Maps
- Within the embed code area, ensure you are referencing your CMS fields correctly using Webflow’s dynamic embed feature.
- Use Webflow’s dynamic field notation, such as
{{wf {"path": "lat"} }}for latitude and{{wf {"path": "lng"} }}for longitude.
3. Implement the Correct JavaScript Code
- Include the Google Maps script with API key in the correct format.
- Ensure your script correctly initializes Google Maps and uses CMS data resembling:
```javascript
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng({{wf {"path": "lat"} }}, {{wf {"path": "lng"} }})
});
new google.maps.Marker({
position: new google.maps.LatLng({{wf {"path": "lat"} }}, {{wf {"path": "lng"} }}),
map: map
});
```
- Ensure no syntax errors are present in the custom script.
4. Test on Published Site
- Publish your site to see the changes in effect, as Webflow’s Designer preview might not exhibit dynamic coding accurately.
- Check the console for any JavaScript errors which might indicate what is preventing the correct functionality of your code.
5. Troubleshoot Common Errors
- Make sure your API key is correctly implemented and has the necessary permissions (e.g., Maps JavaScript API enabled).
- Confirm the CMS data format in Webflow matches what your script is expecting (correct decimal format for co-ordinates).
Summary
To display CMS item locations on a Google Map in Webflow, ensure that CMS fields for latitude and longitude are correctly linked to your custom code within Webflow’s dynamic embed feature, and verify your script is free from syntax errors. Testing your script on a published site and verifying API keys and permissions can help resolve issues.