June 24, 2018
Google Maps iframe embed disable scroll to zoom
Description:
Snippets to prevent scrolling a Google map when you are scrolling the page. On click you will be able to manipulate the map.
Kind:
CSS, HTML, jQuery
CSS:
.map-container {
width: 100%;
margin: 50px 0 30px;
}
.map-container iframe{
width: 100%;
display: block;
pointer-events: none;
position: relative; /* IE needs a position other than static */
}
.map-container iframe.clicked{
pointer-events: auto;
}
HTML:
Javascript:
$('.map-container')
.click(function(){
$(this).find('iframe').addClass('clicked')})
.mouseleave(function(){
$(this).find('iframe').removeClass('clicked')});