Google HTML 5 Geolocation 'use my location' only working in Firefox - javascript

I have a button that is meant to check your location and in return show you the closest locations.
I've got it working perfectly in Firefox, and it wasn't on a live domain before but on a development server and I saw several resources that supported the thought that it had to be on a live domain for html 5 geolocation to work in Chrome.
Now we have moved to the real domain, and still the same results, only Firefox is working and in Chrome and I'm pretty sure Safari it says 'unable to retrieve location' meaning there was an error. I've made sure to check that Chrome isn't blocking the site for requesting my location (no popup comes up to click yes/no) although it is definitely activated in my settings. Same result on different PC's.
Any thoughts what could block this? It's on a live domain.
This is my code:
function geoFindMe() {
var output = $('.location-use');
if (!navigator.geolocation){
$(".location-use").html('Geolocation is not supported by your browser');
return;
}
function success(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>';
//find nearest restaurant location from these lat n long
NearestLoc( latitude, longitude );
};
function error() {
$(".location-use").html('Unable to retrieve your location');
};
$(".location-use").html('Locating...');
navigator.geolocation.getCurrentPosition(success, error);
}

https://developers.google.com/web/updates/2016/04/geolocation-on-secure-contexts-only
This answer is here (thanks user3186314), Chrome requires HTTPS

Related

Getting the user's real position without Client IP on a web page?

I wrote a web page that uses javascript to read the user's location including latitude and longitude and finally post that location to a handler in server (to a RazorPage in asp.net core App).
function getMyLatitude() {
myLat = 0;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
myLat = position.coords.latitude;
})
}
return myLat;
}
This function works correctly.
But some browsers in their desktop version, such as Chrome, have an option by which the user can enter their desired position and from now on, the browser will return the same position as desired by the user.
chrome : developer tools -> settings -> location
Is there a way I can make it so that the user can't manually set their location in the browser, or should I read the user's actual location?

How do I pull data from an API in javascript?

I'm working on a little weather app project, but now that i've changed the code to make the long and lat change depending on you geo location, the button doesn't work. When i click it nothing happens, i can't even tell if the API is pulling the data. Here is my code as well as a codepen I made to fool around with.
http://codepen.io/lettda/pen/yaGaLx
$(document).ready(function(){
$("#reveal").on("click", function(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
lat = position.coords.latitude;
long = position.coords.longitude;
var long;
var lat;
var api = "http://api.openweathermap.org/data/2.5/weather?lat="+lat+"&lon="+long+"&appid=de61ccfbde0405f57d64dbb53323fccf";
$.getJSON(api, function(data){
$(".message").html(JSON.stringify(data))
});
});
};
});
});
open your developer tools (in chrome press F12) and have a look into the console:
pen.js:4 getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://.... for more details.
it's an simple cross origin problem

How can i know the location of a user

I try to detect the exact location of user and specially the street if i can.
I tried that using the IP but this didn't work for me because it didn't give the exact location example for what i want is Lebanon Beirut Azarieh or Lebanon Beirut ABC Achrafieh and than i want to store this location in MYSQL database table using PHP.
i tried this code here
this code give a good location in Firefox on Localhost
but Online on Firefox and Google chrome give me that Your Location: Not Available
also it didn't work on phone browser iPhone and android (safari,chrome,...)
the idea is a user in the company want to use the website on his phone a special page on the website when he use it i want to take here exact location with the street and store this in database
You can use a flag, enableHighAccuracy:true
Here's an example code:
$(document).ready(function($){
if (navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(position){
latitude = position.coords.latitude;
longitude = position.coords.longitude;
//alert('latitude: '+latitude+' longitude: '+longitude);
}, function(error) {
alert('Error occurred. Error code: ' + error.code);
},{timeout:20000,enableHighAccuracy: true});
}
else{
alert('no geolocation support');
}
});
And I also want to quote that enableHighAccuracy depends from device to device.
reference here
Here is an android code link,you can get some idea from.getlocation with street

How is Chrome on my laptop able to provide such freakishly precise geolocation?

My code:
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude +
"<br>More or less" + position.accuracy + "meters";
}
Position.accuracy is 96 meters (which is, to me, surprising enough), but the position itself is spot on. Literally, it hits home. And I always thought laptops only geolocate by IP address, which should offer the accuracy of a couple of miles? What's the source of this precise info?
I believe the original source of the information comes from mobile devices like smartphones. Google and other companies have a database of wireless routers with GPS information. This information can be harvested by mobile devices that have transmitted the location of your wireless router to google in the past. IOS does this as well.
For example. If I walk next to some wireless router with my IOS device it will pick up the wireless router (not fully connecting though) and will note the GPS location and then send this to Apple. Now Apple now knows the location of that wireless router. This is the same for Android devices and Google.
see:
See "HOW IS APPLE COLLECTING GEODATA?" in
http://www.wired.com/2011/04/apple-iphone-tracking/
or, http://www.theguardian.com/technology/blog/2011/apr/25/google-router-map-exposed
http://www.w3schools.com/html/html5_geolocation.asp reference about geoLocation and google map API.]
They are using getCurrentPosition() for fetch the current position of the user and the showPosition() returns longitude and latitude to the users.getCurrentPosition() always give you a precise location.

Get GPS location from the web browser

I am developing a mobile based web-site, there I have integrated Google Maps, I need to fill the 'From' field of Google Maps dynamically.
Is it possible to get the GPS location from web browser and fill it up in the 'From' field of a Google Map dynamically?
If you use the Geolocation API, it would be as simple as using the following code.
navigator.geolocation.getCurrentPosition(function(location) {
console.log(location.coords.latitude);
console.log(location.coords.longitude);
console.log(location.coords.accuracy);
});
You may also be able to use Google's Client Location API.
This issue has been discussed in Is it possible to detect a mobile browser's GPS location? and Get position data from mobile browser. You can find more information there.
To give a bit more specific answer. HTML5 allows you to get the geo coordinates, and it does a pretty decent job. Overall the browser support for geolocation is pretty good, all major browsers except ie7 and ie8 (and opera mini). IE9 does the job but is the worst performer. Checkout caniuse.com:
http://caniuse.com/#search=geol
Also you need the approval of your user to access their location, so make sure you check for this and give some decent instructions in case it's turned off. Especially for Iphone turning permissions on for Safari is a bit cumbersome.
Use this, and you will find all informations at http://www.w3schools.com/html/html5_geolocation.asp
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
There is the GeoLocation API, but browser support is rather thin on the ground at present. Most sites that care about such things use a GeoIP database (with the usual provisos about the inaccuracy of such a system). You could also look at third party services requiring user cooperation such as FireEagle.
Observable
/*
function geo_success(position) {
do_something(position.coords.latitude, position.coords.longitude);
}
function geo_error() {
alert("Sorry, no position available.");
}
var geo_options = {
enableHighAccuracy: true,
maximumAge : 30000,
timeout : 27000
};
var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);
*/
getLocation(): Observable<Position> {
return Observable.create((observer) => {
const watchID = navigator.geolocation.watchPosition((position: Position) => {
observer.next(position);
});
return () => {
navigator.geolocation.clearWatch(watchID);
};
});
}
ngOnDestroy() {
this.sub.unsubscribe();
}
Let's use the latest fat arrow functions:
navigator.geolocation.getCurrentPosition((loc) => {
console.log('The location in lat lon format is: [', loc.coords.latitude, ',', loc.coords.longitude, ']');
})

Categories

Resources