Disabled Scroll on google map when page scroll

Posted: July 4, 2017 in ALL

this class needs to be added to the map div = gmap-wrapper
this class needs to be added to the iframe as a class = scrolloff

CSS

.scrolloff
{ pointer-events: none; }

HTML

<div class="gmap-wrapper">					
	<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14695.074973989373!2d72.6236405!3d22.9587424!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x4b7d4042cc4ba9d9!2sTankar+Residency%2C+Dibiyapur%2C+Vatva%2C+Ahmedabad%2C+Gujarat+382445!5e0!3m2!1sen!2sin!4v1499159481841" width="600" height="450" frameborder="0" style="border:0"  class="scrolloff"></iframe>
</div>

jQuery

<script type="text/javascript">
// DISABLE MOUSE SCROLL IN MAPS
// enable the pointer events only on click;
	jQuery(document).ready(function( $ ) {
		$('.gmap-wrapper').on('click', function ()
			{ $('.gmap-wrapper iframe').removeClass('scrolloff'); // set the pointer events true on click 
		});
		// you want to disable pointer events when the mouse leave the canvas area;
		$(".gmap-wrapper").mouseleave(function (){ 
			$('.gmap-wrapper iframe').addClass('scrolloff'); // set the pointer events to none when mouse leaves the map area 
		});
	});
</script>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s