Having access to the exact location of your user’s can help websites deliver services with speed, which ultimately plays a crucial role in improving the quality and recognition of those sites.
Previously, most sites required users to input their location details either by filling the details manually, by selecting fields from a drop-down list, or by clicking on a map. This approach to accessing the user location caused some frustrating experiences.
However, with the introduction of HTML5 Geolocation API, finding your site’s users place has become pretty easy than ever before. For example, here’s a screenshot of a site using HTML5 Geolocation API to determine a user location, which is presented in latitude and longitude:
In essence, adding geolocation ideas combined with HTML5 technology can do wonders in helping your site fetch data about your customer’s location. So, if you run a site that requires accessing the location of customers, then you must consider incorporating the HTML5 Geolocation API into your site. Through this post, you’ll get to know more about how adding geolocation service proves beneficial for a website. Additionally, you will learn about how the Geolocation API can be added to your site.
Benefits of Using Geolocation Service
For instance, mobile users could search for the nearest bus stop through a site using the HTML5 Geolocation API. Furthermore, a real estate website can let customers know about average house prices in their specified area which reduces a user headache when they’re driving around to find a house in a neighborhood and so on.
In short, with the help of geolocation a website could help people fetch details concerning best travel routes in just a few clicks.
Understanding How Geolocation API Works
Based on which browser you use, the Geolocation API roughly determines a location on the basis of several factors like mobile phone tower IDs, Wifi access points, IP address, etc. Let’s look at a few ways using which the HTML5 Geolocation API helps a site in finding the geographic location of a user.
- You can use GPS for determining the position of a person, but it turns out to be less energy efficient compared to other options. Another alternative to GPS called assistive GPS (or A-GPS) also helps provide information about a location by making use of triangulation between cellular phone towers and a user mobile phone. Though A-GPS does not provide as accurate information about a place as GPS, but it serves a handy tool in plenty of scenarios.
- Furthermore, users location can be figured out via mobile phones that contain Wi-Fi access points which make use of hotspot to retrieve the desired information. In contrary, PC’s can obtain a fair idea of location information with the help of the user IP address ranges.
- But, as you’ll know sharing a person’s physical location must be handled with utmost care to safeguard its privacy. The Geolocation API is aimed at protecting the privacy of a user’s location, and thus ensures that a site cannot access location information without the user consent. In other words, a user must always opt in to share location information with a site. Below is an image of a site using the Geolocation API message – that will get displayed asking users if they would like to share their physical location information or not:
How to Add HTML5 Geolocation API into Your Site?
Would you like to incorporate the HTML5 Geolocation API into your site? Well, then you just need to become familiar with three simple functions.
1. getCurrentPosition()
The geCurrentPosition() function just as the name implies help in obtaining a user’s current location. This function takes three parameters, namely: showLocation, ErrorHandler and Options. While the first two arguments are callback methods that help in obtaining the location information, the result (i.e. geographic location) is returned in the third parameter – the PositionOptions object.
2. watchPosition()
This method helps get updates about a user’s device current geographic location at fixed intervals. The watchPosition() function also takes the same parameters just like the getCurrentPosition() function, which serves the same purpose like showLocation, ErrorHandler and Options arguments.
3. clearPosition()
Lastly, the clearPosition() function cancels a call made to the watchPosition() function. This method doesn’t return any value.
Let’s now seen an example that demonstrates how HTML5 Geolocation API help retrieve a user’s geographic location using the getCurrentPosition() function:
Summing Up
Do you wish to include a functionality in your site that helps you implement fancy location-aware things in the website? In that case, you should consider using the HTML5 Geolocation API. It helps get information about a user’s physical location.
Author Bio
Ella Cooper works for Xicom Technologies, one among the best web development companies as a programmer. Apart from programming she has a penchant for writing and thus she shares her development experience through blogging.
- Google Maps JavaScript API for beginners by Girish Shakya having 46 lectures, 2 hours videos, beginner level.
Using HTML5 and JavaScript, you will be:
- able to setup Google Maps APIs
- able to create Google Maps for devices
- able to create Google Maps in a website
- able to control the Maps UI events
For detailed course outline, follow here.
Top 10 Interview Questions and Answers Series:
- Top 10 HTML5 Interview Questions
- Top 10 ASP.NET MVC Interview Questions
- Top 10 ASP.NET Web API Interview Questions
- Top 10 ASP.NET Interview Questions
- Comprehensive Series of ASP.NET Interview Questions
- Top 10 ASP.NET AJAX Interview Questions
- Top 10 WCF Interview Questions
- Comprehensive Series of WCF Interview Questions