So, this question concerns only the old android browser (before chrome became the standard browser) and the google maps javascript api v3.
I am developing a website, together with an app with a webview, showing (parts of) that website.
Lately, the google map windows that are included in the website have stopped working properly. The map shows up, but any touch event on the map, like dragging the map to show other locations, as well as two finger zoom are not working anymore. the error that is shown in the javascript console (on every touch event on the map) is:
Uncaught TypeError: Illegal constructor -- From line 125 of http://maps.googleapis.com/maps-api-v3/api/js/26/2/intl/nl_ALL/common.js
After a days of looking for bugs in my code it seems to me that this could be a bug in the google maps javascript api. The error occurs not only on my website, but on all embedded google maps that i could find. Even in google's own api documentation.
The error only occurs in the old standard android browser, but old android versions are still in use quite commonly, and i cannot tell my users to switch to another browser because it has to work in a webview as well.
I could reliably reproduce this issue on a samsung xcover 2 (gt-s7710, android 4.1.2) and an api 17 simulator (android 4.2) in this link: https://developers.google.com/maps/documentation/javascript/
Has anyone else encountered this problem and/or found a workaround?
EDIT:
I filed a bug report to google that got accepted, so in the meantime i guess Dvy Hrnsch's workaround is the best solution!
i had the same problem as you described.
Explanation:
At least i found a simple workaround (after hours of headache).
I just found out, that Google Maps Javascript API has 3 API References.
The "Experimental Version", "Release Version" and the "Frozen Version".
If you include the API without specifying the exact version, it will use the "Experimental Version" by default.
As i noticed, this version (3.26) got an Update on 30. of August 2016 which seems to cause the bug.
SOLUTION:
Just change your API from:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=API-KEY&libraries=geometry,places"></script>
to
src="http://maps.google.com/maps/api/js?v=3&key=API-KEY&libraries=geometry,places"
Now its using the "Release Version" (last change on 17. of August 2016) of the API.
Source: https://developers.google.com/maps/documentation/javascript/versions
For me it works now on Android 4.3 (API Level 18) with cordova.
I hope this helps you also.
Best wishes
Got almost crazy before I found Dvy Hrnsch's answer. I want to add some information that could be useful in this matter:
Android applications using WebView 534.30 and maybe older (being part of Android 4.3 and older) fail to give Google Maps its full functionality if the v=3 parameter is missing. Although the charts are being displayed correctly and zooming in and out by pressing [+] and [-] is possible pushing the chart or using the click event is not possible.
With newer Android versions (that use WebView 537.36 or younger) these problems don't occur.
Tom
Related
I noticed this today in my Chrome.
Google Meet is showing a chart of CPU usage in their "Troubleshooting" panel. I'm wondering if there's an existing API for this or is it a clever trick I'm not aware of.
I was curious about this as well when I saw the CPU Usage graph on the Troubleshooting page on the Google Meet's page. So googled a lot and I couldn't find any proper answer as to how it is being achieved apart from this link: https://developer.chrome.com/extensions/system_cpu#method-getInfo.
So, I went through the minified source code of the Google Meet's site and it turns out Google Meet is using this but not on their webpage directly, because it is for chrome extensions only, but through the Google Hangouts Extension which is present in Chrome, Brave and the new Microsoft Edge (Chromium-based).
The chrome extension is calling the chrome.system.cpu API to get the information about the processor, core count, temperatures, etc., and these details are being passed to the Google Meets page via window.postMessage API and Message Passing between Chrome Extension and a Webpage.
This is a neat little way to achieve this if you are the creator of the browser :P.
Most probably, they are using Chrome specific API since this will not work on other browsers.
The closest thing that I've found is https://developer.chrome.com/extensions/system_cpu#method-getInfo
Below is a screenshot from Firefox stating that this will work only on Chrome.
I am creating one web application. It has one print link on it which calls
window.print();
function of javascript. It works fine in Chrome and Safari. But its not working in the Samsung Stock browsers in android. Please suggest how to initiate print in these browsers.
As indicated in the window.print() documentation, the command is not supported on Android devices. You can use the Google Cloud Print Web Element to add print functionality. You will need to implement a browser sniffer to determine which device is being used.
An online search will most likely provide you with options utilizing NavigatorID.userAgent property, however, this has been deprecated and may not work in the near future. Feature testing is probably your best option.
Hopefully this will help you get pointed in the right direction.
I'm writing a web application (JavaScript, angularJS, etc) that runs better on Chrome, so it tries to launch it when, it's running on Android and it's opened on the default Android Browser.
If Chrome isn't installed, I want it to go back to the Android Browser (instead of the Google Play store).
So I'm using an intent of this form:
intent://localhost:3011/#Intent;scheme=http;package=com.android.chrome;S.browser_fallback_url=http://localhost:3011/?intent=no;end
My problem is that when I run this on my android tablet (no-name, Lollipop 5.1.1, Default browser: Chrome 39) it doesn't work. When I use the separately installed Chrome (trying to load, e.g. firefox which isn't installed) it works.
So in order to proceed I need to know if I'm doing something wrong, or if there's some other reason.
My question really boils down to this: should the browser_fallback_url work in the old default browser, or is it a newer feature in Chrome (so it's useless to my use-case).
Thanks.
I worked on this and wrote about it and updated the official documentation it was introduced in Chrome 40.
I would like to bring up the Android Share menu from Javascript in Chrome for Android.
I know that you can launch a specific app from Chrome:
https://developers.google.com/chrome/mobile/docs/intents
Is there a way to use href="intent://..." to open the Share menu?
This is how it is done in an app: http://developer.android.com/training/sharing/shareaction.html
There is navigator.share as an experimental technology mentioned in MDN.
Also described more in Google Developers page.
From chrome 61 you can do this, here is demo I found online. I've tested it on latest Android Chrome (on Android Oreo) and it works fine.
The quick answer is you can't.
I made this sample: http://jsbin.com/AdAPEmu/2 which constructs the Intent as it would appear for Android and Chrome doesn't recognise it, it needs a package to go with it.
This article, Triggering a native Share intent on Android from the web, may provide more details about why triggering intents from a web page doesn't currently work as well as it could.
So, yes, apparently you can make this work, but probably only with your own target applications (applications for which you have control over the manifest).
I was wondering if there are any useful tools people have found to debug javascript on an iPad which is not jail broken. It is an iPad supplied for work so jail breaking is not an option. Through some tedious steps I have gotten firebug-lite working on the iPad but my debugger statements in the javascript are not being hit. There is also no capability that I am seeing to set breakpoints as you can traditionally with Firebug.
I also have Safari's debug console open but that is fairly useless for what I am trying to accomplish.
Thanks for any ideas.
Did you look at webkit remote debugging protocol? It seems they know people want a debugger for their iPad but still no real world native iPad remote debugger is available out there.
But don't get disappointed, there is a tool called weinre that doing what webkit folks willing to do in the future right now!
Update:
By release of Google Chrome for Android phones remote debugging and tablets debugging mobile web apps is no pain anymore. You will need an expensive Google Galaxy Nexus phone with ICS on it to do it. But future is bright! Check out the video demo here:
weinre is Web Inspector Remote. Pronounced like the word "winery". Or
maybe like the word "weiner". Who knows, really.
For those coming to this question from Google, there is now a Web Inspector available in iOS Safari (scroll down to "Safari on iOS"). Note that it requires a Mac computer to use.
Have you tried Firebug Lite?
I haven't used it on the iPad, but I don't see why it wouldn't work.
I'd probably set a conditional include based on if a query param is set - for instance (php)
<?php if(isset($_GET['debug'])): ?>
<script type="text/javascript" src="firebuglite.js"></script>
<?php endif; ?>
Try iDebug. You can direct download it from AppStore onto your iPad. Here's the AppStore Link.
I have recently written a tool for showing console logs in a movable/resizable "window" (actually a div). It provides similar functionality to Firebug's console but you can see it over your page on a tablet. Tablet/Smartphone/Phablet Debug Console
You can also use Firefox's built in WebIDE with Valence
Plugin your device > in Firefox click on the spanner icon > find WebIDE > under "OTHER" click on "Safari, Firefox, and other WebViews on iOS"
[1] https://hacks.mozilla.org/2014/11/mozilla-introduces-the-first-browser-built-for-developers-firefox-developer-edition/
[2] https://hacks.mozilla.org/2014/06/webide-lands-in-nightly/
[3] https://developer.mozilla.org/en-US/docs/Tools/Valence
There is actually a way to debug a website in Safari on iOS using Firefox WebIDE on a Windows machine. I wrote an answer at https://stackoverflow.com/a/35714835/306179 further describing this solution, as it was not necessarily straightforward to set up and use. It does not provide all the Developer Tools you would expect from, for instance, Chrome's DevTools suite, but it at least gives the Console, Inspector, and Debugger.
If you have an Apple Mac computer, you can connect it to your iPad.
First you must ensure that you have the Web Inspector enabled ("Settings > Safari > Advanced" and turn on "Web Inspector").
Then connect your iPad to your Mac via an USB cable.
After that I can choose in the "Develop" Menu of Safari to debug the website displayed on my iPad/iPhone.
Source of images and original information:
https://webdesign.tutsplus.com/articles/quick-tip-using-web-inspector-to-debug-mobile-safari--webdesign-8787
Not sure if I'm allowed to re-post my answer from another question, as it's often frowned upon, but in Debug iPad Safari with a PC I posted 3 options of JS console and logging tools that can assist with troubleshooting issues on iOS devices, with screenshots and sample code snippets. One of these is an open source tool I built myself, but the other two are probably even more advanced.
They all make up for the lack of a proper Javascript console and error log in iOS. There's also some additional tools mentioned in the link above. The answers there are likely relevant to this question also.
You can try using Firebug Lite as a bookmarklet. You should be able to use all features without changing the code of your app as Jesse suggested. See this link.