Android - HTML Geolocation - javascript

I'm having trouble of using the geolocation on my website on android phones.
I've got the following javascript code:
if (navigator.geolocation) {
console.log("true"); //gets logged
navigator.geolocation.getCurrentPosition(sucess, error, {timeout: 5000});
}
It always times out with error.code 3 and error.message "Timeout expired".
This happens on version 2.x and 4.x of Android.
Please keep in mind that this is NOT in combination with phonegap or similar. It's a plain old website that's opened in a browser.
The code works fine on iPhones.
Is there sth. wrong with my code or is it a problem on the android side?

I have used the below code on my android without issues. If you want to call the function again just set a timeout in the coordinates function.
if (navigator.geolocation) {
console.log("true"); //gets logged
navigator.geolocation.getCurrentPosition(coordinates);
}
function coordinates(location) {
latitude = location.coords.latitude;
longitude = location.coords.longitude;
}

Related

How to get the prompt to grant location permission to show up after the user has denied the permission? [duplicate]

im building an app through phonegap, with a geolocation button.
if a user denies permission for geolocation the first time, how can i ask for permission again when they click the geolocation button again?
my code structure at the moment is:
function getLocation() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, positionError);
} else {
hideLoadingDiv()
showError('Geolocation is not supported by this device')
}
}
function positionError() {
hideLoadingDiv()
showError('Geolocation is not enabled. Please enable to use this feature')
}
You can't.
The only thing you can do is to display the instructions to reactivate the location sharing in his browser's settings (https://support.google.com/chrome/answer/142065?hl=en).
Two ways of doing this:
If you have a version of Chrome bigger than 83.0.4103.97 then use the lock icon in the URL
For older versions of Chrome the bellow code will work fine:
The bellow code only works on Chrome.
Steps:
Open Chrome
Open the console
Copy in the console
var allowGeoRecall = true;
var countLocationAttempts = 0;
Copy in the console the functions
function getLocation() {
console.log('getLocation was called')
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition,
positionError);
} else {
hideLoadingDiv()
console.log('Geolocation is not supported by this device')
}
}
function positionError() {
console.log('Geolocation is not enabled. Please enable to use this feature')
if(allowGeoRecall && countLocationAttempts < 5) {
countLocationAttempts += 1;
getLocation();
}
}
function showPosition(){
console.log('posititon accepted')
allowGeoRecall = false;
}
Run the function in the console
getLocation();
After running this you will be asked to allow to share your position. If your response is negative you will be asked again until you agree.
HINT: If your user has a negative response, let him know why you need the coordinates. Is vital for him to understand that this step is vital for the good run of the web app.
This can be reset in Page Info which can be accessed by clicking the lock icon next to the URL and allowing Location

Why reCAPTCHA doesnt work in actual Chrome?

I was developing a site on a local server (Open Server) with a built-in Google Chrome browser version 68.0.3440.106. Captcha v2 is connected to forms, but on more modern versions of the same browser I get the error Uncaught (in promise) null on anchor: 1. I don’t understand what the problem is, and how to solve it.
Here is my code:
"use strict";
var idCaptcha1;
var onloadReCaptchaInvisible = function () {
try {
//login
idCaptcha1 = grecaptcha.render('recaptcha1', {
"sitekey": "mycaptchakey",
"callback": "onSubmitReCaptcha1",
"size": "invisible"
});
} catch (e) {
//nothing
}
}
function onSubmitReCaptcha1(token) {
sendForm('signin', idCaptcha1);
}
So its working fine in old browser, when I want to send ajax form, it trigger captcha and user can work with it. What I did wrong? Except didnt update browser of local server of course ><

Return value from a function on Cordova plugin

[EDIT]
In the end, I gave up on this and just did some fallbacks like this:
Try to get the city, etc with a Geolocator script (https://github.com/onury/geolocator);
if it worked, great. If it returns an error that's NOT part of the HTML5 spec, try again using pure HTML5 Geolocation (diveintohtml5.info/geolocation.html);
If it worked, now I have at least the Latitude/Longitude coords. If it returns an error then most likely there's no GPS on the device.
I'm trying to use a Cordova plugin that checks if the GPS on the device is ON/OFF. The plugin in question is http://plugins.cordova.io/#/package/sk.tamex.locationandsettings.
Never mind the typos on the 'how-to'. Where there's telephonenumber it should be locationandsettings.
Anyways, I have a service to handle all the GPS stuff on my app, and it goes like this:
var isCordovaApp = !!window.cordova;
app.service('gpsSrvc', ['$interval', '$timeout', function($interval, $timeout) {
...some stuff...
if (isCordovaApp) {
var locationAndSettings = cordova.require("cordova/plugin/locationandsettings");
}
// Check for GPS on device
self.isGpsEnabled = function(callback) {
if (isCordovaApp) {
locationAndSettings.isGpsEnabled(function(result) {
if (result == true) {
console.log("GPS location ENABLED");
callback(true);
} else {
console.log("GPS location DISABLED");
callback(false);
}
}, function() {
console.log("Error checking for GPS on device");
return false;
});
} else {
return true ;
}
}
...some other stuff...
}]);
Now, when I run that on the browser, self.isGpsEnabled() returns TRUE, as expected.
When I try to run that on my phone, it displays various errors on the console, like this:
Error in Success callbackId: LocationAndSettings1329123004 : TypeError: undefined is not a function (cordova.js:305)
...and I can't make it work.
I also tried to use locationAndSettings.isGpsEnabled(function(result, callback){}) and the same happens. I just don't know how can I pass the result of locationAndSettings.isGpsEnabled() to self.isGpsEnabled().
Any help would be much appreciated.
In the end, I gave up on this and just did some fallbacks like this:
Try to get the city, etc with a Geolocator script (https://github.com/onury/geolocator);
if it worked, great. If it returns an error that's NOT part of the HTML5 spec, try again using pure HTML5 Geolocation (diveintohtml5.info/geolocation.html);
If it worked, now I have at least the Latitude/Longitude coords. If it returns an error then most likely there's no GPS on the device.

Can't access the camera from the app on Lumia 520 (running Windows Phone 8.1 Preview)

I am a WP dev beginner and learning how to write a simple video recorder app. I am using javascript and HTML on VS Pro 2013 and debugging on my actual device Lumia 520 (running Windows Phone 8.1 Preview). I read through a body of documentations and found that the MediaCapture class was the core class for this purpose. So I started following some tutorials and wrote up some functions to access the camera and display a preview in a HTML5 video tag. However, I wasn't successful in getting the MediaCapture object initialized, not even displaying the preview. Below are the major functions of which the first one was problematic:
function initCapture() {
findRearFacingCamera().then(function (cameraId) {
try {
if (cameraId != null && cameraId != "") {
// Initialize the settings
captureInitSettings = null;
captureInitSettings = new Windows.Media.Capture.MediaCaptureInitializationSettings();
captureInitSettings.videoDeviceId = cameraId;
captureInitSettings.streamingCaptureMode = Windows.Media.Capture.StreamingCaptureMode.video;
captureInitSettings.photoCaptureSource = Windows.Media.Capture.PhotoCaptureSource.videoPreview;
captureInitSettings.realTimeModeEnabled = true;
// Initialize the capture
oMediaCapture = null;
oMediaCapture = new Windows.Media.Capture.MediaCapture();
oMediaCapture.initializeAsync(captureInitSettings).then(preview, errorHandler);
}
} catch (e) { }
});
}
function preview() {
var preview = document.getElementById("PreviewScreen");
preview.msZoom = true;
if (preview != null) {
preview.src = URL.createObjectURL(oMediaCapture);
preview.play();
}
}
function errorHandler(e) {
var information = document.getElementById("message");
information.innerHTML = e.message;
}
During debugging, I paused at the statement oMediaCapture = new Windows.Media.Capture.MediaCapture(); in the initCapture() function. At this point, captureInitSettings.videoDeviceId has the value: "\\?\DISPLAY#QCOM_AVStream#3&25691128&0&UID32768#{e5323777-f976-4f5b-9b55-b94699c46e44}\Back Sensor", which I believed was a correct identification of the rear camera that I intended to use. Then, when I continued with a break point set at var preview = document.getElementById("PreviewScreen"); in function preview(), which was supposed to be called upon successful initialization of the MediaCapture object, the program was trapped into the errorHandler() function instead, with the error message being "Access is denied" with error number "-2147024891". So I guess the problem rose from the .initializeAsync() function, which was unsuccessful. Deeper causes might also be related to the permission to access the camera. BTW, I have enabled the webcam and microphone capabilities for this app, which was not the issue.
I believe I was missing something either in the code or in the big picture of the development settings. Please help me identify the issue and let me know if any additional information is needed. Much appreciated!
Did you make sure you added the Rear Camera requirement in your Package Manifest?
Turned out the problem was really with my device. Recall that I was testing on a Lumia 520 with Windows Phone 8.1 preview, the firmware stayed at Lumia Black. After upgrading the firmware to Lumia Cyan (parallel to Windows Phone 8.1) using the Nokia Recovery Software Tool, the problem disappeared.

Google Maps in IE11 gives "Unspecified error"

I'm getting a very strange error when using custom Google Maps in a website of one of our clients. The map has some markers on it, and when you open the marker you can see a dialog with the address of that location. When I close this dialog (obviously by clicking the cross) in IE11, I get an "Unspecified error". For some reason, this error is being thrown from the method "getBoundingClientRect()". No other browser has this issue (not even IE8).
I am using Google Maps API version 3.14.
Does anyone know what this could be? I'm not sure if it's necessary to place any code, but I'm willing to do that if that makes everything more clear.
You can use this fix for IE (place this code on top):
HTMLElement.prototype._getBoundingClientRect=HTMLElement.prototype.getBoundingClientRect;
HTMLElement.prototype.getBoundingClientRect = function() {
try {
return this._getBoundingClientRect();
} catch(e) {
return { top : this.offsetTop, left : this.offsetLeft };
}
}

Categories

Resources