Download presentation
Presentation is loading. Please wait.
1
Geolocation using Google maps
CIS 136 Building Mobile Apps
2
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
3
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
4
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
5
Position object 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:
6
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
7
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
8
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)
9
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);
10
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).
11
Google Maps
12
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
13
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.
14
1a. Referencing the Google API or Google Maps
<script src= 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
15
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>
16
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: , lng: }, zoom: 8 }); } </script>
17
Options Centering on latitude and longitude
Zoom level, Zooming, Panning Markers MapType (Street, terrain, etc.)
18
Reference cript/reference#release-version
Similar presentations
