I am trying to get current location (with address, not only lat, long), But i am stuck that how to get?
Here is the code:
<button onclick="getLocation()">Click Me</button>
<div id="address"></div>
<script>
var x = document.getElementById("address");
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>
It's returning only latitude and longitude. But i need full address like Model town 30-A, Lahore or something like this address.
Here is the site which has this kind of functionality: https://gps-coordinates.org/my-location.php.
To check, open this link and see in the Address input.
Please help me. How can i get current address?
Related
I am trying to send the longitude and latitude of a device to a discord webhook (or any webhook in general), I can not seem to find a way to take the longitude and latitude values to successfully be sent to the webhook.
The problem here is that even after converting the latitude and longitude into variables the webhook refuses to work? I tried a lot of ways, none seemed to send the longitude or latitude or both.
Thank you in advance, please try sending the values to your own webhook, make one on discord (it is 100% free) before putting an answer.
Please note that I am fairly new to javascript, I am more confortable with python and Lua C.
Please if you have an answer try providing a example with it, saves me from a headache.
Code:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<button onclick="sendMessage()">Send your location to my webhook</button>
<p id="demo"></p>
<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;
}
function sendMessage() {
const request = new XMLHttpRequest();
request.open("POST", "PUT YOUR WEBHOOK HERE");
request.setRequestHeader('Content-type', 'application/json');
const params = {
username: "My Webhook Name",
avatar_url: "",
content: "This message should be latitude and longitude. I spent 2 hours trying to figure this out, help."
}
request.send(JSON.stringify(params));
}
</script>
</body>
</html>
Have a small javascript piece of code which calls navigator.geolocation.
I have an if statement, which works, to show the latitude and longitude if the user the user allows the call. However, the else section is not running.
If I run the code below I get prompted by the browser to allow; if I allow it then coordinates are shown. However, if I hit block instead nothing happens even though there is an else section.
<body>
<br> <p id="ChangeSring">Test</p>
<script>
var x = document.getElementById("ChangeSring");
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(SavePosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
document.cookie = 'location=false;path=/form_handler';
}
function SavePosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
document.cookie = 'location=true;path=/form_handler';
document.cookie = 'latitude='+ position.coords.latitude +';path=/form_handler';
document.cookie = 'longitude='+ position.coords.longitude +';path=/form_handler';
}
</script>
<form action="/form_handler" _lpchecked="1">
Enter value:
<input type="text" name="SomeVar"><br>
<input type="submit" value="search">
</form>
</body>
You cannot use else to check for permissions.
The navigator method getCurrentPosition takes a success and error callbacks.
The error callback will be called if permission is denied.
if (navigator.geolocation) { // this checks if navigator is supported at all
navigator.geolocation.getCurrentPosition(console.log, () => {
console.log('Permission denied')
});
} else {
console.log('Geolocation is not supported by this browser.');
}
getCurrentPosition takes a success and an error function.
Ref: https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition#Example
function errorGettingPosition(positionError) {
x.innerHTML = "Geolocation is not supported by this browser.";
document.cookie = 'location=false;path=/form_handler';
}
navigator.geolocation.getCurrentPosition(SavePosition, errorGettingPosition)
That if-else statement is checking if navigator.geolocation it's not undefined(and it's not even if you don't want the browser to know your location) follow the other answers to properly handle permission
Please suggest me the different ways how i get the longitude and latitude from address so that i can pass the value to get the navigation from current location in IONIC Framework.
Till Now I am able to get the lat long from address:
address$scope.geocodeAddress = function() {
var address = document.getElementById('from').value;
geocoder.geocode({
'address': address
}, function(results, status) {
if (status === 'OK') {
map.setCenter(results[0].geometry.location);
console.log("latlng-->" + results[0].geometry.location);
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful: ' + status);
}
});
Just use HTML5 Geoloc, it will use Phone GPS.
<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's a lot of ressource to help you out with it like W3S.
If you want to open Google Maps with directions to a specific address, you don't have to get the latitude and longitude. You can use the phonegap-launch-navigator-plugin to launch Google Maps with the address filled in and Google Maps will handle the rest. You can find documentation on how to use it here and as a bonus you can also open many other navigation apps.
Entry question on what to do / where to look further for this possibly easy facility for a Website
I basically want to show the my current geographic location via a text display, not as a display on Google Maps. Obviously I would like this to update automatically
Does anyone know a program that would facilitate this? Or generally the best way to go about it?
You can use this code to update your page with the current location:
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;
}
<div id="demo"></div>
I'm developing a Phone Gap application. In that application I Want to show the current user's position. For that I used HTML5 geolocation. When I click on the Get Location button it doesn't display a location. It also doesn't display an error. After pressing the Get Location button it simply shows the button in the selected state.
<!DOCTYPE html>
<html>
<body>
<button onclick="getLocation()">Get Location</button>
<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>
You are referencing an element that doesn't exist.
Add a div to your html body with id="demo", like so:
<div id="demo"></div>
See it here on jsfiddle: http://jsfiddle.net/wU6AE/