IE11 cannot handle the WebGL version of Google Maps. For example, try dragging the map around on this page:
https://developers.google.com/maps/documentation/javascript/examples/map-simple
If you visit maps.google.com, however, you will see it uses lite mode (canvas) and it works much smoother. If visiting that page doesn't use canvas mode automatically, go to this URL:
www.google.com/maps/preview/?force=canvas
I'm developing against the Maps javascript API, so I need to know how to force this mode so my IE11 users aren't met with a terrible experience.
Any issues you are seeing with the simple map example noted above are unrelated to webgl: The JS API currently uses WebGL only for displaying Street View, and then only for certain OS/Browser combinations (and not currently ie11).
I was able to view the page in ie11 on a VM and it seemed ok. Given it is not a webgl issue, can you be more clear what problem you are having in IE11?
Use:
GoogleMapOptions options = new GoogleMapOptions().liteMode(true);
You have more information at:
https://developers.google.com/maps/documentation/android-api/lite
Related
Short version: Kieth Clark has a 3D html fps shooter demo. It uses 3d tansforms on html5 elements to produce a 3D world experience. It is not VR. Is there an API to view it stereoscopically?
I have a similar engine. I came up with a way to view it stereoscopically using Cardboard-style viewer, 3D TV/Monitor, or red/cyan anaglyph glasses. I had to use a pair of iframes, however, and load a copy of the "world" document into each frame, however.
This doubles the load on the gpu, however, requires duplicates of all changes to "the world" for both iframes, and workarounds for focusable items such as textareas. This all works great, but diminishes the capacity for detail without RAF noticably slowing down and getting jumpy. Especially true in Firefox on mobile, and of course there is also the added problem of security limitations on iframes.
If theres an API to just view and control a 3D html5 page in stereo without explicitly duplicating everything that would make things a lot simpler and more efficient.
I'm using a Google Chrome on Galaxy Note 3 as my standard-level target-device, if anyone needs to know.
Long version (old):
I have a 3d game I'm writing with native html5/css3/javascript. It is primarily for mobile and already contains a fully-functional camera system with the ability to zoom in or out of first-person, second-person, overhead etc, rotate the yaw and pitch of the view, as well as location on the map around the avatar, etc. Is there an easy way to view it stereoscopically? It will be embedded in an Android app, or at least accessed through one, or through Chrome as a web-app. I thought Chrome Dev with VR Shell would be a possibility to try it out and hopefully integrate into an app eventually. Not having luck with that yet. Theoretically, I just need to be able to view an ordinary html5 page that has css3 3d transforms. For example, if you had a 3d cube made of divs or whatever, to view it with two points of view, one for each eye, without changing anything in the page itself. Basically, if you could view anything 3d in the page stereoscopically, much like the VR Shell sounds like, it should work. All I seem to come up with is how to turn on the flag in Chrome Dev, but I'm not seeing anything to actually activate it. It's been fully restarted etc. The page is already 3d and fully-functional with orientation control in first-person or otherwise. All I seem to find are how to turn it on or about 3d videos. Can this be done in Googles VR libs for Studio without using all the other stuff? I just need the second eyeball.
Ok. Was hoping an api existed for this, but my solution was to make a parent document with two iFrames and load the doc with the 3d tranforms into both iframes. Then offset the perspective-origin in each about 1% (i.e. 49% in one and 51% in the other). Worked great without added mods using device orientation, but obvi not for mouse control. Ideally, both iframed documents should be controlled from js in the parent doc. Downside is you have to control two objects for every change, and complications arise if you have inputs or textareas that take exclusive focus. Fixed all that, but this is the down-low version of the solution.
I'm trying to work out whether a certain website is using WebGL. I'm comfortable using Chrome's developer tools, but I'm not quite sure what I'm looking for. I see various variables and classes with "webgl" in the name, but no call to initWebGL() for instance.
Is there a reliable, perhaps simpler, way to tell?
First, there should be a <canvas> element in the body. If not, it can't be WebGL.
Second, open the chrome debugger and press Ctrl+Shift+F (Command+Option+F for MacOS). At the very bottom, expand the search pane if necessary. Search for "bindBuffer". You absolutely must bind buffers to do anything with WebGL. It will be used.
Its been awhile since the original question but thought I would share:
If you use the "Profile" tab in Chrome Dev Tools, and record a second or two you should see in the results a row with the name "GPU". If there is a <canvas/> in the DOM, but it's not using WebGL, the GPU row won't be there.
With WebGL
Without WebGL
In Google Chrome Version 97 this worked for me:
Open the "Elements" tab in Chrome DevTools
Select the <canvas> in the DOM which you want to inspect, so it shows == $0 next to it (see screenshot below)
Open the "Console" tab in Chrome DevTools
Enter $0.getContext('2d'), when it shows null then it's a WebGL-powered canvas, when it shows CanvasRenderingContext2D then it's a plain 2D canvas
Here are some sites to try:
WebGL Canvas - https://get.webgl.org/
Non-WebGL Canvas - http://www.professorcloud.com/mainsite/canvas-nebula.htm
Screenshot:
I have a problem regarding use of Google maps api.
When I use api source as
https://maps.googleapis.com/maps/api/js?v=3.9&sensor=true&libraries=places&callback=LoadMap';
then in my application pinch to zoom is not working. or in fact sliding of map is not working properly(it slides to one direction and sometimes doesn't even slide. many issues).
but when I use api source as
https://maps.googleapis.com/maps/api/js?key=XXX&sensor=true&libraries=places&callback=initialize";
then pinch to zoom is working and even sliding is working properly. But if I replace this with above 'api source' then info window that I created for above api is not opening.
Any Suggestion ? What to do. Is there any other api source I should use ?
Yes, 3.9 is older version and has pinch zoom broken on safari.
Try upgrading to a later version, or simply use the latest version like you have put on the non-versioned url
I am working on a store locator web app and I have a problem with the scroll. The scroll/zoom works only if I scroll really intense.
This problem is on their demo codes as well:
https://developers.google.com/maps/documentation/javascript/examples/
https://google-developers.appspot.com/maps/documentation/javascript/examples/map-simple
But if you scroll on http://maps.google.com/ the scroll works really well.
Do you know any solution for this?
Stated in my comment to the OP:
I've observed this in IE8 and maps api v3. This is due to the tiles fading in and out, as far as I can see so I sniff browsers and if my users are using IE8, I serve them up a v2 map where the scroll/zoom works much much better. As far as I know, there's no way to turn off the tile fading when zooming/panning in v3
I'm working on a prototype system which will act as a proof of concept that an existing system can be made a lot more interactive.
It basically emulates our main software package but over the internet using JSONP requests to update a load of images and Raphael vectors to make it look like everything's running.
I'm having trouble on Chrome however with Raphael not drawing vectors "off-screen". What I mean by "off-screen" is that the main app runs through an iframe as it relies on cross-domain long poll comet through AJAX to get communicate back and forth. Below is an image demonstrating what I mean.
Here I've scrolled a long a little bit in the iframe to look at the bits "offscreen" and you can hopefully see that the grey arrows aren't rendered. I've used Chrome's developer tools to highlight over the SVN tag, showing that it's only given 450px by 810px to the SVG tag, which is the same size allocated for the iframe.
It's worth pointing out that it renders fine in Firefox. Any ideas?
I've had a similar problem and found a bug report for the WebKit project that seemed related:
https://bugs.webkit.org/show_bug.cgi?id=64823
According to the comments, it's a bug in the rendering engine and there's no workaround aside from losing the iframe or resorting to other means of scrolling the SVG viewport (like moving all the elements within the SVG element).
On the upside, version 16.0.912.21 has been released to the beta channel today and it seems that the bug has been fixed. I've also checked the latest chromium build (17.something) and the bug hasn't resurfaced. I'm guessing the fix should find its way into the stable channel in a couple of weeks.