SharedTutor | Tutorials For Everyone

Find your interesting tutorials in Get your tutorial about Computer, Blogging, Makemoneyonline, Games, Design, and more!

Obtaining User Location with HTML5 Geolocation API

This article is part of our "HTML5/CSS3 Tutorials series" - dedicated to help make that you simply better designer and/or developer. Click here to see more articles from the same series.

In many cases, obtaining user location will be extremely helpful to establish better consumer experience, for example:

  • E-commerce sites can immediately provide shipping cost estimation and inform product availability from local retailers

  • News sites can provide localized headlines and weather report.

  • Daily deal sites (like Disdus) offers offers and discounts offered by user’s local stores or restaurants.

  • Movie sites can listed the ‘Now Playing’ movies in nearby theatres, etc

In the past, to retrieve user location, we may need to provide a list of locations for users to opt-in, or depend upon the device IP address to make a rough estimation of the location. Today, we could do this job in the much leaner way with less complexity using Geolocation API.

(Image Credits: Map Widget by Jan)

The Geolocation API can be a new technology that’s designed by W3C - the identical organization behind HTML5. Probably for that reason, it is correlated and grouped with HTML5 in numerous books and references, although it has actually not even attempt to do with HTML5 technically.

  • View Demo

In this post, we're going to use the API in its simplest form; we're going to create a list of functions to retrieve user’s location and show it in map with Google Maps. Let’s take a look.

How to Style Google Mapspost title

Creating the Map with Google Maps API

First, we'll use Google Maps API which has a function called GoogleMap to specify the map. In the following JavaScript codes, we'll get the positioning by specifying it with the following two Geolocation objects: coords.latitude and coords.longitude, which retrieve the Latitude and Longitude coordinates.

Then, we create the map and the location marker accordingly with google.maps.Map and google.maps.Marker, as follows.

 function GoogleMap(position)  var location = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); var map = new google.maps.Map(document.getElementById('map'),  zoom: 10, disableDefaultUI: true, mapTypeId: google.maps.MapTypeId.TERRAIN, ); var marker = new google.maps.Marker( map: map, position: location, animation: google.maps.Animation.DROP, title: "This is your location" ); map.setCenter(location);  

For more implementation around the Google Maps API, you can head over to the Google Maps JavaScript API v3 documentation.

Error Report

Then, we produce a function to the error report in the event the location cannot be retrieved. In this case, we're going to show a stern reminder window saying “Location can’t be found”.

 function showError()  alert("Location can't be found");  

Running Geolocation

The Geolocation API is very simple. It specifies while using navigator.geolocation object, as you are able to see in the following code.

 if (navigator.geolocation)  navigator.geolocation.getCurrentPosition(GoogleMap, showError);  else  alert("Your browser does not support Geolocation.");  

In the above code, we'll first manage a test whether or not the user’s device has support for Geolocation API. If it returns “no” we're going to show a stern reminder window showing that “The browser does not support Geolocation”. If it does, we're going to try to retrieve the location using the getCurrentPosition method.

When the venue coordinate may be retrieved, it will send the information to GoogleMap function, to demonstrate in the map. If the location cannot be located, the showError function will likely be executed instead.

User Privacy

Since this is really a matter of user privacy, users must be aware that the device or the Web they are visiting will be tracking their location. As W3C has stated inside the documentation:

User agents must not send location information to Web sites without the express permission with the user.

For this reason, the browser will first prompt a persons whether they Allow or Deny for that browser to monitor their location information.

Result Accuracy

The result accuracy is dependent upon many factors such as:

  • The user’s location

  • The availability of data sources - for example wireless access points and IP Address

  • The device itself

In these screenshot I tested the above code during my Macbook and iPhone. It turns out that this iPhone shows a much more accurate location than one inside my MacBook, as it is equipped with GPS hardware.

Further references

As we mentioned, we only did an easy thing with Geolocation, however the actual potential is so much more than that. There are many more ideas we can implement using the API. So, if you are keen to dig into this subject further, it is possible to head over to the following sources:

Lastly, check out the demo page to find out how it is for doing things.

  • View Demo

  • Download Source

Related posts:

  1. A Look Into: HTML5 Fullscreen API

  2. HTML5 Tutorial: Login Page with HTML5 Forms

  3. How to Retrieve and Display Battery Status with HTML5

  4. Creating & Styling Progress Bar With HTML5

No comments

Post a Comment