Develop Reference

Google Map pinch not working on Microsoft Surface

Perform a pinch operation on the Google Maps Custom Controls, Pinch does not work.
How can I change the zoom of the map in a pinch?
Example
https://map-sample-dot-cp300demo1.appspot.com/sample/index.html
Environment
Chrome version 50.0.2661.102 m
Microsoft Windows 10 Version 1511(OS Build 10586.318)

The Google Maps JavaScript API has been designed to load quickly and work well on mobile devices. Mobile devices have smaller screen sizes than typical browsers on the desktop. As well, they often have particular behavior specific to those devices (such as "pinch-to-zoom"). For more information and sample code visit this link.
Try to follow the steps here in this discussion to work the pinch in Microsoft Surface.
Steps we Followed:
Launch the Win8.1 VDA on a Surface pro1 / HP Elite Pad in Windowed mode.
Open the IE browser within the session and open Google Maps .
Try to Pinch / Zoom the google Maps within the desktop session.
Also try to check this SO question for more information.

Android wevbiew show Google Maps locked until touch pressed

Using the android webview component for show Google Maps through API v3 it seem all the map "engine" is locked until touch is pressed. I tested the default browser also. If I go to the google maps web site and start move the map touching the screen is there always a point where there is a gray area of the map still not loaded. In standard Desktop browser this "missing" part is loaded instantly but under android webview this part remain unloaded for all the time of touch pression. If I stop touch the screen this missing image is loaded. This is a very bad behaviour mainly because the same problem happen also with javascript code. I need to get the google maps api "center_changed" event on real time but cause this problem the event is not delivered for all the time the touch is pressed (moving the map). The event is delivedered only on touch leave. Someone noted this strange behaviour and know a workaround for enable "real time" interaction through javascript code?
Thank you

Google Maps' scroll wheel feature doesn't work in Safari

I'm using Google Maps Javascript API version 3 and in all browsers except Safari (I have version 7.0.1), the map can be zoomed in & out using the mouse wheel. I have a Logitech mouse.
Also, I'm displaying this map inside an iframe. So in Safari, its only because of iframe that the map doesn't zoom in & out using mouse wheel, otherwise it does.
Is this a known issue of Safari or is there a separate fix possible for it?

Ok, I finally solved it! I simply had to add onmousewheel="false" attribute to the iframe.

three.js - Help adding pinch zoom to css3d_youtube demo - trackball controls messing up camera position

I'm trying to sell my boss on using three.js to create a CSS3D interface integrated with video providers (like YouTube). One of the requirements is showing it on a mobile device - I've chosen an iPad since the Android tablet is quirky.
Since my demo is scheduled for this Thursday I thought the quickest thing to do was to show him the wonderful css3d_youtube demo.
The problem is it is not configured to use gestures (touch pinch zoom) and I'm having a hard time doing this.
I also needed to add a few things like a background image and the ability to have the YouTube player go full screen so I had to take the original code and modify it. I saw the periodic table is so I decided to use the TrackBall controller in my code. You can see my modified code here
The trackball controller seems to shift the camera's y position. You can see the actual page I created here if you view in a tablet. I used the Modernizr library to recognize if the device is touch screen so you wont see it just by using a desktop browser.
If it would be more helpful I can remove that condition so it can be seen in a desktop browser.
If I remove the code that is messing up the camera position (you can see where I do this my searching for Modernizr.touch in the code) the camera is no longer centered to the video poster image when clicking on the button.
I also tried just regular JavaScript gesture events by adding this function:
function onPinch(e) {
move(e.scale)
}
and calling it in an event handler:
`document.body.addEventListener('gestureend', onPinch, false)`
but that was a disaster. The CSS3D objects rendered very slowly.
Can someone help me add pinch zoom functionality to the css3d youtube demo? Or at least offer some advice on how to proceed? I wasn't able to find anything to help via Google -ing

Looks like TrackballControls.js has been updated to support touch zoom gestures.
If any one else is having this problem, just get the latest version.
The CSS3D periodic table and youtube examples seem to have been updated too.

How does the iPhone Google image search touch-event functionality work?

When I do a Google image search on my iPhone within the Safari mobile browser, it gives me this beautiful interface for flipping through the images. If I swipe left or right, it browses through the images. If I touch and move up or down, I get what appears to be the native Safari scroll function. Can anyone explain how Google does this? I'm only beginning to learn the Safari API for touch events. It seems like either you capture the touch event to attach handlers to swipe left or right or you let Safari handle the touch events natively, in which case you get the beautiful native Safari scrolling. Can anyone explain how Google captures left/right swipe but not scrolling?

There are touch-specific DOM Events. They've implemented a lot of JavaScript logic around them. Read the Safari Web Content Guideline: Handling Events Docs Also checkout out the official spec for Touch Events
A while back, I wrote a quick library to wrap some native-like gestures as HTML events JSGestureRecognizer. I don't really recommend using that library in production, but reading the source should give you a pretty good idea about how google went about listening to native Touch Events and doing complex user interfaces with them.