disable 'draggable' only on mobile devices

Maybe this also helps to solve this problem:

https://stackoverflow.com/questions/7534888/embed-google-maps-on-page-without-overriding-iphone-scroll-behavior

In conclusion, if you want to embed Google Maps on a mobile page and be able to scroll past it, you need to use API v3, disable dragging, and add touch events. I made a few minor tweaks to my code as well, presented here for any who may benefit in the future:

another link (though they are linked together in stackoverflow):
https://stackoverflow.com/questions/5596781/google-maps-api-suppress-map-panning-to-enable-page-scrolling/5679949#5679949

I guess when dragging is disabled on mobile, maybe you should have the option to add the pan controls. So maybe an option “if dragging disabled on mobile add pan controls”.

Ok, went down a different route. Here is a little script that will check the size of browser window and then change the mapsize to 90% (so people can still use their fingers to scroll past the map). It will change back to 100% when the window becomes bigger than 640px. Maybe it will come in useful to somebody.

Likely it could still be improved, but it works in my case. I just added the on resize to test it on my desktop.

// script to resize mapsmarker maps on screen resolutions or window resize smaller then 640px
jQuery(function(){
	var windowWidth = jQuery(window).width();
	if (windowWidth <= 640) {
		jQuery('div.mapsmarker').css({
            	'width' 		: '90%',
            	'margin-left' 	: 'auto',
            	'margin-right' 	: 'auto'
     	});
    }
	jQuery(window).on('resize', function(){
    	var win = jQuery(this); //this = window
    	if (win.width() <= 640) {
       		jQuery('div.mapsmarker').css({
            	'width' 		: '90%',
            	'margin-left' 	: 'auto',
            	'margin-right' 	: 'auto'
     		});
        }
		else {
			jQuery('div.mapsmarker').css({
				'width' 		: '100%'
     		});
		}
    });
});

Hi Sascha,

that code for Google Maps API wont help much with my plugin as I use a custom leaflet google plugin to display google maps.

I also looked up in the leaflet reference (https://leafletjs.com/reference.html) and as far as I know it is not
possible to disable dragging for mobiles only.

As you can see from settings / map defaults / interaction options, you can enable&disable dragging for
all maps as a general setting.

best,
Robert

The above code works well in my case. It leaves enough space for mobile phones to scroll past the map and it keeps the draggable functionality which is good. SO bonus on both sides ??