Can't swipe page with a map using Google Maps API

Question

I am testing how to use the Google Maps API but I have a problem only on mobiles using the mobile version. The page can be swiped but not over the map. If I ask for the desktop version on the mobile, it swipe. This is the example: http://rsottini.biottux.com.ar I used HTML5 and AngularJS.

score 1 · Answer 1 · edited May 23 '17 at 11:58

It was already answered but I can't mark as duplicate yet: Disable mouse scroll wheel zoom on embedded Google Maps

So here is the answer: https://stackoverflow.com/a/22567753

I was having the same problem: when scrolling the page then the pointer becomes over the map, it starts to zoom in/out the map instead of continuing scrolling the page. :(

So I solved this putting a div with an .overlay exactly before each gmap iframe insertion, see:

<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>

In my CSS i created the class:

.overlay {
   background:transparent; 
   position:relative; 
   width:640px;
   height:480px; /* your iframe height */
   top:480px;  /* your iframe height */
   margin-top:-480px;  /* your iframe height */
}

The div will cover the map, preventing pointer events from getting to it. But if you click on the div, it becomes transparent to pointer events, activating the map again!

I hope get helped you :)

Can't swipe page with a map using Google Maps API

1 Answers1