CHAP 4. GEOLOCATION API

 You can request users to share their location and, if they agree, you can provide them with instructions on how to get to a nearby store to pick up a new pair of shoes at a discounted rate.  You request a position and, if the user agrees, the browser returns location information.  The position is provided to the browser by the underlying device (for example, a laptop or a mobile phone) on which the HTML5 Geolocation–enabled browser is running.  IP Address  Global Positioning System (GPS)  Wi-Fi with MAC addresses from RFID, Wi-Fi, and Bluetooth  GSM or CDMA cell phone IDs ABOUT LOCATION INFORMATION

ProsCons GPS Very accurate Take a long time, can drain a user’s device’s batteries Does not work well indoors May require additional hardware Wi-Fi Accurate Works indoors Fix quickly & cheaply Not good in rural areas with few wireless access points Cell Phone Fairly accurate Works indoors Fix quickly & cheaply Requires a device with access to a cell phone or cell modem Not good in rural areas with fewer cell phone towers User-Defined May have more accurate location data Allows services for alternate locations User entry might be faster than detection Can also be very inaccurate, especially if the location changes THE PROS AND CONS OF GEOLOCATION DATA

 The browser intercepts and requests user permission at step 2. ARACHITECTURE & PRIVACY

 Browser support for HTML5 Geolocation BROWSER SUPPORT BrowserDetails ChromeSupported in Google Chrome version 2 with Gears FirefoxSupported in version 3.5 and greater Internet ExplorerSupported via the Gears plugin OperaPlanned support version 10, experimental support in nightly builds SafariSupported in version 4 for the iPhone

 if(navigator.geolocation) {  document.getElementById("support").innerHTML = "HTML5 Geolocation supported.";  } else {  document.getElementById("support").innerHTML = "HTML5 Geolocation is not supported in your browser.";  } CHECKING FOR BROWSER SUPPORT

 Theres are two type of position requests  One-shot position request  Repeated position updates POSITIONS REQUESTS

 Usage  void getCurrentPosition(in PositionCallback successCallback,  in optional PositionErrorCallback errorCallback,  in optional PositionOptions options);  Example  navigator.geolocation.getCurrentPosition(updateLocation, handleLocationError, {timeout:10000});  updateLocation is a PositionCallback function will implement later  handleLocationError is a PositionErrorCallback function will implement later ONE-SHOT POSITION REQUESTS

 function updateLocation(position) {  var latitude = position.coords.latitude;  var longitude = position.coords.longitude;  var accuracy = position.coords.accuracy;  document.getElementById("latitude").innerHTML = latitude;  document.getElementById("longitude").innerHTML = longitude;  document.getElementById(“accuracy”).innerHTML = “This location is accurate within “ +accuracy + “ meters.”  } IMPLEMENT POSITION CALLBACK

 function handleLocationError(error) {  switch(error.code) {  case 0:  updateStatus(“Retrieving location error: " + error.message);  break;  case 1:  updateStatus("The user prevented retrieving location.");  break;  case 2:  updateStatus(“Unable to determine your location: " + error.message);  break;  case 3:  updateStatus(“Retrieving timed.");  break;  } IMPLEMENT POSITION ERROR CALLBACK

 Usage  long watchPosition(in PositionCallback successCallback,  in optional PositionErrorCallback errorCallback,  in optional PositionOptions options);  Example  navigator.geolocation.watchPosition(updateLocation, handleLocationError);  updateLocation is a PositionCallback function same as getCurrentPosition implemented above.  handleLocationError is a PositionErrorCallback function same as getCurrentPosition implemented above. REPEAT POSITION UPDATES

 Usage  navigator.geolocation.clearWatch(watchId);  Example  var watchId = navigator.geolocation.watchPosition(updateLocation, handleLocationError);  navigator.geolocation.clearWatch(watchId); CANCEL POSITION UPDATES

 Require Google Map JavaScript API   Put Div for Google Map  SHOW ME ON A GOOGLE MAP

 Google Map Example  var map; function initialize() { map = new google.maps.Map(document.getElementById('map_canvas'), {zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP}); navigator.geolocation.getCurrentPosition(function(position) { var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); var infowindow = new google.maps.InfoWindow({ map: map, position: pos, content: 'Location found using HTML5.‘ }); map.setCenter(pos); }, function(error) { alert('Cannot get Location data: ' + error.code); }); } window.addEventListener("load", initialize, true); SHOW ME ON A GOOGLE MAP (CONT.)