How can I disable scroll on an embedded Google Maps iframe in Webflow?

To disable scroll on an embedded Google Maps iframe in Webflow, you can use custom code and some CSS techniques. Here's a step-by-step guide to achieving this:

1. First, ensure that you have added the Google Maps iframe to your Webflow page. To do this, drag and drop an HTML embed element to the desired location on your page. Then, paste the iframe code provided by Google Maps into the embed element.

2. Give a unique class name to the HTML embed element. You can do this by selecting the element and going to the right sidebar panel to set the class name.

3. Head over to the page settings by clicking on the gear icon in the upper-right corner of the Designer.

4. In the page settings, under the 'Custom Code' tab, locate the 'Head Code' section. Add the following script inside the `

```

Make sure to replace `your-class-name` with the actual class name you assigned to your HTML embed element.

5. Save the changes and publish your site.

This script attaches event listeners to the map iframe and prevents the default scroll behavior both on mouse and touch events. This effectively disables scrolling within the Google Maps iframe.

By implementing these steps, you should be able to disable scroll on the embedded Google Maps iframe in Webflow.