Pinch to Zoom using Google Maps Javascript API in Android Browser - javascript

Has anyone gotten pinch to zoom to work for a Google Map in the Android Browser? It works fine in Android applications and I hear it works in iPhone's Safari Browser but I'm interested in getting it to work in a web app that's viewed via the Android Browser. Currently you can pinch zoom in but the map does not redraw (i.e. it just gets larger and pixelated). You cannot pinch zoom out.
Edit: It seems to be different on each phone:
Evo - Problem discussed above
Epic - Pinch to zoom out works, zoom in has problem discussed above
Galaxy S - Pinch to zoom in and out both work fine

At the current time, Google Maps API v3 (and any other JavaScript code, for that matter) cannot rely on receiving events related to pinch-to-zoom in JavaScript on Android browsers. See http://code.google.com/p/android/issues/detail?id=11909
If this issue is important to you, I recommend logging in, starring the issue, and leaving a good comment.
For what it's worth, I have not run across this problem in Honeycomb, which makes me at least slightly hopeful that Ice Cream Sandwich will fix this for the phones.

It seems that Android doesnt support multitoches events for javascript. It support only touchstart/mode/end events, but not gesture events so it dont support zoom in out, (for me doesnt work even on galaxy s). Maybe in the android 3.0 they will add this event to browser.

Related

Android: disable pinch zoom and pass event to Flash content

I have a flash application written in actionscript 2.0 that shows vector architectural maps and works perfectly on common web browsers. There are many interactions with javascript functions called by user events on the webpage, such as zooming to a certain x,y point. This event is usually accomplished via the mouse wheel.
Now I have to make sure that the thing works on tablet pc, in particular the Galaxy Tab. The first thing I have to fix is that, obviously, there is no mouse wheel and the user naturally tries to pinch zoom the flash application, with the result of zooming the entire web browser.
What I need is to listen to the multitouch gesture and, when a pinch zoom event is called, disable the default zooming event and call a javascript/flash function that allows my flash app to zoom only the objects that need to be zoomed: in few words, the browser stays still and only a part of the flash zooms in or out.
Consider that I am totally new to Android and that I already have working javascript functions to call flash object functions for the zooming purpose, so I just need to connect them to some android things that tell me when the user tries to pinch zoom in and when he tries to pinch zoom out (and possibly the x,y point of zoom).
Thanks a lot for your help!
Max (Italy)
Passing a JavaScript call from android to flash is a very very hard task as far as I know.
Not because of android (follow this tutorial http://code.google.com/p/openmobster/wiki/JavascriptBridge to pass a JavaScript call to a web page ), but because of flash securities for local content.
It is not too much of an issue on a local computer, but the flashplayer on android is very very buggy.
I think the best is to try to find an other solution if possible...

iPhone google maps v3 pans after pinch zoom

I have a problem developing a web application for iPhone. When I visit a simple example like http://code.google.com/intl/sv-SE/apis/maps/documentation/javascript/examples/map-simple.html in an iPhone and do pinch zoom the map pans when I release the fingers from the screen. This makes the map end up somewhere else than the place I zoomed to.
Is there some way to prevent the map from panning after pinch zoom release?
Unfortunately, the iPhone's use of touch screen technology - especially Cocoa - can have some odd effects when it comes to viewing a web app on a mobile device.
I cannot fathom why, but it seems like such multi-touch gestures, such as pinching, have a relatively odd effect on non-native applications.
The only thing I can suggest is using Objective-C and getting to work on porting your application to run as an app on the iDevice. This will remove the problems you are having, but it will not rid you of the issue that you are trying to develop a web app.

Paint on Canvas in Android's browser, page scroll?

I'm trying to make a canvas where the client can sign his name. It works well in Chrome v6:
but on Android 1.5 instead of drawing the browser scrolls the page and draws nothing:
I borrows the code from Opera's website.
Can I disable the scrolling or how can I make this work?
Thank you!
EDIT
using the events touchstart, touchmove and touchend:
on a LG GW620R using a stylus:
on a Motorola Milestone:
on a Samsung Galaxy:
EDIT 2
works better whitout using the finger nail
#Sirber There might be touchstart and touchend events just like in mobile Safari, have a look at that avenue too. And maybe if you adjust the viewport meta tag there won't be any scrolling, still won't draw but at least it won't scroll.
Good luck,
Mathieu
You're comparing the bleeding-edge in-development Chrome version to a stable 1.5 year old release of a parallel Webkit-based browser... of course there's better support for new HTML5 features in the much-newer experimental browser :) How does it render in a recent Android release (say, 2.2)? How about iOS?
There are definitely nontrivial differences between HTML5 browser support among Android releases (not to mention non-standard browser releases by HTC in SenseUI and the like). Check out the WebKit comparison chart at Quirksmode.
As far as viewport settings and disabling scrolling, Android's Webkit listens to most of the same settings that iPhone Safari does, and Apple has pretty good documentation on the settings you can use to tweak that.
You also may find this quirksmode post about supported events in mobile Safari helpful.
Canvas with iOS is really better (performances). Android browsers are far behind (doesn't work with opera-mini).
If you want to see the difference, just try with http://webdemo.visionobjects.com/ .
I'm just doing a quadratic smoothing for an handwriting input method with the HTML5 canvas-element.
tested with iPad1 & Motorola Xoom

Do Android/webOS devices support multi-touch Javascript events?

On iPhone, iPod touch and (presumably) iPad, Apple has multi-touch event handling available via JavaScript in Mobile Safari. I know the Nexus One recently added multi-touch support via an update, and I believe webOS is also multi-touch enabled. Do Android 2.1 and/or webOS have access to multi-touch in the browser, or is this currently exclusive to Apple devices?
The best master tracking for touch events (other than multi-touch! - answered above) appears to be:
http://quirksmode.org/mobile/tableTouch.html
Right now, Android 2.1 gets you pinch/zoom, but that's it. There's no fine-grained multi-touch tracking, like you get on iPhone.
UPDATE: MAY 2011 - Android Honeycomb 3.0 and 3.1 browsers now have proper multitouch
Please star this bug on the Android bug list:
http://code.google.com/p/android/issues/detail?id=11909
Let's see if we can raise awareness of this issue.
On Palm webOS, you can get multiple touch events. You can receive up to five touch points at one time.
If you're doing native development using the PDK, handling multiple touches is described at http://developer.palm.com/index.php?option=com_content&view=article&id=1980&Itemid=337. Each finger is tracked as a separate mouse in the SDL events.
For Javascript developers using the standard SDK, there events that are sent to indicate that two fingers are in use. "gesturestart" fires when the user puts 2 fingers on the screen, usually to pinch or rotate, "gesturechange" fires when 1 or both fingers move on the screen, and "gestureend" fires when the fingers are lifted from the screen. These aren't well documented on the Palm developer site, but they're used in the mojomatters sample code.
Edit: looking at your question again, there is no "touch" event support in the browser on WebOS for applications delivered through web sites.
It depends on the browser. The browser on the HTC Hero, which currently runs Android 1.5 and HTC's customised TouchFlo interface, has always had multitouch. The 'Dolphin' browser has also had multitouch since before the Android 2 update. That said, I've never tried using the multitouch for anything but 'pinch zoom' so it might not work with a specific Javascript or something like that.
It depends on the device. But I think the current Android 2.x device got all multitouch.
On the Samsung Galaxy Tab I have tried the Android 2.2 Browser, Dolphin HD 4 and Opera Mini 5. The closest implementation to what I'm looking for is http://anders.com/cms/352/OpenLayers/iPhone/Android/Touch.Gestures (demo ending in '/touchmaps' on that page) which works with the Android 2.2 browser. This does touch pan only with the Android device but no pinch zoom gesture capture in Javascript which is what I really need.
Firefox 4 has the best working and best documented javascript multi-touch API. This is currently implemented in Firefox 4 beta 3 (unfortunately only on Windows 7). I have FF4 beta 2 running on the device but it doesn't have the multi-touch support yet.
I am hoping FF4 b3 for the Android will do what I want, and that the other browser implementation will follow suit. Until then it's just a wait and see.

Flash: Using mouse wheel events in full screen mode (Windows and Mac)

Although Flash has a mouse wheel event (MouseEvent.MOUSE_WHEEL), it comes with quite a few problems.
The first is that the event is not yet supported on the Mac. So there are a bunch of solutions, all of which (basically) capture the mousewheel (or DOMMouseScroll) event in javascript and pass it into the flash app. Luckily, under all the Mac browsers I tested, this also works when flash is in fullscreen mode.
Problem 2 is that flash ignores mouse wheel events with small "deltas". For example, Microsoft's IntelliPoint Mice with "Smooth Scroll" causes this problem. A solution to this is the same as the solution for the mac... i.e. capture the javascript mouse wheel event in the browser and pass it to the app. The issue is that of the browsers in windows that I tested (firefox, ie, safari, and chrome), they don't seem to capture this event when flash is in full screen mode. Does anyone know why or how to fix that?
I currently have a hybrid solution that always takes events from javascript (in non-fullscreen or fullscreen mode) except when it's in fullscreen mode on Windows (at which point it takes them from the flash mousewheel event). So the only times it fails is in full screen mode on Windows with a mouse that has small deltas. Anyone have a full solution? Or just a better one?
It's a know issue on adobe's JIRA. You need to wait'em to fix it, or use another event instead MouseEvent.MOUSE_WHEEL. It's not working on windows because the flash player implementation is completly different in windows from mac and linux. Mac and Linux uses GTK to implement the plugin Handle. On windows it uses a Win32API Common HWND, which steal focus on full screen mode, causing the non dispatching of scroll events on the browser. On Mac and Linux, GTK just stretch the plugin size into desktop's size, and don't do a real fullscreen. It's a GTK behavior inside these systems. Nothing can be done.
Your solution is one of the best. Only one is better - don't use mouse wheel :(
Adobe should do something with it (and with support for other controllers).
MouseEvent.MOUSE_WHEEL seems to work fine on mac since Gala beta and 10.1 final. i can trigger mouse wheel events using the magic mouse and track pad in both Safari and Chrome.
Pixelbreaker's MacMouseWheel has given me successful fullscreen scrolling on a mac, but I haven't used it in a while (on Safari 5 for example).
The downside is that it captures events for the whole page, so you will lose scrolling for the HTML even if the flash element is only a little box on the screen.
But you could basically switch between what you've built already, and what he's using in the macmousewheel.js when you've enabled full screen.
Hope that helps, good luck.
You could try using the simple AS3 class MacMouseWheelHandler at http://blog.earthbrowser.com/2009/01/simple-solution-for-mousewheel-events.html which makes it so you don't have to integrate with Javascrpt. It injects the Javascript right from Actionscript.

Categories