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.
Related
I have a web application that is essentially a map (mapbox) with some d3.js points overlayed, filters, etc.
My issue is that when zooming in on the map using pinch (mobile), when I accidentally pinch over one of the points, or one of the map pop-ups, the entire page zooms (i.e. scaling). This is a fairly common occurrence. I only want user to be able to zoom the map, not the page itself.
I've implemented:
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
I also tried user-scalable=0
And still the behavior persists. I've also tried this:
document.addEventListener("touchstart", function(e){
e.preventDefault();
},{passive: false});
document.getElementById('map')
.addEventListener('touchstart', function(e){e.stopPropagation()}, false);
But this is cumbersome and doesn't exactly work the greatest because it involved limiting event-listeners one element at a time. Shouldn't the user-scalable argument in the HTML be enough? I don't understand why this is happening.
Mobile browsers have no effect on user scalable because they over ride it to get people responsive experience on the mobiles.
Sites like google maps also zoom when we pinch in the site(expanding the ui elements as well as the map)
One way to override this response is to detect the pinch gesture and then re zoom the page to the normal level by a function such as:
function toggleZoomScreen() {document.body.style.zoom = "100%”;}
Shouldn't the user-scalable argument in the HTML be enough?
Depends on the browser/device. There are not many legitimately cases where zooming should be disallowed, so browsers will ignore it. Some browsers like Safari uses heuristics based on text size to decide if it should zoom or not... (where the solution is to set font-size to 17px or higher on input elements to prevent zoom)
First strategy would be to call preventDefault() on all mouse
events, like mouseup, mousedown, et.al (not just the touch events)
until you are able to block the zoom.
Second strategy is to take into account the zoom and scale the
images and point locations by the amount of zoom...
(Probably also want to take into account window.devicePixelRatio when scaling.)
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)..
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);
How can I get pinch-to-zoom to work properly in my Google Maps v3-based web app? Right now, pinching on a touchscreen Windows 8 device will zoom the whole page, not the map. I've tried this in both Chrome and Firefox, and it works properly on the Google Maps site, but not on my site.
I have the following meta tag in my <head> element, but it doesn't seem to help. Is there another meta tag I need to add? I checked out the source of the Google Maps site but couldn't find any meta tags that looked relevant.
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
this is most likely because you're using an overlay.
you can block pinch and drag by adding this code:
window.blockMenuHeaderScroll = false;
$(window).on('touchstart', function(e)
{
if ($(e.target).closest('#map').length == 1)
{
blockMenuHeaderScroll = true;
}
});
$(window).on('touchend', function()
{
blockMenuHeaderScroll = false;
});
$(window).on('touchmove', function(e)
{
if (blockMenuHeaderScroll)
{
e.preventDefault();
}
});
thanks to https://stackoverflow.com/a/17159809
If you don't specify explicit gestureHandling for the 2D Map then it can happen that the map element defaults to "greedy" behavior. This can surely happen if your map is not inside an iframe. With greedy behavior the map will hijack more gestures than in "cooperative" mode. See Controlling Gesture Handling.
When the gesture handling is greedy than you won't see the "Use two fingers to move the map" message over the 2D Map when you scroll over it with flick gestures. In such cases explicitly specifying cooperative gesture handling helps, although it may not fix the problem fully, because the issue is also browser dependent. Even with cooperative I may see a little page zoom on Android Chrome based browser, but the behavior is much better.
new google.maps.Map(document.getElementById("map"), {
zoom,
center,
gestureHandling: "cooperative",
});
As for #jimmy's answer below I'd highly disadvise handler manipulation JavaScript hackery, the good news is that there's native support on the v3 Maps API to disable pan and zoom or even restrict bounds.