Webflow sync, pageviews & more.
NEW
Answers

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?

If you're trying to display items from your CMS in an Embedded Google Maps using Webflow, you'll need to use some custom code to achieve this. Here's a step-by-step guide on how to solve the issue you're facing:

1. Make sure you have correctly embedded the Google Maps API on your Webflow site. You can do this by adding the API script in the custom code section of your site settings or by using an embed element on the page where you want the map to appear.

2. Create a CMS Collection to store the location data for your markers. In your CMS Collection, include fields for latitude (`lat`) and longitude (`lng`), as well as any other relevant information you want to display on the map, such as the marker title, description, or image.

3. In your Webflow Designer, add an embed element to the page where you want the map to appear. You can position and style it as needed.

4. In the embed element, you'll need to write some custom code to fetch the data from your CMS Collection and insert the markers onto the map. Here's an example of how you can do this:

```html


```

In the above code, make sure to replace `/your-cms-collection` with the correct API URL for your CMS collection.

5. Save the changes to your Webflow project and publish the site to see the markers displayed on the map.

By following these steps, you should be able to fetch the data from your CMS Collection and display it as markers on the Google Map embedded in your Webflow site.

Rate this answer

Other Webflow Questions