Mobile vs Desktop map scrolling

New home Forums Pro Add-on General queries Mobile vs Desktop map scrolling

Tagged: ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #61162
    Suncast
    Participant

    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!

    #61166
    Steven
    Moderator

    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

    #61188
    Suncast
    Participant

    The CSS code you provided did the trick.

    Thank you!
    David

    #69243
    tburchdesign
    Participant

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

    #69252
    Steven
    Moderator

    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

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.