$30 off During Our Annual Pro Sale. View Details »

Mobile applications Development - Lecture 16

Mobile applications Development - Lecture 16

Geolocation
Mapping
GMaps API v3

This presentation has been developed in the context of the Mobile Applications Development course at the Computer Science Department of the University of L’Aquila (Italy).

http://www.di.univaq.it/malavolta

Ivano Malavolta

June 07, 2012
Tweet

More Decks by Ivano Malavolta

Other Decks in Technology

Transcript

  1. Geolocation
    Geolocation
    &
    Mapping
    Ivano Malavolta
    Ivano Malavolta
    [email protected]
    http://www.di.univaq.it/malavolta

    View Slide

  2. Roadmap
    • Introduction
    • Geolocation
    • 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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  6. Roadmap
    • Introduction
    • Geolocation
    • 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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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:
    Properties:
    Properties:
    Properties:
    coords
    coords
    coords
    coords:
    ::
    : A set of geographic Coordinates
    timestamp:
    timestamp:
    timestamp:
    timestamp: Creation timestamp in milliseconds
    seconds in iOS

    View Slide

  15. The Coordinates object
    A set of properties that describe the geographic
    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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  20. Example
    var options = { maximumAge: 3000, timeout: 5000,
    enableHighAccuracy: true };
    navigator.geolocation.watchPosition(win, fail, options);
    function win(pos) {
    var el = ‘Latitude: ‘ + pos.coords.latitude + '');
    el += ‘Longitude: ‘ + pos.coords.longitude + '');
    el += ‘timestamp: ‘ + pos.timestamp + '');
    $(‘#block’).html(el);
    }
    function fail(err) {
    console.log(err.code);
    }

    View Slide

  21. Roadmap
    • Introduction
    • Geolocation
    • 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

    View Slide

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

    View Slide

  23. Goole Maps API
    The API provides a number of utilities
    utilities
    utilities
    utilities for manipulating
    maps and adding content
    adding content
    adding content
    adding content to the map through a
    maps and adding content
    adding content
    adding content
    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

    View Slide

  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.

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  29. The LatLngBounds object
    It represents a rectangle in geographical coordinates
    • south-west
    • 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.

    View Slide

  30. Map Types
    You must specifically set an initial map type at this
    time as well
    time as well
    mapTypeId: google.maps.MapTypeId.ROADMAP
    Supported types:

    • ROADMAP
    • SATELLITE
    • HYBRID
    • TERRAIN

    View Slide

  31. Example
    // in your JS file
    var options = {
    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);
    options);
    // somewhere in your HTML templates

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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: map
    });
    map.setCenter(marker.getPosition());
    }
    );

    View Slide

  36. GMaps Overlays
    Overlays are objects that you “add” on the map
    Overlays are objects that you “add” on the map
    Overlays are objects that you “add” on the map
    Overlays are objects that you “add” on the map, like
    • points,
    • 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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  41. Marker Options
    The google.maps.Marker constructor takes a single
    object literal specifying the initial properties of the
    object literal specifying the initial properties of the
    marker
    • position
    position
    position
    position
    – LatLng identifying the initial location of the marker
    • map
    map
    map
    map
    • map
    map
    map
    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

    View Slide

  42. Marker Options
    • animation
    animation
    animation
    animation
    – google.maps.Animation.DROP
    – 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
    draggable
    draggable
    draggable
    – makes the marker draggable on the map
    – makes the marker draggable on the map
    • icon
    icon
    icon
    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

    View Slide

  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
    takes an object literal containing the options
    Also Polyline can react to user events

    View Slide

  44. Polylines Options
    • path[]
    – array of LatLng, one for each point of the polyline
    – 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
    • strokeWeight
    – the weight of the line's stroke in pixels
    • editable
    – boolean, specifies whether users can modify it or not

    View Slide

  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({
    var polyline = new google.maps.Polyline({
    path: coords,
    strokeColor: "#00FF00",
    strokeOpacity: 1.0,
    strokeWeight: 1
    });
    flightPath.setMap(map);

    View Slide

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

    View Slide

  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

    View Slide

  48. Direction Requests
    1. create an object of type DirectionsService
    2. create a DirectionsRequest object literal containing
    the input terms
    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 dirService = new google.maps.DirectionsService();
    var request = {
    origin: ”…”,
    destination: “…”,
    travelMode: google.maps.TravelMode.DRIVING
    };
    dirService.route(request, manageRoute);

    View Slide

  49. Directions Request Properties

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  60. DistanceMatrixResponse
    It is an object containing the following properties:
    • originAddresses
    originAddresses
    originAddresses
    originAddresses
    – array containing the locations passed in the origins field
    • destinationAddresses
    destinationAddresses
    destinationAddresses
    destinationAddresses
    – array containing the locations passed in the destinations field
    • rows
    rows
    rows
    rows
    – array of DistanceMatrixResponseRow objects, with each row
    corresponding to an origin
    corresponding to an origin
    • elements
    elements
    elements
    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

    View Slide

  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);
    }, callback);
    function callback(response, status) {
    if (status == google.maps.DistanceMatrixStatus.OK) {
    var t = response.rows[0].elements[0].distance.text;
    alert(t);
    }
    }

    View Slide

  62. Geocoding
    It is the process of converting
    converting
    converting
    converting addresses into
    geographical coordinates
    geographical coordinates
    ex.
    “via Vetoio 1, L’Aquila” 42.362319,13.368514
    A geocoder may return more than a result
    A geocoder may return more than a result
    You can also perform the inverse conversion
    reverse
    reverse
    reverse
    reverse geocoding
    geocoding
    geocoding
    geocoding

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide