Geolocation and Mapping in PhoneGap applications This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2013. http://www.ivanomalavolta.com

3. •
•

7. navigator.geolocation
•
•
•

8. •
•

9. geolocation
•
•
•

10. getCurrentPosition(win, [fail], [options]);

11. var id = watchPosition(win, [fail], [options]);

12. clearWatch(watchID);

13. •
–
•
–
•
–
•
–

14. getCurrentPosition watchPosition

15. Coordinates
Position

16. •
–
•
–
•
–

17. •
–
•
–

18. •
–
•
–

19. PositionError.PERMISSION_DENIED
PositionError.POSITION_UNAVAILABLE
PositionError.TIMEOUT

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. •
–
•
–
•
–
–

27. •
–
•
–
•
–
•
–
•

28. •
•
new google.maps.LatLng(42.3606,13.3772);

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>

32. •
–
– touchend
•
–
–

33. addListener()
google.maps.event.addListener(obj, eventname, callback)
•
–
•
–
–
•

34. addDOMListener(obj, eventname, callback)
addListener, obj

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

42. •
– google.maps.Animation.DROP
– google.maps.Animation.BOUNCE
setAnimation()
•
–
•
–
–
–

43. Polyline LatLngs
Marker Polyline

44. •
– LatLng
•
–
•
–
•
–
•
–

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. •
•
•

47. google.maps.DirectionsService

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);

50. – DirectionsRoute
–

52. • DirectionsLeg
•
• LatLngs
• LatLngBounds
•
•

53. • DirectionsStep
•
•
• LatLng
•
LatLng
•
•

54. •
•
•
• LatLng
•
LatLng

56. 

57. google.maps.DistanceMatrixService
.getDistanceMatrix(options, callback)
•
–
•
–

58. •
–
•
–
•
–
–
–
•
–
–
•
•

59. • DistanceMatrixResponse
• DistanceMatrixStatus

60. •
–
•
–
•
–
•
–
–

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);
}
}

62.  42.362319,13.368514


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);
}
}

66. •
–
–
•
–
•
–
•
•
–