Alex Furer

Google maps are used almost everywhere to either implement an address of a business, club, store or anything else on a lot of pages on the internet. It’s a nice and convenient way to do it.

BUT… almost on all pages where this is done, when you scroll down using the mouse wheel, once the mouse ends up inside the Google map, the map starts zooming out instead of the page continuing to scroll down.

Here’s how to make a Google map not zoom in or out when you scroll down a page with the mouse wheel and only zoom, pan or do anything with the Google map as soon as you click inside the map. The following workflow also blocks zooming again once the mouse leaves the Google map area.

I got this from Stackoverflow, reproducing it here in case the zombie apocalypse breaks out and stackoverflow goes bun bun.

First you want to add the following style to your website or custom CSS script in your WordPress installation:

.scrolloff {
  pointer-events: none;
}

Then you want to add the following JavaScript to the page:

<script type="text/javascript">
    jQuery(document).ready(function($) {
    console.log("allLoaded");
        // you want to enable the pointer events only on click;
        jQuery('#map_canvas1').addClass('scrolloff'); // set the pointer events to none on doc ready
	console.log("scrolloffAddedA");
        jQuery('#canvas1').on('click', function () {
	    console.log("clickDetected");
            jQuery('#map_canvas1').removeClass('scrolloff'); // set the pointer events true on click
	    console.log("scrolloffRemoved");
        });
        // you want to disable pointer events when the mouse leave the canvas area;
        jQuery("#map_canvas1").mouseleave(function () {
	    console.log("mouseLeft");
            jQuery('#map_canvas1').addClass('scrolloff'); // set the pointer events to none when mouse leaves the map area
	    console.log("scrolloffAddedB");
        });
    });
</script>

Note that I have a whole lot of echo’s in the code which let’s you debug the code. You might want to consider switching that off for efficiency.

And finally that’s how you want to embed the map itself:

<section id="canvas1" class="map">
<iframe id="map_canvas1" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d87147.27677140976!2d7.324830610654608!3d46.95476576996358!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x478e39c0d43a1b77%3A0xcb555ffe0457659a!2sBern!5e0!3m2!1sde!2sch!4v1462400079917" width="100%" height="485" frameborder="0" style="border:0" allowfullscreen></iframe>
</section>

Here is how this looks like in the end:

Psoting code on your WordPress Blog or Website

There’s a very easy, nice way to show source code on your blog or website.

If you are hosting your site on WordPress.com it’s even natively implemented.

Read the article on WordPress.com

If you self host your website or blog, you will need this plugin.

Here’s some examples of source code:

Some CSS code:

.scrolloff {
  pointer-events: none;
}

A JavaScript:

<script type="text/javascript">
    jQuery(document).ready(function($) {
    console.log("allLoaded");
        // you want to enable the pointer events only on click;
        jQuery('#map_canvas1').addClass('scrolloff'); // set the pointer events to none on doc ready
	console.log("scrolloffAddedA");
        jQuery('#canvas1').on('click', function () {
	    console.log("clickDetected");
            jQuery('#map_canvas1').removeClass('scrolloff'); // set the pointer events true on click
	    console.log("scrolloffRemoved");
        });
        // you want to disable pointer events when the mouse leave the canvas area;
        jQuery("#map_canvas1").mouseleave(function () {
	    console.log("mouseLeft");
            jQuery('#map_canvas1').addClass('scrolloff'); // set the pointer events to none when mouse leaves the map area
	    console.log("scrolloffAddedB");
        });
    });
</script>

And here’s the list of supported languages:

• actionscript3
• bash
• clojure
• coldfusion
• cpp
• csharp
• css
• delphi
• erlang
• fsharp
• diff
• groovy
• html
• javascript
• java
• javafx
• matlab (keywords only)
• objc
• perl
• php
• text
• powershell
• python
• r
• ruby
• scala
• sql
• vb
• xml