If you are developing real time user location application, then you may want to use The Geolocation API instead of third party services. The Geolocation API supports all modern web browsers. You don't need to write lengthy code.
The Geolocation API in Javscript is used to get user location. For privacy reason, user is asked permission to share user's location. If the user grant permission, you will get user location details object.
In this article, we will share how you can watch for user location.
The navigator.geolocation.watchPosition() method registers a handler function that will be called automatically each time when user device location changes, and it will returns the updated location.
navigator.geolocation.watchPosition(successFunction, errorFunction, options);
successFunction
when user grants permission
errorFunction Optional which calls if error occurs
options Optional configuration options for getting location
The method accepts three parameters,
// success function
function success (position) {
console.log(position);
}
// error function
function error (error) {
console.warn(error);
}
var options = {
enableHighAccuracy: true
};
const watchId = navigator.geolocation.watchPosition(success, error, options);
navigator.geolocation.clearWatch() method is used to stop watching user location handling started in navigator.geolocation.watchPosition() method.
navigator.geolocation.clearWatch(watchId);
watchId
Id of the geolocation.watchPosition() method.
Here is the full example rendering user location in Google Maps:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google Maps</title>
<style>
#map {
height: 400px;
width: 600px;
}
</style>
</head>
<body>
<div id="map"></div>
<button onclick="stopWatch()">Stop</button>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=GOOGLE_API_KEY"></script>
<script type="text/javascript">
const watchId = navigator.geolocation.watchPosition(
position => initMap(position)
);
function stopWatch() {
navigator.geolocation.clearWatch(watchId);
}
function initMap(position) {
const { latitude, longitude } = position.coords;
const center = {lat: latitude, lng: longitude};
const options = {zoom: 15, scaleControl: true, center: center};
map = new google.maps.Map(document.getElementById('map'), options);
const point = {lat: latitude, lng: longitude};
// create marker
var marker = new google.maps.Marker({position: point, map: map});
}
</script>
</body>
</html>
This will keep eye on user location. When user location updates, the watchPosition will send new location to Google Maps and Google Maps will update location in map.
Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]
Read the Current full URL with React
Current url holds data to display or sho...How to connect with MongoDB Database in Python
In this article we will see how to conne...Change Password with Current Password Validation in Laravel
Today, we will learn to update password...How to transfer files between remote server and local computer
When your hosting provider gives you Cpa...How to get original image size (width & height) in JavaScript
Use the HTML5 naturalWidth and...