Mobile vs Desktop map scrolling

[Suncast]

Hi,
I have the map installed and using Open Street Maps. Greedy Gesture Handling is off. The trouble is when viewing on a smartphone, as I scroll down the webpage, when I get to the map it starts scrolling the map instead of the webpage. How can I keep that from happening? Changing Greedy Gesture Handling doesn’t help. I could make the map very short where it is easy to just touch below the map to keep scrolling, but that takes away from the user experience especially on the desktop. Is there a way to have different map heights on a mobile view vs a desktop view?

The Pro Addon is installed.

The site in development is http://www.discoversullivan.com
Thanks!

[Steven]

Hi there,

Thank you so much for getting in touch, we really appreciate your time.

Unfortunately, when getting to the map element, this will occur as the map is built to obviously scroll and pan and for dragging so unless taking this control away entirely, this will happen.

You can, however, target the map sizing only on mobile, however, using some custom CSS. Could I kindly ask you to navigate to -> Maps -> Settings -> Advanced -> Kindly copy the below custom CSS:

@media only screen and (max-width: 600px) {
.wpgmza_map {
height: 500px !important;
}
}

Once copied, simply paste this within the custom CSS field and click save.

To adjust the map height, simply change the current 500px value to the required value of your choice.

Please let me know if this helps?

Kindest Regards,
Steven De Beer

[Suncast]

The CSS code you provided did the trick.

Thank you!
David

[tburchdesign]

Is there a way to have a different map zoom/center on mobile??

[Steven]

Hi @tburchdesign,

Thank you so much for getting back to us.

You could try something similar to the below custom Script:

jQuery(function($){
	if( /Android|webOS|iPhone|iPad|Mac|Macintosh|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
		jQuery(document.body).on("init.wpgmza", function (event) {	
			var mobileZoom = 13;
			var mobileCenter = {
				lat: -33.8469759,
				lng: 150.3715249
			};

			WPGMZA.maps[0].setZoom(mobileZoom);
			WPGMZA.maps[0].setCenter(mobileCenter);	
		});
	}
});

This after testing at my end locally does appear to target mobile displays and then does not target desktops.

I hope this helps?

Kindest Regards,
Steven De Beer

[Author]

Posts