How can I load an iframe (Google Map) from a cms collection in Webflow?

Published on

September 22, 2023

Note

CommunityFAQ is not affiliated with Webflow. Click here if you'd like to visit Webflow's help resources.

To load an iframe, such as a Google Map, from a CMS collection in Webflow, you can follow these steps:

Create a CMS Collection: First, create a new CMS Collection in Webflow or use an existing one. Make sure your Collection has a Text Field that will contain the embed code for the iframe.
Add an Embed Field to the Collection: In the Collection settings, create a new field of type "Embed". This field will be used to store the embed code for the Google Map iframe.
Populate the CMS Collection: Go to the Collection Editor and add the embed code for each Google Map to the Embed Field for each item in the collection. Make sure to generate the embed code in Google Maps by finding the location you want to display and clicking on the "Share" button.
Style the Collection List: On your Webflow project, insert a Collection List on the page where you want the Google Maps to appear. Connect it to the CMS Collection you created in Step 1. Next, style the Collection List as desired, including any necessary formatting for the Google Maps section.
Add an Embed element: Inside the Collection List item, add an Embed element. This element will be used to display the Google Map by loading the iframe code stored in the CMS Collection.
Connect the Embed element: In the Embed element settings, click on the "Bind to Field" button. Choose the Embed Field from the CMS Collection that contains the embed code for the Google Map.
Style the Embed element: Add necessary styling to the Embed element to control the size, position, and appearance of the Google Map on your website.
Preview and Publish: Preview your site to see how the Google Maps are loading from the CMS Collection. Once you are satisfied, publish your site for the changes to be visible on the live site.

By following these steps, you will be able to load an iframe, such as a Google Map, from a CMS collection in Webflow. This allows you to easily manage and update your Google Maps directly from the Webflow CMS without the need to update individual pages.

Additional Questions

How do I create a CMS Collection in Webflow?
Can I use custom code in Webflow to enhance the functionality of my website?
How can I integrate third-party services like Google Maps into my Webflow project?

What are some recommendations for designing a newsletter in Webflow for Mailchimp campaigns?

How can I change the color of a rich text element in Webflow?

What is the best way to create a URL architecture with multiple folders for blog and content in Webflow?

Why are the recent blog posts not showing in the collections wrappers on the home page, footers, and blog page in Webflow?

How can I transfer blog posts from Wordpress to Webflow while keeping the published dates, or being able to change them manually in Webflow?

How can I delete an unused plain text CMS field in Webflow when I am unable to find where it is referenced?

What is the purpose of the Webflow CMS Filter template?

Is it possible to create a CMS collection in Webflow that displays specific images in the order that their values are entered into the list?

What steps do I need to take in Webflow to fix the problem with my slider?

What is the best way to ensure support staff members in the 'Meet the Team' section of a recruitment agency website do not have linked pages, while recruiters do, in Webflow?