Geolocation and Mapping in PhoneGap applications
9 likes14,282 views
The document outlines the use of the Google Maps JavaScript API, detailing methods for obtaining geolocation and displaying maps. It includes instructions on how to create map elements, add markers, handle events, and utilize services like distance matrix and geocoding. Key functions involve getting current position, managing routes, and manipulating map types.
![getCurrentPosition(win, [fail], [options]);](https://image.slidesharecdn.com/lecture15-130604070024-phpapp01/85/Geolocation-and-Mapping-in-PhoneGap-applications-10-320.jpg)
![var id = watchPosition(win, [fail], [options]);](https://image.slidesharecdn.com/lecture15-130604070024-phpapp01/85/Geolocation-and-Mapping-in-PhoneGap-applications-11-320.jpg)
![var map; // the map object (initialization omitted here)
var coords = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
new google.maps.LatLng(-18.142599, 178.431),
new google.maps.LatLng(-27.46758, 153.027892)
];
var polyline = new google.maps.Polyline({
path: coords,
strokeColor: "#00FF00",
strokeOpacity: 1.0,
strokeWeight: 1
});
polyline.setMap(map);](https://image.slidesharecdn.com/lecture15-130604070024-phpapp01/85/Geolocation-and-Mapping-in-PhoneGap-applications-45-320.jpg)
![var origin = “L‟Aquila, Italy";
var destination = “London, England";
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix({
origins: [origin],
destinations: [destination],
travelMode: google.maps.TravelMode.DRIVING,
avoidHighways: false,
avoidTolls: false
}, callback);
function callback(response, status) {
if (status == google.maps.DistanceMatrixStatus.OK) {
var t = response.rows[0].elements[0].distance.text;
alert(t);
}
}](https://image.slidesharecdn.com/lecture15-130604070024-phpapp01/85/Geolocation-and-Mapping-in-PhoneGap-applications-61-320.jpg)
Geolocation and Mapping in PhoneGap applications
- 3. • •
- 8. • •
- 11. var id = watchPosition(win, [fail], [options]);
- 13. • – • – • – • –
- 16. • – • – • –
- 17. • – • –
- 18. • – • –
- 20. var options = { maximumAge: 3000, timeout: 5000, enableHighAccuracy: true }; navigator.geolocation.watchPosition(win, fail, options); function win(pos) { var el = „<div>Latitude: „ + pos.coords.latitude + '</div>'); el += „<div>Longitude: „ + pos.coords.longitude + '</div>'); el += „<div>timestamp: „ + pos.timestamp + '</div>'); $(„#block‟).html(el); } function fail(err) { console.log(err.code); }
- 24. google.maps.Map
- 25. google.maps.Map(htmlElement, options); • – • <div id=“map”></div> • –
- 26. • – • – • – –
- 29. • • var pt = new google.maps.LatLngBounds( new google.maps.LatLng(57.8, 14.0), new google.maps.LatLng(57.8, 14.0) ); contains(pt), intersect(bounds), getCenter(), union(bounds), etc.
- 30. mapTypeId: google.maps.MapTypeId.ROADMAP • ROADMAP • SATELLITE • HYBRID • TERRAIN
- 31. // in your JS file var options = { center: new google.maps.LatLng(-34.397, 150.644), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById(“map”), options); // somewhere in your HTML templates <div id=“map”></div>
- 35. var map = new google.maps.Map(document.getElementById(“map”), opt); google.maps.event.addListener(map, 'click', function(event) { var marker = new google.maps.Marker({ position: event.latLng, map: map }); map.setCenter(marker.getPosition()); } );
- 36. • • • •
- 37. • – – • – –
- 38. • – – • – – –
- 39. • – – • –
- 40. marker = new google.maps.Marker({ // options }); google.maps.event.addListener(marker, 'click', callback);
- 41. google.maps.Marker • – LatLng • – Map – setMap() – setMap() null
- 45. var map; // the map object (initialization omitted here) var coords = [ new google.maps.LatLng(37.772323, -122.214897), new google.maps.LatLng(21.291982, -157.821856), new google.maps.LatLng(-18.142599, 178.431), new google.maps.LatLng(-27.46758, 153.027892) ]; var polyline = new google.maps.Polyline({ path: coords, strokeColor: "#00FF00", strokeOpacity: 1.0, strokeWeight: 1 }); polyline.setMap(map);
- 46. • • •
- 48. DirectionsService DirectionsRequest DirectionsService.route() manageRoute var dirService = new google.maps.DirectionsService(); var request = { origin: ”…”, destination: “…”, travelMode: google.maps.TravelMode.DRIVING }; dirService.route(request, manageRoute);
- 52. • DirectionsLeg • • LatLngs • LatLngBounds • •
- 56.
- 61. var origin = “L‟Aquila, Italy"; var destination = “London, England"; var service = new google.maps.DistanceMatrixService(); service.getDistanceMatrix({ origins: [origin], destinations: [destination], travelMode: google.maps.TravelMode.DRIVING, avoidHighways: false, avoidTolls: false }, callback); function callback(response, status) { if (status == google.maps.DistanceMatrixStatus.OK) { var t = response.rows[0].elements[0].distance.text; alert(t); } }
- 63. var geocoder = google.maps.Geocoder(); geocoder.geocode(options, callback); • – – – – • • –
- 64. GeocoderResults
- 65. geocoder = new google.maps.Geocoder(); var address = “via Vetoio 1, L‟Aquila”; geocoder.geocode( { 'address': address}, callback); function callback(results, status) { if (status == google.maps.GeocoderStatus.OK) { for(result in results) { console.log(result.geometry.location); } } else { console.log(status); } }