How to disable the scrolling zoom on embedded Google Map iframes

- Advertisement -

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?

- Advertisement -

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
- Advertisement -

<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 {
 background:transparent;
 position:relative;
 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+

- Advertisement -

Share it with friends:

Related Articles

Laravel – SQLSTATE[HY000] [2002] No such file or directory (SQL: select * from information_schema.tables….

SQLSTATE No such file or directory   While setting up MySQL, I am getting the following error: Command-line code: testLaravel1 php artisan migrate SQLSTATE No such...

How to create best Bootstrap FAQ template? [Full Source Code]

Bootstrap FAQ Bootsrap Frequently Asked Questions. bootstrap faq, bootstrap faq template, bootstrap 4 faq template, bootstrap 3 faq template, bootstrap compost faq, faq in...

Old Instagram Logo with HTML and CSS quality logo

Create the Old Instagram Logo by HTML and CSS. Old Instagram Logo CSS  for new style Instagram logo  logo.html <div class="Instagram"> <span class="Instagram-strip"></span> <span class="Instagram-viewfinder"></span> ...

Chrome plans to start blocking resource-heavy ads in August Update

Chrome plans to start blocking resource-heavy ads that drain a lot of battery in August, Google announced today on its Chromium blog (via VentureBeat). Chrome...

How to create Sitemaps on Blogger for Google and Bing

Create Sitemaps on Blogger The XML Sitemap file is like a directory of all web pages that exist on your website or blog. Google,...

How to speed up WordPress with Plesk and WP Super Cache, WP Rocket, Autoptimize Free

https://websavers.ca/how-to-speed-up-wordpress   This guide includes 9 tips to show you how to take just about any WordPress site to a maximum 1-2 seconds load time. If you’ve...

Get in Touch

175FansLike
114FollowersFollow

Latest Posts

Laravel – SQLSTATE[HY000] [2002] No such file or directory (SQL: select * from information_schema.tables….

SQLSTATE No such file or directory   While setting up MySQL, I am getting the following error: Command-line code: testLaravel1 php artisan migrate SQLSTATE No such...

How to create best Bootstrap FAQ template? [Full Source Code]

Bootstrap FAQ Bootsrap Frequently Asked Questions. bootstrap faq, bootstrap faq template, bootstrap 4 faq template, bootstrap 3 faq template, bootstrap compost faq, faq in...

Old Instagram Logo with HTML and CSS quality logo

Create the Old Instagram Logo by HTML and CSS. Old Instagram Logo CSS  for new style Instagram logo  logo.html <div class="Instagram"> <span class="Instagram-strip"></span> <span class="Instagram-viewfinder"></span> ...

Chrome plans to start blocking resource-heavy ads in August Update

Chrome plans to start blocking resource-heavy ads that drain a lot of battery in August, Google announced today on its Chromium blog (via VentureBeat). Chrome...

How to create Sitemaps on Blogger for Google and Bing

Create Sitemaps on Blogger The XML Sitemap file is like a directory of all web pages that exist on your website or blog. Google,...

Popular Posts

This is the proposed SpaceX internet plan. WOW

Sometime in 2019, SpaceX will be launching the first of its proposed 4000 satellites to provide ultra-high speed internet to the entire world. This is...

Instagram Logo CSS gradient with HTML best 2 quality logo

The new Instagram logo create by CSS gradient. Read more about Gradient here Instagram logo CSS and HTML Method - 1 logo.html &lt;link rel="stylesheet" href="//maxcdn.bootstrapcdn. com/font-awesome/4.3.0/css/font-awesome.min.css"&gt; &lt;span class="instagram"&gt; ...

Failed to execute ‘postMessage’ on ‘DOMWindow’: https://www.accounts.google.com !== http://yourdoamin.com

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://accounts.google.com') does not match the recipient window's origin ('https://www.yourdomain.com') What is the problem actually? How to...

DB import failure at CREATE ALGORITHM = UNDEFINED DEFINER Error: #1227 – Access denied – Fixed

CREATE ALGORITHM=UNDEFINED DEFINER=root@`%` SQL SECURITY INVOKER VIEW...  When import the SQL file from localhost to remote server, if the server is shared or not given...

Fixed: Magento 2: Area code not set: Area code must be set before starting a session

When setting the session for customer or Order gets this Area code not set error: vendor/magento/framework/Session/SessionManager.php line 175: Area code not set: Area code must...