I've disabled dragging on my Google Maps component, here's an example:
http://jsfiddle.net/qr2BJ/7053/
However when I'm browsing on my iPhone I can't swipe down "on" the map. So, when the map is taking up most of the screen, mobile users won't be able to swipe (scroll) down to view the rest of the page.
Is there a way to fix this, apart from sticking an extra empty div on top of Google Maps?
I had the same problem on android devices. As they are running on webkit I guess the cause is the same as for iphone. Anyways, a post on the following link addressed the issue and the first answer worked for me: Embed Google Maps on page without overriding iPhone scroll behavior
Related
I'm working on a couple of ionic apps that are communicating with each other. In order to demo them I run them side by side on a webpage embedded in iframes.
When displaying that webpage in Chrome it works just fine. However when showing it in IE on a touchscreen I can't scroll vertically inside those iframes. I debugged it a little bit and it seems that touch events that have vertical movements just don't get passed into the ionic app, whereas horizontal swipes and taps get passed down just fine. It seems like the vertical scrolling of the entire webpage absorbs those events without passing them down.
Has anyone encountered an issue like this before and can tell me if there is a way to fix this?
Thanks #Captn_Hammer for pointing me in the right direction. The fix is similar on IE. All I had to do was add this to the body of the webpage:
style="-ms-touch-action: none;"
I am working on a web application using Google Maps. Occasionally, when one zooms using the scroll wheel, an overlay (KML data) is not re-sized correctly. Except for using the scroll wheel, I have not been able to consistently reproduce this behavior.
A Google search on Google Maps and scroll wheel is returning several items on disabling zoom for the scroll wheel.
Some related map settings:
//Map Functionality
map.enableScrollWheelZoom();
map.enableDoubleClickZoom();
map.enableContinuousZoom();
Is the mouse wheel zoom so erratic that one should disable as a best practice?
I finally was able to repeat this behavior consistently. Once the map loaded, use the scroll wheel and aggressively zoom in. And do mean aggressively. If I zoom in at a moderate or slow pace there's no problem.
I commented out map.enableContinuousZoom(); and the problem went away.
Another issue I found related to this (for me anyway) was in Chrome (Windows 7) and compatibility with a Logitech extension for Chrome : Logitech Flow Scroll 4.0.33.
As soon as I disabled the extension, using the scroll wheel to zoom in/out started working correctly.
I'm trying to work out why the StreetView controls don't appear in Chrome browser when StreetView is opened programmatically but they do appear when StreetView is displayed by using the pegman...
Here's the map:
http://beta.findtoilet.dk/?term=2&lat=55.678937&lng=12.575738&zoom=15&maptype=roadmap
Drag pegman to show StreetView and it works perfectly.
You can see the top-right close button, the zoom and compass controls and the bottom left and right Google links.
Now open the infowindow by clicking a marker or a sidebar item.
The infowindow contains a link to open StreetView for that marker - give that link a click.
StreetView displays but none of the controls are visible, neither are the two bottom Google links.
Yet if you hover the mouse where the controls would be displayed the mouse click works just as if the controls were visible.
If you hover the mouse top right until it turns into apointing hand and click where the zoom control would be, the StreetView will zoom in or out and while zooming you can see all of the invisible controls.
Everything works fine with Firefox and IE9.
I'm using the latest versions of all browsers on a 64 bit Windows 7 pc, another person has reported the same problem on 32 bit Windows XP.
I've tried to use the Chrome developer tools but see nothing that would cause the controls to not be visible.
This usedto work fine in Chrome so i'm not sure if the problem is related to a Chrome update or a change in the Google Maps API - no changes have been made to the map javascript recently.
Can anyone suggest what might be wrong?
Thanks.
Martin.
The problem seems to be with -webkit-transform:scale(1) that you apply to the #toiletMap div[style].
Removing this, it fixes the problem..
alternatively, you can add translateZ(0) to fix the problem.
-webkit-transform:scale(1) translateZ(0);
Update
It must be related to
http://code.google.com/p/gmaps-api-issues/issues/detail?id=3928&q=webkit%20Transform&colspec=ID%20Type%20Status%20Introduced%20Fixed%20Summary%20Stars%20ApiType%20Internal
http://code.google.com/p/gmaps-api-issues/issues/detail?id=2835
webkit-transform overwrites z-index ordering in Chrome 13
I have a Windows 7 tablet (an ASUS EP121), and I am using a web browser to display a Google Maps-based web application that I have created. Basically, I want the pinch gesture to zoom the Google Map (similar to using the scroll wheel to zoom a Google Map when using a mouse), rather than zooming the entire web page.
In Opera, Firefox, and Chrome, the pinch gesture simply zooms in the entire page. This behavior makes perfect sense for most use cases, but I'm wondering if there is any setting, in any of these browsers (e.g., Opera, FF, Chrome) that can cause the pinch gesture to behave like a mousewheel instead of zooming in the entire page?
Interestingly enough, in Arora, the pinch gesture can be used to zoom in/out a Google Map; however, other issues are preventing me from using Arora effectively that I think will be more difficult to address than the issues I am raising in this question.
Another option would be to disable pinch gestures (I know this is possible in Firefox, I'm sure the other browsers have some means to do the same), and then try to let the application take care of it. Are there any thoughts on going this route? Would something like jQuery mobile be able to accomplish this?
As a last resort, I could use Qt's webkit and implement my own event handling (basically creating a stripped down Arora), but I'm really hoping there's an easier way that utilizes currently available browsers.
Thanks.
If anyone ever runs into the same problem that I had here, I have created a very simple WebKit-based web browser using Qt that implements a pinch gesture and uses it to fire off a scroll wheel event.
It works quite well (especially for Google Maps) and the source is available on github here. I've tested the code on Windows 7 and Ubuntu Linux 12.04; it works without any problems.
I used google maps api v3 to add a map to website. I turned off all the features and did an overlay of the united states. I turned off everything so that it can be zoomed in or panned. It works exactly how we want on the website, but when using and iPhone it can't be scrolled. How do I make it so that it is scrollable on an iPhone.
Thanks
I believe on the iPhone you need to use two fingers to scroll in things like iFrames, or divs with overflow:hidden. Maybe it's the same with your map.