Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google maps iframe disable scrolling touch on mobile

Can I deactivate the google maps iframe when i'm on a mobile device?

Settings are already with scrolling=no, but when I scroll on mobile the map is activated and become active.

Is there a solution?

Thanks

like image 545
benedex82 Avatar asked Nov 09 '13 09:11

benedex82


1 Answers

I had a similar problem and used something like this:

<style>
  .overlay {
    background:transparent; 
    position:relative; 
    width:640px
    height:480px; 
    top:480px; 
    margin-top:-480px;}
</style>

<html>
  <div class="overlay" onClick="style.pointerEvents='none'"></div>
  <iframe src="https://mapsengine.google.com/map/embed?mid=some_map_id" width="640" height="480"></iframe>
</html>

The div covers the map, preventing pointer events from getting to it. If you click on the div, it becomes transparent to pointer events, activating the map.

like image 114
vamin Avatar answered Sep 21 '22 10:09

vamin