Google Maps iframe embed disable scroll to zoom

UPDATE: Google has finally fixed this usability issue, providing an overlay with instructions for touch devices. Users will be able to scroll the complete webpage by scrolling with one finger. Scrolling only the map can be done by using two fingers, as is prompted in the overlay “Use two fingers to move the map”.

When embedding a Google Map with an iframe (instead of having your own implementation using the Google Maps javascript api) you can run into a lot of limitations. One of which is the (mousewheel) scroll to zoom functionality. When embedding a large(r) map, visitors might run into problems scrolling your page. Instead of scrolling, they will be zooming the map (or panning the map on mobile). We can use a few lines of jquery and css’s relatively unknown (but well supported) “pointer events”.

<div class="map-container">
	<!-- Your average Google Maps iframe embed code -->
	<iframe width="300" height="450" frameborder="0"
		scrolling="no" marginheight="0" marginwidth="0"
		src="https://www.google.com/maps/embed/v1/place?q=Status201%20Web%20Development&key=AIzaSyCCGx7iveK21dme8OuLgX9Je7TUDDCw3_A">
	</iframe>
</div>
.map-container {
	width: 100%;
}
.map-container iframe{
	display: block;
	width: 100%;
	position: relative; /* IE needs a position other than static */
	pointer-events: none;
}
.map-container iframe.clicked{
	pointer-events: auto;
}
$('.map-container')
	.click(function(){
			$(this).find('iframe').addClass('clicked')})
	.mouseleave(function(){
			$(this).find('iframe').removeClass('clicked')});

By adding the “clicked” class to the iframe, we will allow pointer events (scrolling to zoom/pan a.o.) until the mouse pointer leaves the container. The “clicked” class will be removed again activating the disabled pointer events in the css.

See the Pen Google Maps iframe embed disable scroll to zoom by Status201 (@status201) on CodePen.18405

8 Responses to “Google Maps iframe embed disable scroll to zoom”

  1. Theo

    Hi, I am learning to make a website in WordPress to replace the one mentioned above. I have copy/pasted the CSS code to the webpage; I have placed the iframe (google map) in the DIV as defined above; I have added the javascript to the HEAD with the ‘Header and Footer Scripts’ plug-in; I clicked the update button. No result. That is to say: there is no difference as with an embedded iframe without any of the above code. Am I missing something? Is there another javascript I would have to add to the HEAD of the pages?

    Reply
    • Theo

      Additional: the CSS apparently gets merged with the DIV element, changing it from this:

      to this:

      In the HEAD, the javascript is nowhere to befound, so possibly the ‘Header and Footer Scripts’ plug-in doesn’t do what it’s supposed to do.

      Reply
      • Theo

        Okay, that didn’t go well…

        Changed from this (without the this time):

        div class=”map-container”

        to this

        div style=” width: 100%; display: block; width: 100%; position: relative; /* IE needs a position other than static */; pointer-events: none; pointer-events: auto;” class=”panel-widget-style”

        Reply
        • Gijs Oliemans

          Hi Theo,

          From what i can see the plugin is messing things (code) up.
          You also need to have the jQuery library loaded, but most themes have this out of the box.
          Can you provide me with a link to your test page?

          Reply
          • Theo

            Hi Gijs,

            I’m building it locally; it’s not on the web yet.

            When I open the page and then open the source code, I should be able to find the inserted javascript, I imagine, but it’s not there, no matter where I insert it (HEAD section or footer). I have tried all four options, even all four at the same time, but nothing is showing.

            Is it possibly conflicting with another plug-in?

        • Gijs Oliemans

          My best bet is that it’s the theme you are using. Did you try to switch to the standard WordPress theme, Twenty Fifteen for example? The function wp_head() and wp_footer() might be missing in your template files.
          https://codex.wordpress.org/Function_Reference/wp_head
          https://codex.wordpress.org/Function_Reference/wp_footer

          Reply
  2. Emiliano

    Hi I develop a plugim for this problem. You can checkit at https://diazemiliano.github.io/googlemaps-scrollprevent/
    I hope it will be usefull.

    Reply
  3. Jonny Jordan

    Thanks, I tried this and worked well! I’ve just written an article on a different way to do it here https://jonnyjordan.com/blog/disable-mouse-scroll-wheel-zoom-embedded-google-map-iframes/

    Reply

Leave a Reply