I am using location detection code at my website, it works correctly for chrome and firefox but when I checked it on MacBook safari and reload the page it's asking again and again even I allowed the location. When I reload the page, all the time it's asking for the location. This is my Code:-
$( document ).ready(function() {
getLocation();
});
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
// Success function
showPosition,
// Error function
null,
// Options. See MDN for details.
{
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
});
} else {
console.log("Geolocation is not supported by this browser.");
}
}
function showPosition(position) {
console.log("Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude);
}
It's not about your code. Change Safari Preference to prompt location service for each website only one time.
Related
I have the following code:
ons.ready( function() {
navigator.geolocation.getCurrentPosition(
function( position ) {
geo.lat = position.coords.latitude;
geo.lon = position.coords.longitude;
}
);
} );
Sometimes, but not all the time I get the following error:
Location access is not available.
Error in Error callbackId: Geolocation54410059
I need the user's location to load data into the main page of my app. Where is the best place to do this?
ons.ready fire when the dom is loaded, you are using a cordova plugin in order to get geolocation position. So you can't use it before cordova is ready.
Just do:
document.addEventListener('deviceready', function () {
// now cordova is ready
navigator.geolocation.getCurrentPosition(function( position ) {
geo.lat = position.coords.latitude;
geo.lon = position.coords.longitude;
});
}, false);
And it will be fine I think.
Edit :
Try adding those options to your function :
navigator.geolocation.getCurrentPosition(function( position ) {
geo.lat = position.coords.latitude;
geo.lon = position.coords.longitude;
}, { maximumAge: 3000, timeout: 5000, enableHighAccuracy: true });
you can put whatever value you want for 'enableHighAccuracy' and 'maximumAge' but you must provide a 'timeout' option because there is some quirks in android:
Android Quirks
If Geolocation service is turned off the onError callback is invoked
after timeout interval (if specified). If timeout parameter is not
specified then no callback is called.
I'm testing WebRTC procedure step by step for my sake.
I wrote some testing site for server-less WebRTC.
http://webrtcdevelop.appspot.com/
In fact, STUN server by google is used, but no signalling server deployed.
Session Description Protocol (SDP) is exchanged manually by hand that is CopyPaste between browser windows.
So far, here is the result I've got with the code:
'use strict';
var peerCon;
var ch;
$(document)
.ready(function()
{
init();
$('#remotebtn2')
.attr("disabled", "");
$('#localbtn')
.click(function()
{
offerCreate();
$('#localbtn')
.attr("disabled", "");
$('#remotebtn')
.attr("disabled", "");
$('#remotebtn2')
.removeAttr("disabled");
});
$('#remotebtn')
.click(function()
{
answerCreate(
new RTCSessionDescription(JSON.parse($('#remote')
.val())));
$('#localbtn')
.attr("disabled", "");
$('#remotebtn')
.attr("disabled", "");
$('#remotebtn')
.attr("disabled", "");
});
$('#remotebtn2')
.click(function()
{
answerGet(
new RTCSessionDescription(JSON.parse($('#remote')
.val())));
$('#remotebtn2')
.attr("disabled", "");
});
$('#msgbtn')
.click(function()
{
msgSend($('#msg')
.val());
});
});
var init = function()
{
//offer------
peerCon =
new RTCPeerConnection(
{
"iceServers": [
{
"url": "stun:stun.l.google.com:19302"
}]
},
{
"optional": []
});
var localDescriptionOut = function()
{
console.log(JSON.stringify(peerCon.localDescription));
$('#local')
.text(JSON.stringify(peerCon.localDescription));
};
peerCon.onicecandidate = function(e)
{
console.log(e);
if (e.candidate === null)
{
console.log('candidate empty!');
localDescriptionOut();
}
};
ch = peerCon.createDataChannel(
'ch1',
{
reliable: true
});
ch.onopen = function()
{
dlog('ch.onopen');
};
ch.onmessage = function(e)
{
dlog(e.data);
};
ch.onclose = function(e)
{
dlog('closed');
};
ch.onerror = function(e)
{
dlog('error');
};
};
var msgSend = function(msg)
{
ch.send(msg);
}
var offerCreate = function()
{
peerCon
.createOffer(function(description)
{
peerCon
.setLocalDescription(description, function()
{
//wait for complete of peerCon.onicecandidate
}, error);
}, error);
};
var answerCreate = function(descreption)
{
peerCon
.setRemoteDescription(descreption, function()
{
peerCon
.createAnswer(
function(description)
{
peerCon
.setLocalDescription(description, function()
{
//wait for complete of peerCon.onicecandidate
}, error);
}, error);
}, error);
};
var answerGet = function(description)
{
peerCon.setRemoteDescription(description, function()
{ //
console.log(JSON.stringify(description));
dlog('local-remote-setDescriptions complete!');
}, error);
};
var error = function(e)
{
console.log(e);
};
var dlog = function(msg)
{
var content = $('#onmsg')
.html();
$('#onmsg')
.html(content + msg + '<br>');
}
Firefox(26.0):
RtpDataChannels
onopen event is fired successfully, but send fails.
Chrome(31.0):
RtpDataChannels
onopen event is fired successfully, and send also succeeded.
A SDP object by Chrome is as follows:
{"sdp":".................. cname:L5dftYw3P3clhLve
\r\
na=ssrc:2410443476 msid:ch1 ch1
\r\
na=ssrc:2410443476 mslabel:ch1
\r\
na=ssrc:2410443476 label:ch1
\r\n","type":"offer"}
where the ch1 information defined in the code;
ch = peerCon.createDataChannel(
'ch1',
{
reliable: false
});
is bundled properly.
However, a SDP object (local description) by Firefox does not contain DataChannel at all, and moreover, the SDP is much shorter than Chrome, and less information bundled.
What do I miss?
Probably, I guess the reason that send fails on DataChannel is due to this lack of information in the SDP object by firefox.
How could I fix this?
I investigated sources of various working libraries, such as peerJS, easyRTC, simpleWebRTC, but cannot figure out the reason.
Any suggestion and recommendation to read is appreciated.
[not an answer, yet]
I leave this here just trying to help you. I am not much of a WebRTC developer. But, curious i am, this quite new and verry interresting for me.
Have you seen this ?
DataChannels
Supported in Firefox today, you can use DataChannels to send peer-to-peer
information during an audio/video call. There is
currently a bug that requires developers to set up some sort of
audio/video stream (even a “fake” one) in order to initiate a
DataChannel, but we will soon be fixing that.
Also, i found this bug hook, witch seems to be related.
One last point, your version of adapter.js is different from the one served on code.google. And .. alot. the webrtcDetectedVersion part is missing in yours.
https://code.google.com/p/webrtc/source/browse/stable/samples/js/base/adapter.js
Try that, come back to me with good newz. ?
After last updating, i have this line in console after clicking 'get answer'
Object { name="INVALID_STATE", message="Cannot set remote offer in
state HAVE_LOCAL_OFFER", exposedProps={...}, more...}
but this might be useless info ence i copy pasted the same browser offre to answer.
.. witch made me notice you are using jQuery v1.7.1 jquery.com.
Try updating jQuery (before i kill a kitten), and in the meantime, try make sure you use all updated versions of scripts.
Woups, after fast reading this : https://developer.mozilla.org/en-US/docs/Web/Guide/API/WebRTC/WebRTC_basics then comparing your javascripts, i see no SHIM.
Shims
As you can imagine, with such an early API, you must use the browser
prefixes and shim it to a common variable.
> var PeerConnection = window.mozRTCPeerConnection ||
> window.webkitRTCPeerConnection; var IceCandidate =
> window.mozRTCIceCandidate || window.RTCIceCandidate; var
> SessionDescription = window.mozRTCSessionDescription ||
> window.RTCSessionDescription; navigator.getUserMedia =
> navigator.getUserMedia || navigator.mozGetUserMedia ||
> navigator.webkitGetUserMedia;
I have created a site (can be accessed at http://dev.gkr33.com) which is designed for a smartphone and attempts to use the navigator.geolocation api and grab your position via getCurrentPosition. This seems to work initially, however if you try to refresh the page it always brings back the last GPS position. I have added some debug information on the page which grabs the time of the getCurrentPosition return and after the initial positioning it always returns the same time (down to the millisecond).
This only seems to happen in Chrome Mobile. If I browse into the site via the stock Android browser it works fine every time.
The code is shown below;
<script type="text/javascript">
(function ($) {
$(document).ready(function() {
var options = { enableHighAccuracy: true, maximumAge: 0, timeout: 60000 };
var position;
// empty the current html elements, not strictly necessary but
// I'm clutching at straws
$('#debug-latlng').empty();
$('#debug-time').empty();
$('#debug-address').empty();
// Let's try and find out where we are
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(gotPos, gotErr, options );
} else {
gotErr();
}
// We've got our position, let's show map and update user
function gotPos(position) {
var info;
info = position.coords.latitude+','+position.coords.longitude;
$('#debug-latlng').text(info);
$('#debug-time').text(parseTimestamp(position.timestamp));
// the following json call will translate the longitude and
// latitude into an address (a wrapper for google's geocode call)
$.getJSON('http://dev.gkr33.com/api.php', { req: "getLocationInfo", latlng: $('#debug-latlng').text() }, function(json) {
$('#debug-address').text( json['results'][0]['formatted_address'] );
});
var myLatLng = new google.maps.LatLng( position.coords.latitude, position.coords.longitude );
var mapOptions = {
zoom: 12,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatLng,
title: 'You are here',
animation: google.maps.Animation.DROP
});
marker.setMap(map);
} //gotPos
// Trap a GPS error, log it to console and display on site
function gotErr(error) {
var errors = {
1: 'Permission denied',
2: 'Position unavailable',
3: 'Request timeout'
};
console.log("Error: " + errors[error.code]);
$('#debug-latlng').text('GPS position not available');
} //gotErr
// Make timestamp human readable
function parseTimestamp(timestamp) {
var d = new Date(timestamp);
var day = d.getDate();
var month = d.getMonth() + 1;
var year = d.getFullYear();
var hour = d.getHours();
var mins = d.getMinutes();
var secs = d.getSeconds();
var msec = d.getMilliseconds();
return day + "." + month + "." + year + " " + hour + ":" + mins + ":" + secs + "," + msec;
} // parseTimestamp
});
}) (jQuery);
</script>
I have played around with various values for the maximumAge and timeout, but nothing seems to affect the same position.coords and position.time values.
I think there maybe an issue with Chrome Mobile, but I don't wanna assume too much at this point in time and just need clarification that I haven't made a mistake of muppet-like proportions in my code.
Many thanks for any help you can provide.
UPDATE: I suppose I should have said that I have tested this on two Android devices; HTC One X+ and a Samsung Galaxy Tab 7.7 with the same result. On both the stock browser works fine, and on both Chrome doesn't refresh the position. Will test on an Apple Device later :)
I never got to the bottom of this issue, but I got a way around the problem by utilising the watchPosition call, and wrapping this in a 5 second wait before clearing the watchID. Check the code below:
var options = { enableHighAccuracy: true, maximumAge: 100, timeout: 50000 };
if( navigator.geolocation) {
var watchID = navigator.geolocation.watchPosition( gotPos, gotErr, options );
var timeout = setTimeout( function() { navigator.geolocation.clearWatch( watchID ); }, 5000 );
} else {
gotErr();
}
I haven't played around with the "options" values or the timeout delay at the moment, but the above code brings back accurate positioning info on every platform I've tried.
Hope this helps someone with the same issue :)
I finally found a working version for firefox, chrome & default navigator in android (4.2 tested only):
function getGeoLocation() {
var options = null;
if (navigator.geolocation) {
if (browserChrome) //set this var looking for Chrome un user-agent header
options={enableHighAccuracy: false, maximumAge: 15000, timeout: 30000};
else
options={maximumAge:Infinity, timeout:0};
navigator.geolocation.getCurrentPosition(getGeoLocationCallback,
getGeoLocationErrorCallback,
options);
}
}
getCurrentLocation() no longer works on insecure origins in Chrome browsers. Switch to a secure original (HTTPS) to enable.
I have a strange issue with my jquery mobile application. Below screen shot from Chrome Developer Tools Snapshot.
Why does my Pages or Scripts are cached even thiugh Have added
$.ajaxSetup ({
cache: false
});
Also in every ajax call which loads my ul > li have set cache:false.
Kindly let me know how can I overcome this scenario coz of this my Mobile cache is growing on every single click driving me nuts.
Thanks
Update :
Every time I click to navigate to another page this scripts get executed :
$('body').on('click', '.menuClass', function(e) {
e.preventDefault();
e.stopImmediatePropagation();
var menuid = $(this).attr('id');
if (menuid == '100001') {
settings.get('setval', function(obj) {
if(obj.value.tableMode == "1"){
$.mobile.changePage('categories.html', {
transition : "slide"
});
return false;
}
else{
$.mobile.changePage('index.html', {
transition : "slide"
});
}
});
}
});
But for somereasons the URL for categories.html loads on every click changing the url to
below
http://localhost:8080/categories?_=1347279588477
http://localhost:8080/categories?_=1347279584203
http://localhost:8080/categories?_=1347279688227
I don't know why cache:false doesn't work but i'm adding a time created string to prevent caching of ajax pages.
Doing this by adding &ts="+ new Date().getTime() to end of url .
Here is my usage ;
$.ajax({
type: "GET",
url: "ajax.php?ajax_file=ajax_table_page&ts="+ new Date().getTime(),
success: function(data){
..................
}
});
I also use this to trace ajax errors (you may add after document is ready )
$.ajaxSetup({
error:function(x,e){
if(x.status==0){
alert('You are offline!!\n Please Check Your Network.');
}else if(x.status==404){
alert('Requested URL not found.');
}else if(x.status==500){
alert('Internel Server Error.');
}else if(e=='parsererror'){
alert('Error.\nParsing JSON Request failed.');
}else if(e=='timeout'){
alert('Request Time out.');
}else {
alert('Unknow Error.\n'+x.responseText);
}
}
});
I'm trying to use the HTML5 geolocation API; but I have problems to make it work on Firefox Chrome and Chromium :
init();
function init() {;
// Get the current location
getPosition();
}
function getPosition() {
navigator.geolocation.getCurrentPosition(success, fail,{
enableHighAccuracy:true,
timeout:10000,
maximumAge:Infinity
});
}
function success(position) {
alert("Your latitude: " + position.coords.latitude + "longitude: "
+ position.coords.longitude);
}
function fail(e) {
alert("Your position cannot be found"+e.code+" => "+e.message);
}
In IE9 and Safari it works flawlessly; but :
in Firefox (v13 and V14) there is an error code 3 (timeout)
in Chrome and Chromium (v20 and v21) there is and error code 2 with the message "Network location provider at 'https://maps.googleapis.com/maps/api/browserlocation/json?browser=googlechrome&sensor=true' : Response was malformed."
I have a fresh install of Chrome (installed today on windows XP, no extensions) and I have authorized the geolocation in the browser.
You can try it there :
http://jsfiddle.net/mhj82/38/
Is there a solution to make it work on all browser supporting geolocation ?
Have you read this ?
http://code.google.com/p/chromium/issues/detail?id=41001
At the end of the thread they come to the conclusion that in order to work in Chrome, geolocation must be performed on a device with a working wifi adapter.
Was wifi enabled on your computer ?
(dunno for firefox)
I have to wait until the document is loaded to get it work in chrome
jQuery().ready(function() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition....
}
});
Try this tested in chrome desktop and mobile
if (navigator.geolocation) {
var latitude = null;
var longitude = null;
navigator.geolocation.getCurrentPosition(function (position) {
latitude = position.coords.latitude;
longitude = position.coords.longitude;
});
} else {
alert("Geolocation API is not supported in your browser");
};