Google Maps iframe Disable Scroll with CSS

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>