As users view my site on mobile, sometimes they get into a situation where Google Maps scrolls into view and covers up the entire page. They can no longer scroll away because as they swipe up or down they'll only pan the view in Google Maps and not scroll the webpage.
Traditionally my fix on mobile was this:
var mapOptions = {
draggable: false,
panControl: true,
}
That basically disabled swipe events on Google Maps so users can swipe to scroll the webpage. If users want to actually pan the map they can click on the pan button UI.
As of version 3.22, Google Maps API has disabled the pan control button see official google doc. This creates a big problem for me - There is no other way to pan the map if I disable "draggable"
How can I let users have the ability to scroll the webpage using swipe gestures while also let them pan the map if they want to?
This completely depends on your your site's design/flow. I can offer up a couple solutions that I had to implement based on a similar situation to yours.
1) If the map is not a main content of your page, you can simply check if the browser is a mobile browser and replace the map div with a static map image that when clicked opens up a page dedicated to the map.
2) You can layer an action on top of the map that toggles the disabled property of the map via map.setOptions({draggable: true/false}); so the user can switch this on and off themselves.
This previous answer works. And allows it to be draggable for non-touch devices.
var myOptions = {
// your other options...
draggable: !("ontouchend" in document)
};
map = new google.maps.Map(mapElem, myOptions);
Related
On my demo website I am using a Leaflet map on which I have disabled one finger panning to improve user experience on mobile platforms.
var map = L.map('myMap', {
dragging: !L.Browser.mobile,
tap: !L.Browser.mobile
}
This works fine, the website visitor can scroll past the map without troubles.
The problems start when the user wants to pan the map using two fingers. Such moves also scroll the website making the map effectively unusable.
Is there any way to prevent the user to scroll the website while panning the map using two fingers?
touchZoom:!L.Browser.mobile probably fits your needs.
https://leafletjs.com/reference-1.7.1.html explains touchZoom :
Boolean|String : Whether the map can be zoomed by touch-dragging with
two fingers. If passed 'center', it will zoom to the center of the
view regardless of where the touch events (fingers) were. Enabled for
touch-capable web browsers except for old Androids.
I'm working on a touch device and when the user zooms in which a pinch gesture, the page zooms in instead of the map.
I'm using a leaflet map with javascript.
One potential reason would be that the Map container may not have been active. Tap on the container and then try zooming in
What worked for me was running Google Chrome in kiosk mode. In kiosk mode I set the parameter for --touch-events. After I tried this, I could zoom in and out without the page doing the same ting.
I have a Google MAPS which is embedded on a web page thanks to Google Maps API v3.
On tablets (and smartphones), when the user wants to "move" the map, then the map is moving which is what I want, but the web page is ALSO moving (scrolling). That is producing a really weird behavior, which makes the map almost unusable.
I mean that if you want to move the map (scrolling with your finger from top to bottom for example), then the map will move (to the top) but ALSO the whole web page will scroll (to the bottom).
I searched a long time and have tried different things, but the problem is still there.
What I have tried :
Playing with draggable/scrollWheel but seems that it's not the point (for you information draggable is set to "true" and "scrollWheel" is set to false).
Disable "touchstart" and "touchmove" event on the div container (#map) of the Google Maps, but when touching the maps on tablets, it still moves the map AND the web page.
What I want, basically, is that the user can ONLY move the Google Maps when he is touching the Google Maps, not the web page.
Any help will be really appreciated.
Thanks a lot..
If this can help, here is the web page : http://www.acheter-neuf-toulouse.com
If you launch the page with a tablet (not a smartphone : the map only appears above a certain width of screen), then you will see that the moving of the map with a finger is totally weird (the page itself is moving)..
I want a marker to stay at the center of a map regardless of how the user drags. I've made this work in a Desktop browser like Chrome by updating the marker when the map fires a center_changed event:
http://jsfiddle.net/hu9fj/
However, the marker does not stay centered while dragging occurs in Safari with iPhone 4 or 5. Try the Fiddle out on an iPhone or simulator to see what I mean. I've listened to a variety of events to no avail.
I've even tried manually updating the marker every millisecond:
setInterval(function() {
marker.setPosition(map.getCenter());
}, 1);
which keeps the marker centered on a Desktop browser, but again fails in mobile Safari.
How do I keep the marker at the center of a Google Maps v3 API map while the center changes in a mobile browser?
I have a website that displays a mashup on Google Map. When I try to zoom into the map on a mobile web browser, the page gets the zoom instead on most occasions. Is there a HTML, CSS or javascript method that prevents the page from zooming while my fingers are touching the map?
I tried <meta name='viewport' content='user-scalable=no'>, but that prevents the map from zooming as well.
This can be done by using Gesture events.You can call touchstart event, and then call
e.originalEvent.preventDefault(); //if you are using JQuery
this prevent your page from zoom in.