CODEWITHSUNDEEP
google-mapsmobileiframe
benedex82
benedex82

Reputation: 562

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

Upvotes: 7

Views: 10129

Answers (1)

vamin
vamin

Reputation: 2238

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.

Upvotes: 7

Related Questions