-2

I have included an iframe in my website.. Whenever I scroll, the map zooms-in and zooms-out.. I tried to avoid this by setting pointer-events to none but this removes all the actions on the map, I am not able to navigate!!

html:

<div class="map">

    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d29618050.62001087!2d63.250335576086215!3d25.017620133523653!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30635ff06b92b791%3A0xd78c4fa1854213a6!2sIndia!5e0!3m2!1sen!2sin!4v1450871870014" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

</div>

css:

.map iframe {pointer-events: none;}
Nag
  • 806
  • 1
  • 13
  • 28

1 Answers1

0

An idea would be to put a mask on it :

<div class="map">
    <iframe src="https://www.google.com/maps/embed?xxx"></iframe>
    <div class="mask"></div>
</div>

And the css would be 

.map .mask {
    width: 100%;
    height: 100%;
}

The entire map will be untouchable.

But if you want to enable left/right navigation without enabling zoom, this stackoverflow answer may help.

Community
  • 1
  • 1
David
  • 4,785
  • 7
  • 39
  • 63