I have a google maps window inside my home page. It works perfectly in a PC, but in a mobile device dragging the map drags the page below it and not the map.
You can test it here (click the "GPS Map" button at the top right):
http://luis.impa.br/photo/1407_Obidos/index.html
Any idea how to fix it?
Thanks!
L.
This is not a full answer, but a partial one.
I realized that the dragging of the map is disabled when the browser is set to some kind of "desktop mode", i.e., when the browser identifies itself as working in a non-touch device. So Google maps understands that there is no touch screen.
So, in order to drag maps, you do need to assure that your browser is not set to a "desktop mode".
Still, I don't know (or even if it is possible) how to allow dragging of the map under "desktop mode".
Related
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.
We are working on a webpage that is currently having issues with split screen resizing.
When we change the orientation of the page on a mobile browser or do a window resize on a desktop browser, we are able to run the required updates fine because we listen to the resize and orientationchange events that get fired with either type of event.
However, we just realized that with split screen on Android (and possibly split screen on iOS tablets), we aren't triggering any resize events for the window and therefore can't do proper updating of our elements based on the split screen being activated or updated (when the user moves the split).
Is this something we can work around or am I just completely missing some functionality that I should be using?
I have looked around online and haven't found anything related so far that I could use from our JS.
Thanks! Any pointers would be greatly appreciated.
Information about Multi-Window Feature in Android - doesn't go over any possible ways to detect it from a web view though, but looks at it from an Android app dev perspective
On macOS, it's possible to use the gesture "pinch to zoom" with the trackpad to zoom onto a page.
This feature works correctly on Chrome when the page is not in fullscreen. It also works correctly when triggering the fullscreen using the upper-right green button of the Chrome window.
However, when triggering the fullscreen programatically using the HTML5 Fullscreen API (webkitRequestFullscreen -- https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API), the "pinch to zoom" gesture is disabled.
It's possible to test this out here: when triggering fullscreen using the upper-right green button, "pinch to zoom" works; when using the "Request document", it won't work.
It seems like there are two different fullscreen mode on macOS, but it's hard to find any information on it.
This seems to be intentional behaviour, at least on Mobile. See the discussion at https://bugs.chromium.org/p/chromium/issues/detail?id=736520.
Generally, pinch to zoom is meant for legacy websites. If you want some zooming capability in a fullscreen gallery, you will have to code it yourself.
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've integrated Bing Maps into a web page using javascript. Simple integration of Bing Maps.
I'm having an issue where when they click on the map, the keyboard comes up (on an iphone). How can I stop BingMaps from popping up the keyboard?
Thanks,
Gob
A little late, but I just ran into this problem and figured out the solution:
Bing maps allows keyboard shortcuts (i.e. you can type R, A or H to switch to Road View, Aerial View or Hybrid View, respectively). To do this, it seems like they add a transparent input field nested inside the div you render the map in. Because of this, on iOS devices, tapping the map causes the keyboard to appear since it thinks the user is typing in a text field.
To fix this, simply add the following CSS:
#wl_ve_mapInput { display:none !important }
This will hide the text field and stop the iOS keyboard from appearing when tapping the map. This problem also occurs on Android devices.
NOTE:
Obviously, you will no longer be able to use the keyboard shortcuts. A possible approach would be to add some code to only add the CSS if it's a mobile browser, or only iOS devices. This is fairly easy to figure out, but it's not part of the scope of the original question.