I spent a lot of time trying to find something that I thought would be very simple. Google usually amazes me with all of the features that they provide. One thing that they fell short on was zoom feature while scrolling. This article will discuss the iframe embed code and not the API google maps.

I could go on with all of the reasons that you probably don’t want this feature, but lets just talk about fixing it.

Options

You only have a few good option when it comes down to it. The¬†reason is that you just don’t have control of what google is providing in their iframe. If you truly need more control, you should be using the google maps API.

Pointer Events None

The easiest, and probably worst, solution is to write your own CSS code that blocks any and all interaction with the map. Obviously this isn’t the best solution as you want to allow people to interact with the map. We also want the users to feel like they are in control. Simply add the CSS code below to go on your iframe and it will do the simple trick.

pointer-events: none;

 JavaScript

A very simple and pretty good solution is to have pointer-events set to none and then when someone clicks on it, have the javascript take it off. Also, when the user takes the mouse off, the pointer-events: none gets added right back. The only thing that might make this better for a user is if you put an overlay with text on the map that says, “click to interact.”

This code

$(document).ready(function () {// you want to enable the pointer events only on click;$(‘#map_canvas1’).addClass(‘scrolloff’); // set the pointer events to none on doc ready
$(‘#canvas1’).on(‘click’, function () {
$(‘#map_canvas1’).removeClass(‘scrolloff’); // set the pointer events true on click
});

// you want to disable pointer events when the mouse leave the canvas area;

$(“#map_canvas1”).mouseleave(function () {
$(‘#map_canvas1’).addClass(‘scrolloff’); // set the pointer events to none when mouse leaves the map area
});
});

Just add this javascript to your page. Don’t forget to add or change the id’s. This example has “#canvas1” as the container while the “#map_canvas1” is located on the <iframe>.

In the end, you will get a result like that of… (link coming soon).