Geolocation using Google maps CIS 136 Building Mobile Apps
Geolocation Plug-in 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
navigator.geolocation determine the device's network connection state, and type of connection Has 3 methods getCurrentPosition watchPosition clearWatch Exposes 3 objects Position PositionError coordinates
navigator.geolocation.getCurrentPosition 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).on("deviceready", function() { navigator.geolocation.getCurrentPosition(success,error); } function success(position) { // gets position object function error(positionerror) //gets PositionError object
Position object Position object has 7 types of coordinate items 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:
Position error object Created when an error occurs Codes: 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
navigator.geolocation.watchPosition 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).on("deviceready", function() { watchID = navigator.geolocation.watchPosition(success,error,opts); } function success(position) // gets position object function error(positionerror) //gets PositionError object
navigator.geolocation.watchPosition 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)
navigator.geolocation.clearWatch 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);
Concerns 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).
Google Maps
Google Maps 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
Once you have your key ….4 Steps Load the Maps API JavaScript using a script tag. Declare the application as HTML5 using the <!DOCTYPE html> declaration. Create a div element named "map" to hold the Map. Define a JavaScript function that creates a map in the div.
1a. Referencing the Google API or Google Maps <script src=https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap async defer></script> 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
2. HTML5 using the <. DOCTYPE html> 3 2. HTML5 using the <!DOCTYPE html> 3. div element named "map" to hold the Map <!DOCTYPE html> <div id="map"></div>
Define a JavaScript function that creates a map in the div var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: {lat: -34.397, lng: 150.644}, zoom: 8 }); } </script>
Options Centering on latitude and longitude Zoom level, Zooming, Panning Markers MapType (Street, terrain, etc.)
Reference https://developers.google.com/maps/documentation/javas cript/reference#release-version