disable the scrolling zoom on embedded Google Map iframes
disable the scrolling zoom on embedded Google Map iframes

Most of the people using Google Map as a default map on their contact us Pages & etc. Most of the people still used embedded code of Google map. Also some percentage of people using Map API to configure the map according to their requirements.

If we using default embedded Google Map on our website. When scroll mouse over that map to go down to the bottom page it’s not possible because that Google Map was zooming without page scroll. So here we can see

How to disable the Google Map Scrolling zoom on embedded Google Map iframe using overlay.

Why are we using Overlay on Google Map?

The reason for using overlay – Its cover the area of Google Map to ignore the mouse scrolling function to the Google Map. It’s like a layered cover something.

The HTML code

    1. Make an overlay on Google Map

<div class="overlay" onClick="style.pointerEvents='none'"></div>
    1. Now enter your Google Map Code you got from GoogleMaps  After the div close.

Example Code:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d387145.86663090583!2d-74.25819305558964!3d40.705310992472995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew+York%2C+NY!5e0!3m2!1sen!2s!4v1486535497650" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

The Style sheet code (.css)

  1. Its CSS style for overlay div class

.overlay {
 width:600px; /* your iframe width */
 height: 450px; /* your iframe height */
 top: 450px; /* your iframe height */
 margin-top: -450px; /* your iframe height */

**Make sure your iframe width and height is equal to above CSS styles.

Also, you can follow this Responsive Map Tips.

How to make a Responsive Google Map

If you need the Google Map is responsive to fix all device layout responsive do this simple edit make the width pixel to a percentage (%)? So here the width of the Google Map iframe is 600px so we need to change this to 100% now the map fills the width of the layout.

Hope you Enjoy this tips.
Please Like us on Facebook Follow us on Twitter and Google+