Disable Mouse Scroll from Zoom on Embedded Google Maps

Are you trying to disable mouse scroll from Zoom on your embedded Google maps? Then here you have an easy solution. Google iframe map is provided with the default mouse scroll option. So here what we going to do is prevent mouse scroll with a layer using CSS.
If you not yet created a Google embed map then click here to create a new one. With a few simple steps you can create an iframe map, also you have instructions to create the map.
Once you created the embedded map it looks like the below code.
1 2 3 4 5 6 7 8 |
<iframe width="100%" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJtzu9IT05NoYRlz0tXt8hCYY&key=APIKEY" allowfullscreen> </iframe> |
Note: You need to use your place and APIKEY in the above iframe.
Prevent Mouse Scroll from Zoom
In the above iframe, we created span tag with the class name of the layer and preventing the span with onclick="style.pointerEvents='none'"
1 2 3 4 5 6 7 8 9 |
<span class="layer" onclick="style.pointerEvents='none'"></span> <iframe width="100%" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJtzu9IT05NoYRlz0tXt8hCYY&key=APIKEY" allowfullscreen> </iframe> |
By using .layer class we going to cover the part. Use the below code in your style.css to disable the mouse scroll.
1 2 3 4 5 6 7 8 9 |
.layer { background:transparent; position: relative; width: 100%; height: 450px; top: 450px; margin-top: -450px; z-index: 1; } |
Once you are done with everything you can see the mouse scroll disabled from the zoom. Below you can preview how it looks like.
Cascading Style SheetsCSSGoogle MapJavaScriptMaps
Mraj
Creative Designer & Developer specialist by the spirit and a loving blogger by thoughts. If you have any questions let me drop an email with the article name to the following email id: [email protected]