[Solved] Problem with embedded map zooming in iframe

[mintdesigner]

I am using the google map iframe code. I want to disable map zooming when the user uses mousewheel to scroll the page but the map should be interactive when the user clicks on the map. I tried disabling by giving pointer-events: none , but it disables the zooming completely.
Please help.

I have a reference similar to which I want the map to function

Reference Link : http://www.salttechno.com/contact-top-web-designers-pune-india/

My website link : http://fiveonlineclient.in/project/vizcom/

[mintdesigner]

Thanks for the reply. I am clueless about the api thing. I guess there has to be some specific code with api key which will be mentioned in the javascript source. If yes, how to find out the api key? Even in documentation, they have mentioned in second line of javascript. If I implement as it is, I am getting a london map. I need the one I registered for. Please help.

<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=true”></script&gt;

[Paulie_D]

I need the one I registered for.

You didn’t note it when you registered?

Better go look again.

[mintdesigner]

The registration has been done by the client. He has just sent me the link for the map from where I can use the embed code.

[Paulie_D]

The registration has been done by the client.

Then you know where to get the Key….

[mintdesigner]

Thanks @ Soronbe. I found the solution.

[n00bctrl]

I used <div class="overlay" onClick="style.pointerEvents='none'"></div>
[googlemaps https://mapsengine.google.com/map/embed?mid=some_map_id&w=100%&h=480]
.overlay {
background:transparent;
position:relative;
width:100%; /* your iframe width */
height:480px; /* your iframe height */
top:480px; /* your iframe height */
margin-top:-480px; /* your iframe height */
}

There a good tutorial on it here: https://jonnyjordan.com/blog/disable-mouse-scroll-wheel-zoom-embedded-google-map-iframes/

[Author]

Posts