Skip to content

Instantly share code, notes, and snippets.

@armetiz

armetiz/disable-scroll-google-map.js

Created June 15, 2016 08:53
Show Gist options
  • Save armetiz/6baeed40c3dd71aac738489275ae7721 to your computer and use it in GitHub Desktop.
Save armetiz/6baeed40c3dd71aac738489275ae7721 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
disable-scroll-google-map.js
<div class="map-iframe-container">
<h3>First Map</h3>
<iframe class="map-iframe"
frameborder="0" style="border:0; width: 100%; height: 100%"
src="https://www.google.com/maps/embed/v1/place?key=%GOOGLE_API_KEY%&q=%LOCATION%" allowfullscreen>
</iframe>
</div>
<div class="map-iframe-container">
<h3>Second Map</h3>
<iframe class="map-iframe"
frameborder="0" style="border:0; width: 100%; height: 100%"
src="https://www.google.com/maps/embed/v1/place?key=%GOOGLE_API_KEY%&q=%LOCATION%" allowfullscreen>
</iframe>
</div>
<script type="application/javascript">
(function () {
var iframes = document.getElementsByClassName('map-iframe');
var iframeContainers = document.getElementsByClassName('map-iframe-container');
var scrollOn = function() {
[].forEach.call(iframes, function(iframe) {
iframe.style["pointer-events"] = "auto";
});
};
var scrollOff = function() {
[].forEach.call(iframes, function(iframe) {
iframe.style["pointer-events"] = "none";
});
};
[].forEach.call(iframeContainers, function(iframeContainer) {
iframeContainer.addEventListener("mouseup", scrollOff);
iframeContainer.addEventListener("mousedown", scrollOn);
});
[].forEach.call(iframes, function(iframe) {
iframe.addEventListener("mouseleave", scrollOff);
});
scrollOff();
}());
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment