How to disable Google Map scrolling?

HTML & CSS
1

I have an simple embedded google map where I’m not using javascript to initialize it, but rather just the iframe. How to I make it so that you can scroll past the map without the maps zooming feature?

<section class="map-hero">
    <div class="map-responsive">
      <iframe src="https://www.google.com/maps/embed?pb=!4v1594643996979!6m8!1m7!1sCAoSLEFGMVFpcE9wUjFLWWlWUlVndGt3bGFwMVhmOTdlX0pZQ1FUQ2I4WFdxMVBi!2m2!1d39.97782700408545!2d-83.00391199828493!3f267.9400453112804!4f-2.5579587500582477!5f0.7820865974627469" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
    </div>
</section>
2

I don;t know much about maps but I believe that if you want your user to interact with the map then you can’t stop the scrolling/zooming without stopping the other features unless you embed the map using the API feature.

There is a partial fix here that adds some JS to allow pointer-events to be switched on and off when the map is clicked (although you may need to tell your users that they have to click to interact with the map).

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.