Geolocation and Mapping in PhoneGap applications

•

•

navigator.geolocation

•

•

•

•

•

geolocation

•

•

•

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

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

clearWatch(watchID);

•

–

•

–

•

–

•

–

getCurrentPosition watchPosition

Coordinates

Position

•

–

•

–

•

–

•

–

•

–

•

–

•

–

PositionError.PERMISSION_DENIED

PositionError.POSITION_UNAVAILABLE

PositionError.TIMEOUT

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

}

google.maps.Map

google.maps.Map(htmlElement, options);

•

–

• <div id=“map”></div>

•

–

•

–

•

–

•

–

–

•

–

•

–

•

–

•

–

•

•

•

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

•

•

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.

mapTypeId: google.maps.MapTypeId.ROADMAP

• ROADMAP

• SATELLITE

• HYBRID

• TERRAIN

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

•

–

– touchend

•

–

–

addListener()

google.maps.event.addListener(obj, eventname, callback)

•

–

•

–

–

•

addDOMListener(obj, eventname, callback)

addListener, obj

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

}

);

•

•

•

•

•

–

–

•

–

–

•

–

–

•

–

–

–

•

–

–

•

–

marker = new google.maps.Marker({

// options

});

google.maps.event.addListener(marker, 'click',

callback);

google.maps.Marker

•

– LatLng

•

– Map

– setMap()

– setMap() null

•– google.maps.Animation.DROP

– google.maps.Animation.BOUNCE

setAnimation()

•

–

•

–

–

–

Polyline LatLngs

Marker Polyline

•

– LatLng

•

–

•

–

•

–

•

–

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

•

•

•

google.maps.DirectionsService

DirectionsService

DirectionsRequest

DirectionsService.route()

manageRoute

var dirService = new google.maps.DirectionsService();

var request = {

origin: ”…”,

destination: “…”, travelMode: google.maps.TravelMode.DRIVING

};

dirService.route(request, manageRoute);

– DirectionsRoute

–

• DirectionsLeg

•

• LatLngs

• LatLngBounds

•

•

• DirectionsStep

•

•

• LatLng

•

LatLng

•

•

•

•

•

• LatLng

•

LatLng

google.maps.DistanceMatrixService

.getDistanceMatrix(options, callback)

•

–

•

–

•–

•–

•–

–

–

•–

–

•

•

• DistanceMatrixResponse

• DistanceMatrixStatus

•–

•–

•–

•–

–

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

}

}

42.362319,13.368514

var geocoder = google.maps.Geocoder();

geocoder.geocode(options, callback);

•–

–

–

–

•

•–

GeocoderResults

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

}

}

•

–

–

•

–

•

–

•

•

–