This document provides an overview of geolocation and mapping using Google Maps services. It defines geolocation as identifying the real-world location of an object like a mobile phone or computer. Mapping refers to map-making and cartography. The document reviews the navigator.geolocation API for accessing location data, the Google Maps Javascript API for embedding maps, and common overlays like markers and polylines that can be added to maps. It also summarizes services for obtaining directions and distance matrix information between locations.

1. Geolocation
&
Mapping
Ivano Malavolta
ivano.malavolta@univaq.it
http://www.di.univaq.it/malavolta

2. Roadmap
• Introduction
• Geolocation
• Google Maps Services*
* In this lecture we refer to Google Maps Services only because of space
limitations. Other services, like Yahoo! Place Finder, can be used as valid
alternatives

3. Geolocation
Geolocation is the identification of the real-world
geographic location of an object, like
• mobile phone
• Internet-connected computer terminal
Geolocation may refer to the practice of assessing the
location, or to the actual assessed location

4. Mapping
Mapping usually refers to map-making and often
used instead of cartography

5. Geolocation VS Mapping
Geolocation refers to geospatial
data collection and manipulation
ex. LatLon calculations, geocoding, etc.
Mapping refers to the activity of
creating a map through some
cartographic works
ex. maps, layers, markers, routes, etc.

6. Roadmap
• Introduction
• Geolocation
• Google Maps Services*
* In this lecture we refer to Google Maps Services only because of their high
understandability and stability. Other services, like Yahoo! Place Finder, can
be used as valid alternatives

7. Geolocation
navigator.geolocation
Provides access for capturing location information for
the device, like:
• latitude
• longitude
• Speed

8. Geolocation
The API itself is agnostic of the underlying location
information sources
Common sources of location information include
• Global Positioning System (GPS)
• location info from IP address, RFID, WiFi,GSM
cell IDs, etc.
No guarantee is given that the API returns the device's
actual location

9. Geolocation Methods
The geolocation object provides 3 methods:
• geolocation.getCurrentPosition
• geolocation.watchPosition
• geolocation.clearWatch

10. getCurrentPosition
It returns the device's current position
getCurrentPosition(win, [fail], [options]);
win
callback function with a Position parameter
fail
error callback
options
geolocation options

11. watchPosition
It gets the device's position when a change in position has
been detected
var id = watchPosition(win, [fail], [options]);
win
callback function with a Position parameter
fail
error callback
options
geolocation options

12. clearWatch
Stop watching the Geolocation referenced by the
watch ID parameter
clearWatch(watchID);
watchID
ID returned by geolocation.watchPosition

13. Options
• frequency (Number)
– How often to retrieve the position in milliseconds
• enableHighAccuracy (Boolean)
– Receive the best possible results
• timeout (Number)
– The maximum length of time (msec) that is allowed to pass
from the call until the corresponding callback is invoked
• maximumAge (Number)
– Accept a cached position whose age is no greater than the
specified time in milliseconds

14. The Position object
Contains the data created by the geolocation API
It is passed as argument to the success callbacks of
getCurrentPosition and watchPosition
Properties:
coords:
coords: A set of geographic Coordinates seconds in iOS
timestamp: Creation timestamp in milliseconds

15. The Coordinates object
A set of properties that describe the geographic
coordinates of a position
The Coordinates object is created and populated by
Cordova, and attached to the Position object

16. The Coordinates object
Properties:
• latitude (Number)
– Latitude in decimal degrees
• longitude (Number)
– Longitude in decimal degrees
• accuracy (Number)
– Accuracy level of the latitude and longitude coordinates in
meters
http://bit.ly/Ln6AtM

17. The Coordinates object
null in Android
• altitude (Number)
– Height of the position in meters above the ellipsoid
• altitudeAccuracy (Number)
– Accuracy level of the altitude coordinate in meters
http://bit.ly/Ln7V3H

18. The Coordinates object
• heading* (Number)
– Direction of travel, specified in degrees counting
clockwise relative to the true north
• speed (Number)
– Current ground speed of the device, specified in meters
per second
The Compass API in Cordova is
exclusively dedicated to the
heading property
http://bit.ly/LnanXV

19. Position Error
Encapsulates the error code resulting from a failed
position capture operation
It contains a pre-defined error code
pre-
PositionError.PERMISSION_DENIED
PositionError.POSITION_UNAVAILABLE
PositionError.TIMEOUT

20. Example
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);
}

21. Roadmap
• Introduction
• Geolocation
• Google Maps Services*
* In this lecture we refer to Google Maps Services only because of their high
understandability and stability. Other services, like Yahoo! Place Finder, can
be used as valid alternatives

22. Google Maps API
The Google Maps Javascript API lets you embed Google
Maps in your app
The latest version (v3) of this API
is especially designed to be faster
and more applicable to mobile
devices
http://www.cibando.com

23. Goole Maps API
The API provides a number of utilities for manipulating
maps and adding content to the map through a
variety of services
You can see it like a way to programmatically manage
maps on http://maps.google.com

24. GMaps Basics
google.maps.Map
This object represents a GMaps map
it will contain the maps along with all the other
elements, like markers, polygons, etc.

25. GMaps Basics
Here is its constructor:
google.maps.Map(htmlElement, options);
• htmlElement
– a reference to a HTML element where you want the
map to be inserted
• for example <div id=“map”></div>
• options
– an object literal containing a set of properties

26. GMaps Basics
The options parameter may have these properties:
• center (google.maps.LatLng)
– the center of the map
• zoom (Number)
– the initial zoom-level of the map
• mapTypeId (google.maps.MapTypeId)
– what kind of map type that would initially be used
– The most common type is google.maps.MapTypeId.ROADMAP

27. GMaps Basics
• draggable (boolean)
– if false, prevents the map from being dragged
• minZoom (Number)
– the minimum zoom level which will be displayed on the map
• maxZoom (Number)
– the maximum zoom level which will be displayed on the map
• zoomControl (boolean)
– if false, hides the control to zoom in the map
• etc...

28. The LatLng object
It is a point in geographical coordinates:
• latitude
• longitude
ex. new google.maps.LatLng(57.8, 14.0);

29. The LatLngBounds object
It represents a rectangle in geographical coordinates
• south-west
• north-east
ex. 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. Map Types
You must specifically set an initial map type at this
time as well
mapTypeId: google.maps.MapTypeId.ROADMAP
Supported types:
• ROADMAP
• SATELLITE
• HYBRID
• TERRAIN

31. Example
// 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. GMaps Events
There are 2 types of events:
• User events
– are propagated from the DOM to the Google Maps API
– for example click
• MVC state change notifications
– reflect changes in Maps API objects and are named using
a property_changed convention
– for example the API will fire a zoom_changed event on a
map when the map's zoom level changes

33. Map Event Listeners
You register for event notifications using the
addListener() event handler
google.maps.event.addListener(obj, eventname, callback)
• obj the object on which the event can occur
obj:
– ex. the whole map, a marker, etc.
• eventname an event to listen for
eventname:
– ex. “click”, “center_changed”, “zoom_changed”, etc.
– every objects can respond to different types of events
• callback function to call when the specified event
callback:
occurs

34. DOM Object Events
It allows you to capture events occurred on elements
within the DOM
addDOMListener(obj, eventname, callback)
It is similar to addListener, but here obj can be any
element within the DOM

35. Example
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. GMaps Overlays
Overlays are objects that you “add” on the map like
map,
• points,
• lines,
• areas,
• collection of other objects
They are tied to latitude/longitude coordinates
so they move when you drag or zoom the map
http://bit.ly/Lztdac

37. http://bit.ly/LztJoV
Types of Overlays in GMaps
• Marker
– represent single locations on the map
– can be represented also by an icon
• Polyline
– an ordered sequence of locations
– represent lines on the map
In this lecture we will focus on
markers & polylines only

38. Types of Overlays in GMaps
• Polygon
– an ordered sequence of locations
– define a region on the map
• Map Types
– represent map layers
– can replace base map tiles
– can be displayed on top of
base map tiles
http://bit.ly/LztFoV
http://www.mapofthedead.com/

39. Types of Overlays in GMaps
• Info Window
– displays content within a popup
balloon on top of a map
– linked to a specific location
• Custom Overlay
– any DOM element that be
positioned on the map
http://bit.ly/LztFoV

40. Markers
Markers identify locations on the map
Markers are designed to be interactive
you can attach event listeners to them
ex.
marker = new google.maps.Marker({
// options
});
google.maps.event.addListener(marker, 'click', callback);

41. Marker Options
The google.maps.Marker constructor takes a single
object literal specifying the initial properties of the
marker
• position
– LatLng identifying the initial location of the marker
• map
– the Map object on which to place the marker
– You can add the marker later by calling setMap() method
– You can remove a marker by calling setMap() with null

42. Marker Options
• animation
– google.maps.Animation.DROP
– google.maps.Animation.BOUNCE
You may initiate an animation on an existing marker by
calling setAnimation() on the marker object
• draggable
– makes the marker draggable on the map
• icon
– used to set a custom icon for the marker
– it defines the URL of an image to be used as icon
– The Google Maps API will size the icon automatically

43. Polylines
A Polyline object consists of an array of LatLngs
It creates a series of line segments that connect those
locations in an ordered sequence
Similarly to Marker, the constructor of Polyline
takes an object literal containing the options
Also Polyline can react to user events

44. Polylines Options
• path[]
– array of LatLng, one for each point of the polyline
• strokeColor
– color of the lines in CSS syntax
• strokeOpacity
– opacity of the lines as a decimal number between 0 and 1
• strokeWeight
– the weight of the line's stroke in pixels
• editable
– boolean, specifies whether users can modify it or not

45. Example
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
});
flightPath.setMap(map);

46. GMaps Services
3 are the main services provided by GMaps:
• Directions
• Distance Matrix
• Geocoding

47. Directions
You can calculate directions (using a variety of methods of
transportation) by using the object
google.maps.DirectionsService
This object communicates with Google Maps which receives
direction requests and returns computed results
You can
1. manage these directions results directly
2. use the DirectionsRenderer object to render them

48. Direction Requests
1. create an object of type DirectionsService
2. create a DirectionsRequest object literal containing
the input terms
3. call DirectionsService.route() to initiate a
request to the Directions service
4. manage the results via a callback function manageRoute
var dirService = new google.maps.DirectionsService();
var request = {
origin: ”…”,
destination: “…”,
travelMode: google.maps.TravelMode.DRIVING
};
dirService.route(request, manageRoute);

49. Directions Request Properties

50. Directions Results
When sending a directions request to the DirectionsService,
you receive a response consisting of
1. a DirectionsResult object
– contains an array of DirectionsRoute object, each of
them representing a route from the origin to destination
2. a status code
– OK, NOT_FOUND, ZERO_RESULTS, INVALID_REQUEST, etc.

51. Example of Route
destination
waypoints
origin
steps
legs
http://goo.gl/maps/ZK4H

52. Routes
It is an object literal with the following fields:
• legs array of DirectionsLeg objects
legs[]:
• waypoint_order indicates the order of waypoints
waypoint_order[]:
• overview_path[]: array of LatLngs approximating the
overview_path
path of the resulting directions
• bounds LatLngBounds containing the route
bounds:
• copyrights: text
copyrights
• warnings text
warnings:

53. Legs
It is an object literal with the following fields:
• steps[]:
steps array of DirectionsStep objects
• distance:
distance total distance covered by this leg
• duration:
duration total duration of the leg
• start_location:
start_location the origin of the leg as LatLng
• end_location:
end_location the destination of the leg as LatLng
• start_address:
start_address the origin of the leg as text
• end_address: the destination of the leg as text
end_address

54. Steps
It is an object literal with the following fields:
• instructions:
instructions instructions for this step within as text
• distance:
distance total distance covered by this step
• duration:
duration total duration of the step
• start_location:
start_location the origin of the leg as LatLng
• end_location:
end_location the destination of the leg as LatLng

55. Example
http://bit.ly/KtJrUM

56. Distance Matrix
It is a service to compute
1. travel distance
2. journey duration
between multiple origins and destinations
This service does not return detailed route information
you need the Directions Service for these

57. Distance Requests
google.maps.DistanceMatrixService
.getDistanceMatrix(options, callback)
where
• options
– object literals containing origin, destination, travel modes, ...
• callback
– the function executed upon response

58. Distance Request Options
• origins
– array containing one or more address strings and/or LatLng
• destinations
– array containing one or more address strings and/or LatLng
• travelMode
– google.maps.TravelMode.DRIVING
– google.maps.TravelMode.WALKING
– google.maps.TravelMode.BICYCLING
• unitSystem
– google.maps.UnitSystem.METRIC
– google.maps.UnitSystem.IMPERIAL
• avoidHighways (boolean)
• avoidTolls (boolean)

59. Distance Responses
A successful call to the Distance Matrix service
returns:
• a DistanceMatrixResponse object
• a DistanceMatrixStatus object
These are passed to the callback function you specified
in the request

60. DistanceMatrixResponse
It is an object containing the following properties:
• originAddresses
– array containing the locations passed in the origins field
• destinationAddresses
– array containing the locations passed in the destinations field
• rows
– array of DistanceMatrixResponseRow objects, with each row
corresponding to an origin
• elements
– are children of rows, and correspond to a pairing of the row's
origin with each destination
– They contain status, distance, and duration information for each
origin/destination pair

61. Example
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. Geocoding
It is the process of converting addresses into
geographical coordinates
ex.
“via Vetoio 1, L’Aquila” 42.362319,13.368514
A geocoder may return more than a result
You can also perform the inverse conversion
reverse geocoding

63. Geocoding Requests
var geocoder = google.maps.Geocoder();
geocoder.geocode(options, callback);
where
• options (object literal)
– address (String) geocoding
– latLng (LatLng) reverse geocoding
– bounds (LatLngBounds)
– region (String)
• see http://www.iana.org/assignments/language-subtag-registry
• callback
– the function executed upon response

64. Geocoding Responses
They are passed to the callback function as a
GeocoderResults object

65. Example
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. What’s more?
• Controls
– UI elements to allow user interaction with the map
– zoom, Street View, scale, map type
• Layers
– GeoRSS, KML, Fusion Tables, etc.
• Map Types & Styles (see http://bit.ly/JEA6Nu)
– custom styles, image overlays, etc.
• StreetView Services
• Drawing Library
– drawing tools, geometry, etc.

67. References
https://developers.google.com/maps/documentation/javascript/