1. Phonegap Bridge –Geolocation and Google maps CIS 136 Building Mobile Apps 1

2. geolocation 2

3. Geolocation Plug-in org.apache.cordova.geolocation 3  Makes the app location-aware  information about the device's location, such as latitude and longitude  Common sources of location information include:  Global Positioning System (GPS)  location inferred from network signals such as:  IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs  There is no guarantee that the API returns the device's actual location.

4. navigator.geolocation 4  determine the device's network connection state, and type of connection  Has 3 methods  getCurrentPosition  watchPosition  clearWatch  Exposes 3 objects  Position  PositionError  coordinates

5. navigator.geolocation.getCurrentPosition 5  Returns the device's current position to the Success callback with a Position object as the parameter  Position object contains the current GPS coordinates  Ex: document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { navigator.geolocation.getCurrentPosition(success,error); } function success(position) { // gets position object } function error(positionerror) { //gets PositionError object }

6. navigator.geolocation.getCurrentPosition 6  Position object has 7 coordinate properties and a timestamp  position.coords.latitude  position.coords.longitude  position.coords.altitude  position.coords.accuracy  position.coords.altitudeAccuracy  position.coords.heading  position.coords.speed  position.timestamp  Ex:

7. navigator.geolocation.watchPosition 7  Returns the device's current position when a change in position is detected  Returns the position to the Success callback with a Position object as the parameter  Position object contains the current GPS coordinates  Ex: document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { watchID = navigator.geolocation.watchPosition(success,error,opts); } function success(position) { // gets position object } function error(positionerror) { //gets PositionError object }

8. navigator.geolocation.watchPosition 8  Gets a watchID that references the watch position interval  optional parameters customize the retrieval of the position  Timeout - maximum length of time (milliseconds) that is allowed to pass from the call to get until the call to watch, until the success event occurs (number)  enableHighAccuracy -By default, the device attempts to retrieve a Position using network-based methods  Setting this property to true tells the framework to use more accurate methods, such as satellite positioning. (Boolean)  maximumAge: cached position whose age is no greater than the specified time in milliseconds (number)

9. navigator.geolocation.clearWatch 9  Like a timer - Stops watching for changes to the device's location referenced by the watchID parameter var watchID = navigator.geolocation.watchPosition(onSuccess, onError, { enableHighAccuracy: true }); …. Later… navigator.geolocation.clearWatch(watchID);

10. Position object 10  Position object has 7 coordinate properties and a timestamp  position.coords.latitude  position.coords.longitude  position.coords.altitude  position.coords.accuracy  position.coords.altitudeAccuracy  position.coords.heading  position.coords.speed  position.timestamp  Ex:

11. Position error object 11  Created when an error occurs  code: A predefined error code  message: Error message describing the details of the error encountered  Codes:  PositionError.PERMISSION_DENIED  Returned when users do not allow the app to retrieve position information  PositionError.POSITION_UNAVAILABLE  Returned when the device is unable to retrieve a position  PositionError.TIMEOUT  Returned when the device is unable to retrieve a position within the time specified by the timeout included in geolocationOptions

12. Concerns 12  Collection and use of geolocation data raises important privacy issues  sensitive because it can reveal user's whereabouts  if stored, the history of their travels  app's privacy policy should discuss:  how the app uses geolocation data  whether it is shared with any other parties  the level of precision of the data (for example, coarse, fine, ZIP code level)  Should obtain the user's permission (e.g., by presenting choices for OK and No Thanks).

13. Google Maps 13

14. Google Maps 14  Adding a Google Map to your app is very easy  Use the coordinates from the geolocation object  Must first obtain an API_KEY from google https://developers.google.com/maps/signup

15. Once you have your key ….4 Steps 15 1. Load the Maps API JavaScript using a script tag. 2. Declare the application as HTML5 using the declaration. 3. Create a div element named "map" to hold the Map. 4. Define a JavaScript function that creates a map in the div.

16. 1a. Referencing the Google API or Google Maps 16 https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap  URL contained in the script tag is the location of a JavaScript file that loads all of the symbols and definitions you need for using the Google Maps API  async attribute (optional) lets the browser render the rest of your website while the Maps API loads  When the  API is ready, it will call the function specified using the callback parameter  key parameter contains your application's API key  https://developers.google.com/maps/documentation/javascript/get-api-key#key http://developers.google.com/maps/documentation/javascript/tutorial

17. 2. HTML5 using the 3. div element named "map" to hold the Map 17 

18. Define a JavaScript function that creates a map in the div 18 var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: {lat: -34.397, lng: 150.644}, zoom: 8 }); }

19. Options 19  Centering on latitude and longitude  Zoom level, Zooming, Panning  Markers  MapType (Street, terrain, etc.)

20. Reference 20 https://developers.google.com/maps/documentation/javas cript/reference#release-version