Google Maps scrollWheel = false and Apple's Magic Mouse

Question

I'm trying to set scrolling to false on a Google Map, using Google Maps API. I have an Apple Magic Mouse which I think is causing a problem with the expected behavior.

Below is how I initialize the map, even though scrollWheel is set to false it still scrolls when I scroll down the page. This is an unwanted effect because the map is displayed at the upper half of the screen and there's content below the map as well. I'm trying to avoid map scrolling and turning users crazy when the cursor hits the map canvas.

var map = new google.maps.Map(document.getElementById('canvas'), {
            mapTypeId: mapTypeId,
            mapTypeControl: false,
            scrollWheel: false,
            center: {lat: 52, lng: 6},
            zoom: 4
        });

When I try console.log(map.get('scrollWheel')); it returns, as expected, false. Any suggestions on this?

Answer 1

At first, there are 2 ways to disable Google Maps scroll:

1. Using Google Maps Embed API.

   You cannot disable scrolling: disabling "mousewheel" event using jQuery since it does not work within the iframe. You need to set pointer-events: none on the iframe and pointer-events: auto when clicking on an overlay. Refer to Disable mouse scroll wheel zoom on embedded Google Maps and Prevent a Google Maps iframe from capturing the mouse's scrolling wheel behavior for more specific explanation.

2. Using Google Maps Javascript API.

   new google.maps.Map(document.getElementById('map'), options); You can use scrollwheel: false and draggable: false.

But If those ways doesn't solve your issue, it seems the problem is about Apple’s magic mouse zoom size. Refer to issues with Apple trackpad (Magic Mouse).