Google Maps iframe Disable Scroll with CSS
Do you want to embed a Google Map iframe on your site but are getting stuck in the map when you scroll with your mouse wheel? Well we have an easy solution for you that uses just CSS and HTML to disable the scroll in the map until clicked upon.
If you’re having trouble with WordPress Removing the HTML “onClick” element we have included a work around below; however, it will require a little bit of jQuery you can copy and paste into your header.php file.
Things To Note:
Make sure to match the “min-height” found in the div class “.click-map” element to the height of your Google Maps iFrame embeded height.
If this is not done the bottom part of your map may still be scrollable.
HTML
<div class="no-map-scroll"> <div class="click-map" onClick="style.pointerEvents='none'"></div> [Insert Google iFrame Code Here] </div>
CSS
.no-map-scroll { position:relative; }
.click-map { width:100%; min-height:300px; position:absolute; top:0; }
Google Maps Example With CSS
Google Maps Example Without CSS
WordPress Removing HTML: Work Around
Sometimes WordPress will remove a variety of html elements when switching between “Visual Editor” and “Text Editor”. Specifically we found WordPress was removing the onClick=”style.pointerEvents=’none’ element on a variety WordPress versions.
If you are experiencing this issue with the “onClick” element being removed from the HTML we have a work around for you; however, this will require a little bit of additional jQuery script within your header.php file.
HTML
<div class="no-map-scroll"> <div class="click-map"></div> [Insert Google iFrame Code Here] </div>
CSS
.no-map-scroll { position:relative; }
.click-map { width:100%; min-height:300px; position:absolute; top:0; }
Insert jQuery Into Header.php File
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".no-map-scroll").click(function(){
$(".click-map").removeClass("click-map");
});
});
</script>
Adding Multiple Maps
The above code will work for multiple maps; however, if you click on one the will all become scroll-able. If you would like instead to have each accessible individually you will need to assign a unique class for each.
I have outlined how to do it for three below but the same steps can be repeated by adding the same HTML, CSS and jQuery script for 4, 5, 6 or however many you would like.
HTML
<div class="no-map-scroll"> <div class="click-map"></div> [Insert Google iFrame Code Here] </div> <div class="no-map-scroll2"> <div class="click-map2"></div> [Insert Second Google iFrame Code Here] </div> <div class="no-map-scroll3"> <div class="click-map3"></div> [Insert Third Google iFrame Code Here] </div>
CSS
.no-map-scroll { position:relative; }
.click-map { width:100%; min-height:300px; position:absolute; top:0; }
.no-map-scroll2 { position:relative; }
.click-map2 { width:100%; min-height:300px; position:absolute; top:0; }
.no-map-scroll3 { position:relative; }
.click-map3 { width:100%; min-height:300px; position:absolute; top:0; }
Insert jQuery Into Header File
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".no-map-scroll").click(function(){
$(".click-map").removeClass("click-map");
});
$(".no-map-scroll2").click(function(){
$(".click-map2").removeClass("click-map2");
});
$(".no-map-scroll3").click(function(){
$(".click-map3").removeClass("click-map3");
});
});
</script>
