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?

Is it possible to have multiple Administrators and Editors/Users in Webflow CMS? Can the Editors/Users be restricted to certain sections of the site and have the ability to create new content only within their respective sections?

Is it possible to create modular pop-up windows with unique URLs in Webflow, similar to the ones on Dribbble? Can these content page areas also be tagged for easy navigation?

Is there a way to create a dynamic CMS slider in Webflow that includes both video (from YouTube or Vimeo) and imagery, where each image can open in a lightbox when clicked?

How can I automate the process of adding form submissions to a CMS collection in Webflow?

Could you please provide assistance with creating a website in Webflow that has profiles on CMS and directs users to their own dashboard upon login while hiding certain elements?

How can I add a search bar to the navigation menu in Webflow?

How can I disable the email notifications for a specific form in Webflow while still maintaining email functionality for other forms?

In Webflow, how can I combine two CMS collections (Blog & Success Stories) to show both on my home page instead of just one?

How can I filter a dynamic list of related projects in Webflow to exclude the current page?

In Webflow, how can I create a Blog List Page with rows representing different categories and 1 featured Blog Post Title & Summary in each category section?