i have the following code:
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(posi) {
var lat = posi.coords.latitude;
var lon = posi.coords.longitude;
console.log(lat);
}, showError);
} else {
$(".position").html("Geolocation is not supported by this browser");
}
function showError(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
alert("User denied the request for Geolocation.");
break;
case error.POSITION_UNAVAILABLE:
alert("Location information is unavailable.");
break;
case error.TIMEOUT:
alert("The request to get user location timed out.");
break;
case error.UNKNOWN_ERROR:
alert("An unknown error occurred.");
break;
}
}
alert(lat);
$(".weather").html("<p>" + lat + "</p>");
the problem is that at the alert(lat) at te bottom it says that
it is undefined and at the start at the if condition the console.log(lat)
works perfectly fine! what is wrong at the bottom?
i have tried making global variables lon, lat before if but the same thing happens.
For reference, here is the corrected code, based on the earlier comments:
function showError(error) {
[...] // No change.
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(posi) {
var lat = posi.coords.latitude;
var lon = posi.coords.longitude;
console.log(lat);
alert(lat);
$(".weather").html("<p>" + lat + "</p>");
}, showError);
} else {
$(".position").html("Geolocation is not supported by this browser");
}
Related
The code below is working fine on my PC (Windows 10). But on my Android Phone it generate a PERMISSION DENIED message.
I am running this code from a local file (from my Download folder).
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude;
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
getLocation();
</script>
</body>
</html>
I'm having trouble figuring why the onClick event is not working inside jsFiddle. The code is working well on the browser, but when try to port it to jsFiddle I lose the ability to fire the onClick events.
My current code is the following:
For the HTML:
<body>
<button id="find-near-btn" onClick="getMylocation()">
Find companies near me
</button>
<button id="mark-pos-btn" onClick="markMyPosition()">
Mark my position
</button>
<div id="mymap"></div>
<div id="output"></div>
</body>
The js:
function initmap(initialLat, initialLong){
output.innerHTML += "<p>Initialized</p>";
if(!initialLat || !initialLat.length){
initialLat = 38.01693;
}
if(!initialLong || !initialLong.length){
initialLong = -8.69475;
}
var mymap = this.mymap = L.map('mymap',{
center: [initialLat, initialLong],
zoom: 15
});
var osmUrl='http://tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data © OpenStreetMap contributors';
L.tileLayer(osmUrl, osmAttrib).addTo( mymap );
}
function getMylocation(){
output.innerHTML += "<p>Obtaining location.</p>";
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(function (position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
mymap.setView(new L.LatLng(lat, long), 15);
}, function (error) {
// Get information based on IP
getLatLongByIP();
});
}
}
function getLatLongByIP()
{
$.get("http://ip-api.com/json", function(response) {
handleData(response.lat, response.lon);
}, "jsonp");
}
function handleData(lat, long){
mymap.setView(new L.LatLng(lat, long), 15);
}
function markMyPosition()
{
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(function (position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
L.marker([lat, long]).addTo(mymap);
}, function (error) {
switch (error.code) {
case error.PERMISSION_DENIED:
output.innerHTML += "<p>User denied the request for Geolocation.</p>";
break;
case error.POSITION_UNAVAILABLE:
output.innerHTML += "<p>Location information is unavailable.</p>";
break;
case error.TIMEOUT:
output.innerHTML += "<p>The request to get user location timed out.</p>";
break;
case error.UNKNOWN_ERROR:
output.innerHTML += "<p>An unknown error occurred.</p>";
break;
}
});
}
}
initialLat = 38.01693;
initialLong = -8.69475;
initmap(initialLat, initialLong);
The fiddle can be found here. When I click any of the buttons I get nothing. Any idea on how can I make this work?
You need to change your JS code to be inside your page's <body> tag. Use the little cog at the top right of the Javascipt panel and choose No wrap - in <body> under Load type. I already tested this and it works.
I have used the script below many times before although recently I have not been able to get it to work. When I try and run it I get the error Location information is unavailable.
I am not sure why. I have checked update notes of browsers etc. to see if this is a function that has been removed and I can't find reference to this being the case.
If anyone has any idea as to what I am doing wrong, I would be most grateful if you are able to point me in the right direction.
Thanks in advance!
<!DOCTYPE html>
<html>
<body>
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
</script>
</body>
</html>
I assume that You are using Chrome and Your website doesn't have SSL right? Unfortunately gelocation doesn't work on Chrome in that conditions. You must test on other browser ie. Firefox or get SSL for Your website.
i'm trying to get current location coordinates longitude and latitude.this code is correctly working on Firefox Microsoft edge.but isn't working properly on google chrome can any modification make it compatible with other browsers.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
</script>
</body>
</html>
I think that your problem is related to the fact, that Chrome blocks the localization for applications run from file system (i.e. from disk).
Have you deployed it on any kind of web server?
I have just started to find that navigator.geolocation.getCurrentPosition does not work with Firefox when I decline to reveal my location. I.e. it does not return with the error as it did before. It works fine on Safari and Chrome but not Firefox 33.1
I can see this problem when running the w3schools example code (http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_geolocation_error) which is as follows:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
</script>
</body>
</html>
This works on Firefox if I allow access to my position. If I deny access neither the showPosition or showError functions get called. Nothing happens. I have tried this with both Mac and PC Firefox and get the same problem. Works fine with Safari and Chrome though.
I have just discovered this is a feature of Firefox, or bug as I would prefer to call it. It is detailed here: https://bugzilla.mozilla.org/show_bug.cgi?id=675533