Avoid Google Map iframe zoom in and out of scrolling

You can simply remove the zoom in and out google map by adding an overlay.
So you can solve this by putting a div with an .overlay exactly before each gmap iframe insertion, see:

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

In my CSS I created the class:

.overlay {
   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 🙂

Leave a Comment

WhatsApp Logo Chat