Created
July 31, 2019 13:46
-
-
Save greenlikeorange/a5bd40658f4ad02a999c46d9b38ac48e to your computer and use it in GitHub Desktop.
// source https://jsbin.com
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<title>JS Bin</title> | |
</head> | |
<body> | |
<button id = "find-me">Show my location</button><br/> | |
<p id = "status"></p> | |
<a id = "map-link" target="_blank"></a> | |
<script id="jsbin-javascript"> | |
function geoFindMe() { | |
const status = document.querySelector('#status'); | |
const mapLink = document.querySelector('#map-link'); | |
mapLink.href = ''; | |
mapLink.textContent = ''; | |
function success(position) { | |
const latitude = position.coords.latitude; | |
const longitude = position.coords.longitude; | |
status.textContent = ''; | |
mapLink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`; | |
mapLink.textContent = `Latitude: ${latitude} °, Longitude: ${longitude} °`; | |
} | |
function error() { | |
status.textContent = 'Unable to retrieve your location'; | |
} | |
if (!navigator.geolocation) { | |
status.textContent = 'Geolocation is not supported by your browser'; | |
} else { | |
status.textContent = 'Locating…'; | |
navigator.geolocation.getCurrentPosition(success, error); | |
} | |
} | |
document.querySelector('#find-me').addEventListener('click', geoFindMe); | |
L | |
</script> | |
<script id="jsbin-source-javascript" type="text/javascript">function geoFindMe() { | |
const status = document.querySelector('#status'); | |
const mapLink = document.querySelector('#map-link'); | |
mapLink.href = ''; | |
mapLink.textContent = ''; | |
function success(position) { | |
const latitude = position.coords.latitude; | |
const longitude = position.coords.longitude; | |
status.textContent = ''; | |
mapLink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`; | |
mapLink.textContent = `Latitude: ${latitude} °, Longitude: ${longitude} °`; | |
} | |
function error() { | |
status.textContent = 'Unable to retrieve your location'; | |
} | |
if (!navigator.geolocation) { | |
status.textContent = 'Geolocation is not supported by your browser'; | |
} else { | |
status.textContent = 'Locating…'; | |
navigator.geolocation.getCurrentPosition(success, error); | |
} | |
} | |
document.querySelector('#find-me').addEventListener('click', geoFindMe); | |
L</script></body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function geoFindMe() { | |
const status = document.querySelector('#status'); | |
const mapLink = document.querySelector('#map-link'); | |
mapLink.href = ''; | |
mapLink.textContent = ''; | |
function success(position) { | |
const latitude = position.coords.latitude; | |
const longitude = position.coords.longitude; | |
status.textContent = ''; | |
mapLink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`; | |
mapLink.textContent = `Latitude: ${latitude} °, Longitude: ${longitude} °`; | |
} | |
function error() { | |
status.textContent = 'Unable to retrieve your location'; | |
} | |
if (!navigator.geolocation) { | |
status.textContent = 'Geolocation is not supported by your browser'; | |
} else { | |
status.textContent = 'Locating…'; | |
navigator.geolocation.getCurrentPosition(success, error); | |
} | |
} | |
document.querySelector('#find-me').addEventListener('click', geoFindMe); | |
L |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment