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?
TL;DR
- Ensure CMS collection includes latitude and longitude fields with valid values.
- Use custom attributes like
data-latanddata-lngto retrieve CMS values via JavaScript. - Check for console errors, ensure script runs after DOM loads, and verify Google Maps API key and billing setup.
- Publish site to confirm changes and test for CORS issues.
When displaying items from a Webflow CMS in an Embedded Google Maps using the Google Maps API, you need to ensure the custom code correctly retrieves latitude and longitude values from the CMS. Here's a step-by-step guide to troubleshoot and fix this issue.
1. Ensure CMS Fields Are Set Up Correctly
- Check CMS Collection: Ensure the CMS collection includes fields for both latitude and longitude.
- Data Check: Verify that all items in the collection have valid latitude and longitude values.
2. Modify Custom Code to Retrieve CMS Values
- Custom Attributes: Make sure your elements have custom attributes set up to pull values from the CMS. You can use attributes like
data-latanddata-lngon elements within the CMS item. - Embed Code Block: Place an Embed element within the CMS collection list to include JavaScript that reads these attributes.
document.querySelectorAll('.cms-item').forEach(item => {
const lat = item.getAttribute('data-lat');
const lng = item.getAttribute('data-lng');
// Use lat and lng with Google Maps API to set markers
});
3. Debug Script Loading
- Console Errors: Check for errors in your browser's developer console to ensure the code runs without issues.
- Order of Script Execution: Confirm that the script referencing CMS fields is executed after the DOM has loaded. You can wrap the script in a
DOMContentLoadedevent listener.
4. Google Maps API Keys and Permissions
- API Key: Ensure the Google Maps API key is correctly implemented and has permissions to access required maps and services.
- Billing Account: Verify that your Google Cloud account is correctly set up with billing to use the Maps API.
5. Testing on Published Site
- Publish Site: Changes might not reflect until the site is published. Publish your site and test on the live domain.
- Cross-Origin Resource Sharing (CORS): Ensure there are no CORS issues restricting data retrieval from the CMS.
Summary
To fix the issue of CMS items not properly displaying in an Embedded Google Maps, verify CMS field setup, ensure custom code retrieves values using attributes, and check for script execution errors. Make sure your API key is valid and the site is published for changes to take effect.