Embedding Google map into any website is very important now a days, especially when you’re dealing with online business. They should know where your business location and you’re either exists or not. Although, it’s not mandatory but for trust worthy, you should.
By the way, when it comes into action, I mean when you landed on your/any other web page and scroll your mouse over Google map, I think it’s very annoying when you get stuck and cannot go up or down because of Google map auto zoom in-out effect. At that time you must click on your browser scrollbar on the right hand side and then scroll through rest of the website.
You can get rid of this problem by two ways –
1. By using jQuery plugin and
2. Using CSS rules.
Though, many developers are using jQuery plugin to resolve this problem but I’m pretty sure, sometimes it would make your work progress down by finding the exact plugin. So, I decided to share with you a simplest way using CSS rules to accomplish this.
Sound exiting ha? 😉
Just add the inline style code below in your Google map iframe –
Now your map should look like below-
<iframe class="map" <span style="color: #ff0000;"><strong>style="pointer-events: none;"</strong></span> src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3593.2847826593597!2d89.23990487109968!3d25.761155516200045!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39e331fbe8f2f097%3A0xe97a0e414e517c2d!2sRangpurSource!5e0!3m2!1sen!2sbd!4v1446819386272" width="300" height="150" allowfullscreen="allowfullscreen"></iframe>
Finally, browse your web page again scroll through whole webpages where the map is being located and see what happen now!
I hope, now the dirty boring zoom in-out problem has no longer be a problem! Right?
If you still facing the problem, please let me know by comment, so that I can check your problem. And do not hesitate to say thanks and share this post if it works for you fine.