Geolocation is a navigation to your current position on the map.
When you open the Google Maps, it asks you if you allow them to know your location. Once you accept, the map will show your current location.
It is really useful in case of driving direction because you can share your location and just insert the destination point.
The entire test code has been copied from the developer's website of Google.
<!DOCTYPE html>
<html>
<head>
<title>Geolocation</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see the error "The Geolocation service
// failed.", it means you probably did not give permission for the browser to
// locate you.
var map, infoWindow;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 6
});
infoWindow = new google.maps.InfoWindow;
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
infoWindow.open(map);
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
infoWindow.open(map);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
initMap()
The function initMap() is used to generate our map.
getCurrentPosition()
The function getCurrentPosition will read the position of our device and give it to the special variable with coordinates.
Handle the info window and center the map
- infoWindow.setPosition(pos)Sets position of the window with information if the geolocation was successfule.
- infoWindow.setContent('Location found.')Set the description of the window.
- infoWindow.open(map)Object on which the window will be opened.
- map.setCenter(pos)If a user allows the geolocation, the map will be centered on his current location.
handleLocationError()
The function handleLocationError() is called when the geolocation feature deos not work.
The error information will return when the user blocks the geolocation feature or when the browser which he is using does not support geolocation.
No comments:
Post a Comment