Location Detection

This is a PHP, HTML5 & JavaScript example of how your site can be location aware!.

Download the code!

Tweet this Post to FaceBook Digg

What could your site do with visitor location data?

Precise address House number Street Point of interest Named location City District State Postcode Country Latitude Longitude Accuracy Altitude Altitude accuracy Directional heading Speed

Step by step guide to geolocation enabling your site:

Location detection with HTML5 is pretty simple. Browsers either support navigator.geolocation or they don't. If they do you can open up a whole world of local information to your users plus log a deeper and more geographic level of statistics server side.

  1. JavaScript: Find out if navigator.geolocation is supported by the browser
  2. JavaScript: If yes use the geolocation API to get the latitude and longitude values
  3. JavaScript: Send latitude and longitude values to a server side script for processing
  4. PHP: Query the Google Maps API to reverse geocode the latitude and longitude
  5. PHP: Parse the resulting XML location data from the Google Maps API
  6. PHP: Use these values to find local information to show your visitors. Could be from a database or remote API.
  7. JavaScript: Update the page with data output by the server side script to offer your visitors local content!

Download Mobile Location Detection code to add geolocation enable your website.

How does this voodoo work? Words from the wise at W3:

Common sources of location information include Global Positioning System (GPS) and location inferred from network signals such as IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs, as well as user input.

Download the code!