Disable mouse scroll on Google Maps iframe/embed

Design help Custom code
1

Hey everyone,

My client wants to use an embedded Google maps that display’s their address, directions, etc, so i am having to use an iframe instead of the Webflow element.

My question is how can i disable scroll on the iframe?

I’m a designer first and foremost and a bit of a code newbie, so please go easy on me :slight_smile:

Thanks!

2

Welcome to the Webflow forum!

Could you please edit and provide ALL the necessary details in your post so we can take a look at your site/issue?

In future if you want faster replies and more accurate answers, I suggest including all the details listed in the link above before someone has to ask.

Hope to hear from you soon. Thanks!

3

Hey Sam,

Thanks for your reply and sorry i didnt include all the info.

Here is the read only link https://preview.webflow.com/preview/kandh?preview=0e2be4083051eb964e20f55b416d2e0b

And here is the published link: http://kandh.webflow.io/contact

I have managed to do a partial fix by placing a transparent div over the map and added an interaction that hides it when clicked.

It would be great if i knew how to allow the user to click the map again and stop the map from scrolling.

Thanks

Matt

4

Wow, that’s actually quite a clever workaround, it’s also mentioned here and here to set a hidden layer over the maps and remove it when clicked:

It seems that the Embed/Iframe version of Google maps doesn’t allow you to set map options.

The alternative is to use the JavaScript Maps API to load and initialise the map with the options you need, like this answer

5

Thanks Sam! Im learning :slight_smile:

I will take a look at the links :slight_smile:

6

Hello!

Here is the exact code I use on the Google Map embed to disable scroll, just copy and paste it in the Before body tag of the page you use the embed widget on:

<script>
$('.map-container')
	.click(function(){
			$(this).find('iframe').addClass('clicked')})
	.mouseleave(function(){
			$(this).find('iframe').removeClass('clicked')});
</script>
<style>
.map-container iframe{
	pointer-events: none;
}
.map-container iframe.clicked{
	pointer-events: auto;
}
</style>

From there just make sure you put the embed widget in a div block with a class name of ‘map-container’ and you’re all set.

LJB

1 Like
7

Awesome! Thank you so much!!