<< Back to the blog

HTML5 - Geolocation

By @islamzatary

List of Advanced HTML5 Topics:


geolocation is the art of figuring out where you are in the world, (optionally) sharing that information with people you trust.
figure out where you are:
1. your IP address
2. wireless network connection, cell tower your phone is talking to.
3. dedicated GPS hardware that calculates latitude and longitude from information sent by satellites in the sky.

Geolocation - Privacy

User Agents must not send location information to Web sites without the express permission of the user, so there is no way for a website to bypass it.
The geolocation API lets you share your location with trusted web sites
The latitude and longitude are available to JavaScript on the page, which in turn can send it back to the remote web server

Geolocation - navigator object

The navigator object contains information about the browser, like:
code name of the browser.
name of the browser.
version information of the browser.
language of the browser.
browser is online.

Geolocation - navigator object

getCurrentPosition(): this api will causes the infobar to appear, when the location was calculated(asynchronously).
function show_map(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;

object with two properties: coords and timestamp
coords : latitude & longitude.
timestamp : date


navigator.geolocation.getCurrentPosition(show_map, handle_error);
If anything goes wrong, your error callback function will be called with a PositionError object.

Properties: code, message

Geolocation - Browsers

How its work
1. Ask you if you want to share your location.
2. Yes, Browser gathers information about nearby wireless access points and your computer’s IP address.
3. Browser sends this information to the default geolocation service provider, Google Location Services, to get an estimate of your location.
4. The location estimate is then shared with the requesting website.

How Devices deal with geolocation

some popular devices like iphone and andriod support two methods of figuring out where you are.
First method(Low approximately): your position based on your relative proximity to different cellular towers operated by your phone carrier.
Second method(High approximately):
uses dedicated GPS hardware on your device to talk to dedicated GPS positioning satellites .

Geolocation - PositionOptions

getCurrentPosition() function has an optional third argument, a PositionOptions object.

navigator.geolocation.getCurrentPosition(success_callback, error_callback, {maximumAge: 60000});

Geolocation - PositionOptions

Before you ask for the user’s location, you should think about just how much accuracy you need, and set enableHighAccuracy accordingly. If you need to find their location more than once, you should think about how old the information could be and still be useful, and setmaximumAge accordingly.
If you need to find their location continuously, then getCurrentPosition() is not for you. You need to upgrade to watchPosition().

Geolocation - watchPosition

watchPosition(callback, error, PositionOptions);
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {navigator.geolocation.watchPosition(showPosition);
} else {x.innerHTML = "Geolocation is not supported by this browser.";}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"Longitude: " + position.coords.longitude;


The difference is that your callback function will be called every time the user’s location changes.

Geolocation - Plugin

Goal is to provide a usable geo location framework for mobile websites/widget applications. It wraps the underlying platform specific implementation through a simple JavaScriptAPI that is aligned to the W3 Geolocation API Specification.

Wireless Geolocation (HTML 5 Geolocation API) vs. IP Geolocation.
IP vs Geo API

Example & Demos



Can I use Geolocation

HTML5 - Geolocation


Wrapping up

<< Back to the blog

by @islamzatary