Geolocation is the HTML 5 API that is used to get the location of the user. You can get the latitude and longitude of the user’s location.
Importance
But the question is why this service is so useful? I will try to explain let’s suppose you are travelling a city and you have not adequate information about the routes, public transport system and other places. In this situation many web applications or your phone can help you to get the routes, nearest bus or train station and the information of the place where you have to visit by using the geolocation services. They get your location and provide you all possible information.
Twitter also allows users to geotag their tweets so that you can read their tweet and get about their location at that time. I also use the Here Maps application in my Nokia smart phone.
Today’s smartphones, Android devices, services such as Google Maps for mobile, Urban spoon and Yelp (Yahoo partnering with Yelp to improve local search results) use location of the user to provide relevant local search results.
Many companies and service providers also use the geolocation to maintain their supply demand, customer experience by using improve the service on their location.
How
The geolocation API provides a property geolocation in the global object navigator( that also contains the information about the browser).
Let’s see the following example to get the user current location:
<!DOCTYPE html>
<html>
<head>
<script>
function getLocation(){
navigator.geolocation.getCurrentPosition(printLocation);
}
function printLocation(position)
{
var _coords = position.coords;
document.write('Your latitude: ' + _coords.latitude );
document.write("</br>");
document.write('longitude:' + _coords.longitude );
}
</script>
</head>
<body>
<button onclick="getLocation();">Try It</button>
</body>
</html>Browser Support
The current versions of Internet Explorer, Chrome, Firefox, Safari and Opera support geolocation. Check the version of various browser implementing geolocation api:
| Internet Explorer | |
| Chrome | 5+ |
| Firefox | 3.5+ |
| Safari | 5+ |
| Opera | 10.6+ |
| Android |
Workaround to detect the Browser support
Generally we can write the code to check whether browser supports HTML5 GeoLocation API or not like as:
if (navigator.geolocation) {
// Write your code
} else {
alert('Geo Location is not supported');
}You can also use the Modernizr a open source library in your application. You need just add the reference in your page.
Modernizr creates a JavaScript object called called Modernizr, which has a list of properties that contain boolean values for each feature. foe example Modernizr.geolocation property will be true if the user browser supports the geolocation api, and false if the browser does not support it.
You can use like this:
if (Modernizr.geolocation) {
// Write your code
} else {
alert('Geo Location is not supported');
}Properties of the getCurrentPosition() method
getCurrentPosition() methods returns an position object that contain two properties: coords and timestamp. The coords object has the following properties:
latitude : get the latitude in decimal number
longitude : get the longitude in decimal number
accuracy : get the accuracy of position
altitude : get altitude in meters
altitudeAccuracy : get the altitude accuracy of position
heading : get the degrees clockwise from North
speed : get the in meters per second
And timestamp refers the date and time when the location was calculated.
Limitation
Browser does not give your location to websites without user permission. This is the security concern. Generally when the web application or pages request to share you location, the browser notify to the user for the permission. It depends on the browser to browser that how they notify you. You can get an idea from the below picture.
For More information on geolocation security: see Security and privacy considerations.
Implementation
Use with Google Map
Click here to show your location in Google Map:
HTML Code:
The following example get the current position of the user and use the Google Map to show you.
<!DOCTYPE html>
<html>
<head>
<title>Current location in Google Map</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
<script>
function showMyLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showMap);
}
else { alert("no supported"); }
}
function showMap(position)
{
var lati = position.coords.latitude;
var longi = position.coords.longitude;
var pos = new google.maps.LatLng(lati,longi);
var options = {
zoom: 8,
center: pos,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var myDiv = document.getElementById("mapDiv");
var myMap = new google.maps.Map(myDiv, options);
var infowindow = new google.maps.InfoWindow({
map: myMap,
position: pos,
content: 'It seems you are here.'
});
}
</script>
<style>
#mapDiv{width:500px;height:300px;background-color:#F1f1f1;}
</style>
</head>
<body>
<button onclick="showMyLocation();"> Show My Location </button>
<div id="mapDiv"></div>
</body>
</html>Use with Bing Map