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="" 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 Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.