SlideShare a Scribd company logo
1 of 68
Download to read offline
•
•
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);
}
}
•
–
–
•
–
•
–
•
•
–
Geolocation and Mapping in PhoneGap applications
Geolocation and Mapping in PhoneGap applications

More Related Content

What's hot

Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece
Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece
Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece
CoLab Athens
 
Askayworkshop
AskayworkshopAskayworkshop
Askayworkshop
sconnin
 
How Quick Can We Be? Data Visualization Techniques for Engineers.
How Quick Can We Be? Data Visualization Techniques for Engineers. How Quick Can We Be? Data Visualization Techniques for Engineers.
How Quick Can We Be? Data Visualization Techniques for Engineers.
Avni Khatri
 
Exploring Canvas
Exploring CanvasExploring Canvas
Exploring Canvas
Kevin Hoyt
 
Th 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficient
Th 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficientTh 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficient
Th 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficient
Bin Shao
 
How to build a html5 websites.v1
How to build a html5 websites.v1How to build a html5 websites.v1
How to build a html5 websites.v1
Bitla Software
 
Python en la Plataforma ArcGIS
Python en la Plataforma ArcGISPython en la Plataforma ArcGIS
Python en la Plataforma ArcGIS
Xander Bakker
 

What's hot (15)

Core Location and Map Kit: Bringing Your Own Maps [Voices That Matter: iPhone...
Core Location and Map Kit: Bringing Your Own Maps [Voices That Matter: iPhone...Core Location and Map Kit: Bringing Your Own Maps [Voices That Matter: iPhone...
Core Location and Map Kit: Bringing Your Own Maps [Voices That Matter: iPhone...
 
Geolocation Databases in Ruby on Rails
Geolocation Databases in Ruby on RailsGeolocation Databases in Ruby on Rails
Geolocation Databases in Ruby on Rails
 
Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece
Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece
Ioannis Doxaras on GIS and Gmaps at 1st GTUG meetup Greece
 
Askayworkshop
AskayworkshopAskayworkshop
Askayworkshop
 
How Quick Can We Be? Data Visualization Techniques for Engineers.
How Quick Can We Be? Data Visualization Techniques for Engineers. How Quick Can We Be? Data Visualization Techniques for Engineers.
How Quick Can We Be? Data Visualization Techniques for Engineers.
 
Exploring Canvas
Exploring CanvasExploring Canvas
Exploring Canvas
 
Getting Oriented with MapKit: Everything you need to get started with the new...
Getting Oriented with MapKit: Everything you need to get started with the new...Getting Oriented with MapKit: Everything you need to get started with the new...
Getting Oriented with MapKit: Everything you need to get started with the new...
 
Th 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficient
Th 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficientTh 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficient
Th 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficient
 
How to build a html5 websites.v1
How to build a html5 websites.v1How to build a html5 websites.v1
How to build a html5 websites.v1
 
Python en la Plataforma ArcGIS
Python en la Plataforma ArcGISPython en la Plataforma ArcGIS
Python en la Plataforma ArcGIS
 
Keeping Track of Moving Things: MapKit and CoreLocation in Depth
Keeping Track of Moving Things: MapKit and CoreLocation in DepthKeeping Track of Moving Things: MapKit and CoreLocation in Depth
Keeping Track of Moving Things: MapKit and CoreLocation in Depth
 
Get mapping with leaflet js
Get mapping with leaflet jsGet mapping with leaflet js
Get mapping with leaflet js
 
Introduction to MapKit
Introduction to MapKitIntroduction to MapKit
Introduction to MapKit
 
Google Maps Api
Google Maps ApiGoogle Maps Api
Google Maps Api
 
Developing Applications with Microsoft Virtual Earth
Developing Applications with Microsoft Virtual EarthDeveloping Applications with Microsoft Virtual Earth
Developing Applications with Microsoft Virtual Earth
 

Similar to Geolocation and Mapping in PhoneGap applications (6)

W3C Geolocation
W3C GeolocationW3C Geolocation
W3C Geolocation
 
PhoneGap: Accessing Device Capabilities
PhoneGap: Accessing Device CapabilitiesPhoneGap: Accessing Device Capabilities
PhoneGap: Accessing Device Capabilities
 
Paperjs presentation
Paperjs presentationPaperjs presentation
Paperjs presentation
 
Paperjs presentation
Paperjs presentationPaperjs presentation
Paperjs presentation
 
ECMAScript 6 major changes
ECMAScript 6 major changesECMAScript 6 major changes
ECMAScript 6 major changes
 
HTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHexHTML5勉強会#23_GeoHex
HTML5勉強会#23_GeoHex
 

More from Ivano Malavolta

More from Ivano Malavolta (20)

Conducting Experiments on the Software Architecture of Robotic Systems (QRARS...
Conducting Experiments on the Software Architecture of Robotic Systems (QRARS...Conducting Experiments on the Software Architecture of Robotic Systems (QRARS...
Conducting Experiments on the Software Architecture of Robotic Systems (QRARS...
 
The H2020 experience
The H2020 experienceThe H2020 experience
The H2020 experience
 
The Green Lab - Research cocktail @Vrije Universiteit Amsterdam (October 2020)
The Green Lab - Research cocktail  @Vrije Universiteit Amsterdam (October 2020)The Green Lab - Research cocktail  @Vrije Universiteit Amsterdam (October 2020)
The Green Lab - Research cocktail @Vrije Universiteit Amsterdam (October 2020)
 
Software sustainability and Green IT
Software sustainability and Green ITSoftware sustainability and Green IT
Software sustainability and Green IT
 
Navigation-aware and Personalized Prefetching of Network Requests in Android ...
Navigation-aware and Personalized Prefetching of Network Requests in Android ...Navigation-aware and Personalized Prefetching of Network Requests in Android ...
Navigation-aware and Personalized Prefetching of Network Requests in Android ...
 
How Maintainability Issues of Android Apps Evolve [ICSME 2018]
How Maintainability Issues of Android Apps Evolve [ICSME 2018]How Maintainability Issues of Android Apps Evolve [ICSME 2018]
How Maintainability Issues of Android Apps Evolve [ICSME 2018]
 
Collaborative Model-Driven Software Engineering: a Classification Framework a...
Collaborative Model-Driven Software Engineering: a Classification Framework a...Collaborative Model-Driven Software Engineering: a Classification Framework a...
Collaborative Model-Driven Software Engineering: a Classification Framework a...
 
Experimenting on Mobile Apps Quality - a tale about Energy, Performance, and ...
Experimenting on Mobile Apps Quality - a tale about Energy, Performance, and ...Experimenting on Mobile Apps Quality - a tale about Energy, Performance, and ...
Experimenting on Mobile Apps Quality - a tale about Energy, Performance, and ...
 
Modeling objects interaction via UML sequence diagrams [Software Design] [Com...
Modeling objects interaction via UML sequence diagrams [Software Design] [Com...Modeling objects interaction via UML sequence diagrams [Software Design] [Com...
Modeling objects interaction via UML sequence diagrams [Software Design] [Com...
 
Modeling behaviour via UML state machines [Software Design] [Computer Science...
Modeling behaviour via UML state machines [Software Design] [Computer Science...Modeling behaviour via UML state machines [Software Design] [Computer Science...
Modeling behaviour via UML state machines [Software Design] [Computer Science...
 
Object-oriented design patterns in UML [Software Design] [Computer Science] [...
Object-oriented design patterns in UML [Software Design] [Computer Science] [...Object-oriented design patterns in UML [Software Design] [Computer Science] [...
Object-oriented design patterns in UML [Software Design] [Computer Science] [...
 
Structure modeling with UML [Software Design] [Computer Science] [Vrije Unive...
Structure modeling with UML [Software Design] [Computer Science] [Vrije Unive...Structure modeling with UML [Software Design] [Computer Science] [Vrije Unive...
Structure modeling with UML [Software Design] [Computer Science] [Vrije Unive...
 
Requirements engineering with UML [Software Design] [Computer Science] [Vrije...
Requirements engineering with UML [Software Design] [Computer Science] [Vrije...Requirements engineering with UML [Software Design] [Computer Science] [Vrije...
Requirements engineering with UML [Software Design] [Computer Science] [Vrije...
 
Modeling and abstraction, software development process [Software Design] [Com...
Modeling and abstraction, software development process [Software Design] [Com...Modeling and abstraction, software development process [Software Design] [Com...
Modeling and abstraction, software development process [Software Design] [Com...
 
[2017/2018] Agile development
[2017/2018] Agile development[2017/2018] Agile development
[2017/2018] Agile development
 
Reconstructing microservice-based architectures
Reconstructing microservice-based architecturesReconstructing microservice-based architectures
Reconstructing microservice-based architectures
 
[2017/2018] AADL - Architecture Analysis and Design Language
[2017/2018] AADL - Architecture Analysis and Design Language[2017/2018] AADL - Architecture Analysis and Design Language
[2017/2018] AADL - Architecture Analysis and Design Language
 
[2017/2018] Architectural languages
[2017/2018] Architectural languages[2017/2018] Architectural languages
[2017/2018] Architectural languages
 
[2017/2018] Introduction to Software Architecture
[2017/2018] Introduction to Software Architecture[2017/2018] Introduction to Software Architecture
[2017/2018] Introduction to Software Architecture
 
[2017/2018] RESEARCH in software engineering
[2017/2018] RESEARCH in software engineering[2017/2018] RESEARCH in software engineering
[2017/2018] RESEARCH in software engineering
 

Recently uploaded

Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
FIDO Alliance
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
FIDO Alliance
 
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
FIDO Alliance
 
Microsoft BitLocker Bypass Attack Method.pdf
Microsoft BitLocker Bypass Attack Method.pdfMicrosoft BitLocker Bypass Attack Method.pdf
Microsoft BitLocker Bypass Attack Method.pdf
Overkill Security
 

Recently uploaded (20)

Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentation
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptx
 
Event-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream ProcessingEvent-Driven Architecture Masterclass: Challenges in Stream Processing
Event-Driven Architecture Masterclass: Challenges in Stream Processing
 
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
 
Navigating the Large Language Model choices_Ravi Daparthi
Navigating the Large Language Model choices_Ravi DaparthiNavigating the Large Language Model choices_Ravi Daparthi
Navigating the Large Language Model choices_Ravi Daparthi
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!
 
Stronger Together: Developing an Organizational Strategy for Accessible Desig...
Stronger Together: Developing an Organizational Strategy for Accessible Desig...Stronger Together: Developing an Organizational Strategy for Accessible Desig...
Stronger Together: Developing an Organizational Strategy for Accessible Desig...
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate Guide
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
 
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
AI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by AnitarajAI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by Anitaraj
 
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
 
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdfFrisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
Frisco Automating Purchase Orders with MuleSoft IDP- May 10th, 2024.pptx.pdf
 
Microsoft BitLocker Bypass Attack Method.pdf
Microsoft BitLocker Bypass Attack Method.pdfMicrosoft BitLocker Bypass Attack Method.pdf
Microsoft BitLocker Bypass Attack Method.pdf
 
UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overview
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage Intacct
 
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
The Ultimate Prompt Engineering Guide for Generative AI: Get the Most Out of ...
 

Geolocation and Mapping in PhoneGap applications