According to Google Map documentation. In IPhone
Zooming is accomplished by a two finger pinch.
So when i tap my fingers on screen and move then map getting zoomed but after that when i release fingers from screen then zoom that i see before the map reloads is a lot more than the actual zoom that renders.
Currently, I am testing that on IPhone 5 with ios 7.1.2 and IPhone 4S with ios 8
I am using JQuery Mobile Framework in my app and the map is generated dynamically.
(when i create map with fixed values then it works fine)
I created fiddle in which you can see same problem.
Link
Some picture of my issue
First picture map opens
Second picture when i try to zoom my map with finger pinch.
Third picture when i released my finger from screen.
So it cannot maintain its zoom level that show in second picture. How to solve this problem
Please try replacing:
google.maps.event.addListener(mapClass.map, 'zoom_changed', function() {
mapClass.map.panTo(myLatlng);
});
with :
google.maps.event.addListener(mapClass.map, 'zoom_changed', function() {
mapClass.map.panTo(mapClass.map.center);
});
Hope it helps.
I resolved this issue (or possibly a very similar one) buy throttling the work I did in the zoom_changed listener. I used lodash throttle.
Replace this
google.maps.event.addListener(mapClass.map, 'zoom_changed', myFunction);
With this
google.maps.event.addListener(mapClass.map, 'zoom_changed', _.throttle(myFunction,100));
Related
RESIZING HERE MAPS-HELP
I'm building an Ionic app with HERE maps. When I change my phones orientation I call maps.getViewPort().resize(), but it doesn't work.I had set my div background where the map is to red and background is 100% width which is correct but maps don't scale.So I will be happy if you have some solutions.
Picture: Event when phones orientation is changed
Code of event:
Phone Screen :
Managed to find a solution. The problem was that screenOrientation function was called faster than maps would resize so adding a 250ms delay worked fine for me.
I'm using google maps api in my application. I found out different behaviour of scrolling in infowindow. In google chrome when there is an infobox opened with overflowing text, I can scroll it with the mousewheel. If I do the same thing with firefox or IE it starts to zoom in / out. I made a short comparision video to understand my problem better. https://www.youtube.com/watch?v=-MUerJFebOc
I like the 'greedy' gestureHandling, where I can use the mousewheel to zoom in desired situations. I don't want to use 'cooperative' gestureHandling, which somehow solves my problem. Do someone knows a solution/workaround for that? Thank you!
I am using mapboxgl as a mapping inside of my website. When users attempt to zoom in using two fingers on a touchscreen, the map zooms in, but then the entire website zooms in too. How do I make it such that if user uses two fingers to zoom in on map, that it does not zoom in the entire webpage?
I had the same issue when developing mapbox app for a windows10 kiosk. This can be fixed my specifying touch-action as none for mapbox container div.
#map{
touch-action:none;
}
I'm pretty new to the Google Maps API.
I'm building a simple Maps App for our TV platform here at work, the TV uses a custom webkit browser and I've confirmed that the Maps API works well on it.
Currently when you load a simple app like this on our TV (Code is given in below links):
http://markpaul.name/dont-delete/other/sample-maps-app.html
You first need to use the mouse to "click" on the screen to "focus" the map. Only after this, the map embed "activates" and you can use the up, down, left, right keys to navigate the map.
The problem I have is this; on a TV you dont have a mouse so you cant "click" to "focus"!
Is there anyway you can programatically "focus" the Google Map so I can use the arrow keys on the remote (which usually map to the keyboard up, down, left, right keys) to navigate the map?
Thanks in advance,
Mark
UPDATE:
My code can be seen here - http://codepen.io/newbreedofgeek/pen/EaugH
The full screen app in codepen is here - http://codepen.io/newbreedofgeek/full/EaugH
The hosted full screen app (minus autogenerated CodePen markup in full screen codepen view) is here - http://markpaul.name/dont-delete/other/sample-maps-app.html
I checked you source code and my feel is that somewhere the map's position is getting changed. So by triggering the Google map's resize it would fix your problem.
google.maps.event.trigger(map, 'resize');
Add the above code after initializing the Google maps. This would fix the problem.
I've checked other questions on StackOverflow relating to setCenter and google maps in IE8 but none of them seem to describe the problem I'm seeing. My javascript code constructs map objects inside collapsible divs, and due to the implementation of google maps a resize/re-center operation is required when showing the divs.
The code works fine in IE9/10, Firefox, Safari and Chrome, but doesn't work in IE8 - the resize works OK but the map is not centred, rather the marker appears at the top left, just outside the viewable area (suggesting that the setCenter call is doing nothing).
Resize/center code below:
var center = map.getCenter();
google.maps.event.trigger(map, 'resize');
map.setCenter(center);
Never got to the bottom of why this doesn't work under IE8. In the end I coded an unpleasant hack which detects IE8 and pans the container manually to center the map, but I'd love to replace it with something less ugly if anyone has a solution...