A simple usability trick for Google Maps

10th March 2014 | by Adam Beres-Deak | google maps, usability, javascript

Usability problem

If you embed Google Maps via its JavaScript API, there is usually a usability question: What should happen, when the users scroll over the map with their mouse wheels? The API defaults say: the user should zoom the map.

But that's in many cases not what users would expect. Especially when the map is large. Sometimes they just want to scroll the page without zooming the map or having any interaction with it at all.

How to solve it

There is a possible solution which is very easy and works for many users:

1. Before they had any interaction with the map, disable zooming with the mouse wheel
2. After they had an interaction, enable zooming with the mouse wheel
3. When they click away, or interact with other parts of the page, disable zooming with mouse wheel again

Demo

1. Just scroll with the mouse wheel over the map
2. Click onto the map
3. Start zooming in and out with the mouse wheel
4. Click somewhere outside of the map
5. Scroll with mouse wheel over the map to just scroll the page
6. Repeat these steps [at most a few times - no endless loop :)]

Update (16/03/2014)

I edited the source code to use mousedown event instead of click. This helps when the user drags the map - dragging counts also as an interaction with the map.

Source code

var el = $('#map');
var map;

function enableScrollingWithMouseWheel() {
    map.setOptions({ scrollwheel: true });
}

function disableScrollingWithMouseWheel() {
    map.setOptions({ scrollwheel: false });
}

function init() {
    map = new google.maps.Map(el[0], {
        zoom: 10,
        center: new google.maps.LatLng(47.49840560, 19.04075779),
        scrollwheel: false // disableScrollingWithMouseWheel as default
    });

    google.maps.event.addListener(map, 'mousedown', function(){
        enableScrollingWithMouseWheel()
    });
}

google.maps.event.addDomListener(window, 'load', init);

$('body').on('mousedown', function(event) {
    var clickedInsideMap = $(event.target).parents('#map').length > 0;

    if(!clickedInsideMap) {
        disableScrollingWithMouseWheel();
    }
});

$(window).scroll(function() {
    disableScrollingWithMouseWheel();
});

by Adam Beres-Deak

| Share | Tweet | Share | Share

Latest blog posts

Displaying icons with custom elements 14th October 2015

Plain JavaScript event delegation 26th January 2015

After the first year of blogging - what happened on my blog in 2014? 1st January 2015

Better webfont loading with using localStorage and providing WOFF2 support 18th December 2014

Worth watching: Douglas Crockford speaking about the new good parts of JavaScript in 2014 20th October 2014