SlideShare ist ein Scribd-Unternehmen logo
1 von 21
Itinéraire sur Google Maps
Lightning Talks
Chrigui Sarah
2
Plan
Introduction
API Google Maps v2
Exemple
Conclusion
Lightning Talks: Itinéraire sur Google Maps
3
Introduction
Intégration des Maps dans la majorité des applications Mobiles.
Besoin de précision, de guidage.
Utilisation des APIs proposés par Google .
Lightning Talks: Itinéraire sur Google Maps
4
API Google Maps v2
L’API Google Maps v2 fournit des méthodes et des classes
permettant de créer :
La map
Des évènements sur la map
Les fonctions infowindow
Les polylignes
Les classes qu’on va utiliser sont :
LatLng // créer des points a partir de leur longitude et latitude
Marker // créer un point géographique sur une carte
PolylineOptions // créer un lien graphique entre deux points sur la
carte
Lightning Talks: Itinéraire sur Google Maps
5
Exemple
Etapes
1. Afficher la carte (Google Maps).
2. Ajouter des marqueurs.
3. Récupérer de l’itinéraire.
4. Ajouter l’itinéraire à la carte.
Lightning Talks: Itinéraire sur Google Maps
6
Exemple
Etape1: Afficher la carte (Google Maps).
Lightning Talks: Itinéraire sur Google Maps
Installer le package de Google Play Services
7
Exemple
Etape1: Afficher la carte (Google Maps).
Lightning Talks: Itinéraire sur Google Maps
Importer Google Play Services sous Eclipse
8
Exemple
Etape1: Afficher la carte (Google Maps).
Lightning Talks: Itinéraire sur Google Maps
Récupérer la clé Google Maps API
9
Exemple
Etape1: Afficher la carte (Google Maps).
Lightning Talks: Itinéraire sur Google Maps
Récupérer la clé Google Maps API
10
Exemple
Etape1: Afficher la carte (Google Maps).
Lightning Talks: Itinéraire sur Google Maps
Résultat Etape 1
11
Exemple
Etape 2: Ajouter des marqueurs
Lightning Talks: Itinéraire sur Google Maps
Il faut activer le GPS pour pouvoir déterminer votre
position et par la suite y mettre un marqueur
// Recuperer la map
private GoogleMap mMap=mMap = ((SupportMapFragment)
getSupportFragmentManager().findFragmentById(R.id.map)).getMap();
// Déterminer ma position
public void onLocationChanged(Location location) {
myLocation=location;
}
LatLng mapos=new LatLng(myLocation. latitude,myLocation. longitude);
12
Exemple
Etape 2: Ajouter des marqueurs
Lightning Talks: Itinéraire sur Google Maps
// Définir le marqueur de ma position et de la destination et l’ajouter à la carte
Marker m1;
m1 = mMap.addMarker(new MarkerOptions()
.position(mapos)
.title("Ma position")
.icon(BitmapDescriptorFactory.fromResource(R.drawable.ici)));
// Faire de même pour la destination
Marker m2;
m2 = mMap.addMarker(new MarkerOptions()
.position(destination) // destionation de type LatLng
.title(« Lake Club")
.icon(BitmapDescriptorFactory.fromResource(R.drawable.laba));
13
Exemple
Etape 2: Ajouter des marqueurs
Lightning Talks: Itinéraire sur Google Maps
Résultat Etape 2
14
Exemple
Etape 3: Récupérer l’itinéraire
Lightning Talks: Itinéraire sur Google Maps
// Voici l’url avec laquelle on peut récupérer la route entre deux points
http://maps.google.com/maps/api/directions/xml?origin=
latitude_point1,longitude_point1&destination=latitude_point2,
longitude_point2&sensor=true&mode=driving
15
Exemple
Etape 3: Récupérer l’itinéraire
Lightning Talks: Itinéraire sur Google Maps
// Résultat de l’url
16
Exemple
Etape 3: Récupérer l’itinéraire
Lightning Talks: Itinéraire sur Google Maps
// Dans notre activité :
// 1) On construit l’url
StringBuilder urlString = new StringBuilder();
urlString.append("http://maps.google.com/maps/api/directions/xml?origin=");
// Ajouter des long et lat de la source
urlString.append(myLocation.getLatitude());
urlString.append(",");
urlString.append(myLocation.getLongitude());
// Ajouter des long et lat de la destination
urlString.append("&destination=");
urlString.append(dest_lat);
urlString.append(",");
urlString.append(dest_long);
urlString.append("&sensor=true&mode=driving");
Log.d("url","::"+urlString.toString());
17
Exemple
Etape 3: Récupérer l’itinéraire
Lightning Talks: Itinéraire sur Google Maps
// 2) On établit la connexion
HttpURLConnection urlConnection= null;
URL url = null;
url = new URL(urlString.toString());
urlConnection=(HttpURLConnection)url.openConnection();
urlConnection.setRequestMethod("GET");
urlConnection.setDoOutput(true);
urlConnection.setDoInput(true);
urlConnection.connect();
DocumentBuilderFactory dbf = DocumentBuilderFactory.newInstance();
DocumentBuilder db = dbf.newDocumentBuilder();
// Recuperation du resultat dans "doc"
Document doc = (Document) db.parse(urlConnection.getInputStream());
18
Exemple
Etape 4: Ajouter l’ itinéraire
Lightning Talks: Itinéraire sur Google Maps
// Retourner tous les points LatLong sur la route du point 1 vers le point 2
NodeList _nodelist_path =
doc.getElementsByTagName("overview_polyline");
private ArrayList<LatLng> decodePoly(String encoded) {…}
List<LatLng> directionPoint = decodePoly(_path);
//_path : resultat de recuperation de données du nœud overview_polyline
// Definir la couleur
PolylineOptions rectLine = new PolylineOptions().width(3).color(Color.CYAN);
for (int i = 0; i < directionPoint.size(); i++)
{
rectLine.add(directionPoint.get(i));
}
// Ajouter la route à la map
mMap.addPolyline(rectLine);
19 Lightning Talks: Itinéraire sur Google Maps
20
Conclusion
Lightning Talks: Itinéraire sur Google Maps
Autres informations peuvent être récupérées via l’url présentée (distance,
estimation de temps,..)
Profiter des API disponibles (Google Earth API, Places API ,..)
Améliorer vos applications
Merci pour votre attention

Weitere ähnliche Inhalte

Ähnlich wie Itinéraire sur Google Maps

Programmation Android - 05 - Google map
Programmation Android - 05 - Google mapProgrammation Android - 05 - Google map
Programmation Android - 05 - Google mapYann Caron
 
In01 - Programmation Android - 05 - Google map
In01 - Programmation Android - 05 - Google mapIn01 - Programmation Android - 05 - Google map
In01 - Programmation Android - 05 - Google mapYann Caron
 
Rapport pfe ingénieur ilyes issaoui
Rapport pfe ingénieur ilyes issaouiRapport pfe ingénieur ilyes issaoui
Rapport pfe ingénieur ilyes issaouiIssaoui Ilyes
 
Présentation de google maps
Présentation de google mapsPrésentation de google maps
Présentation de google mapsMozes Pierre
 
OpenStreetMap vs GoogleMaps pour développer des services sur Internet
OpenStreetMap vs GoogleMaps pour développer des services sur InternetOpenStreetMap vs GoogleMaps pour développer des services sur Internet
OpenStreetMap vs GoogleMaps pour développer des services sur InternetJean-Paul CARMONA
 
Découvrir google maps api
Découvrir google maps apiDécouvrir google maps api
Découvrir google maps apiMouafa Ahmed
 
Soutenance transparences version_final
Soutenance transparences version_finalSoutenance transparences version_final
Soutenance transparences version_finalVortana Say
 
Competitic Géolocalisez votre entreprise - numerique en entreprise
Competitic Géolocalisez votre entreprise - numerique en entrepriseCompetitic Géolocalisez votre entreprise - numerique en entreprise
Competitic Géolocalisez votre entreprise - numerique en entrepriseCOMPETITIC
 
Le geoweb et les services cartographiques 2.0
Le geoweb et les services cartographiques 2.0Le geoweb et les services cartographiques 2.0
Le geoweb et les services cartographiques 2.0Loïc Haÿ
 
Chapitre HTML5 API avancés
Chapitre HTML5 API avancésChapitre HTML5 API avancés
Chapitre HTML5 API avancésManel Ben Sassi
 
La cartographie sur Internet - De la néogéographie au géoweb
La cartographie sur Internet - De la néogéographie au géowebLa cartographie sur Internet - De la néogéographie au géoweb
La cartographie sur Internet - De la néogéographie au géowebrenalid
 
Le web mapping pour tous
Le web mapping pour tousLe web mapping pour tous
Le web mapping pour tousLoïc Haÿ
 

Ähnlich wie Itinéraire sur Google Maps (13)

Programmation Android - 05 - Google map
Programmation Android - 05 - Google mapProgrammation Android - 05 - Google map
Programmation Android - 05 - Google map
 
In01 - Programmation Android - 05 - Google map
In01 - Programmation Android - 05 - Google mapIn01 - Programmation Android - 05 - Google map
In01 - Programmation Android - 05 - Google map
 
Rapport pfe ingénieur ilyes issaoui
Rapport pfe ingénieur ilyes issaouiRapport pfe ingénieur ilyes issaoui
Rapport pfe ingénieur ilyes issaoui
 
Présentation de google maps
Présentation de google mapsPrésentation de google maps
Présentation de google maps
 
OpenStreetMap vs GoogleMaps pour développer des services sur Internet
OpenStreetMap vs GoogleMaps pour développer des services sur InternetOpenStreetMap vs GoogleMaps pour développer des services sur Internet
OpenStreetMap vs GoogleMaps pour développer des services sur Internet
 
Découvrir google maps api
Découvrir google maps apiDécouvrir google maps api
Découvrir google maps api
 
Soutenance transparences version_final
Soutenance transparences version_finalSoutenance transparences version_final
Soutenance transparences version_final
 
Competitic Géolocalisez votre entreprise - numerique en entreprise
Competitic Géolocalisez votre entreprise - numerique en entrepriseCompetitic Géolocalisez votre entreprise - numerique en entreprise
Competitic Géolocalisez votre entreprise - numerique en entreprise
 
Le geoweb et les services cartographiques 2.0
Le geoweb et les services cartographiques 2.0Le geoweb et les services cartographiques 2.0
Le geoweb et les services cartographiques 2.0
 
Chapitre HTML5 API avancés
Chapitre HTML5 API avancésChapitre HTML5 API avancés
Chapitre HTML5 API avancés
 
La cartographie sur Internet - De la néogéographie au géoweb
La cartographie sur Internet - De la néogéographie au géowebLa cartographie sur Internet - De la néogéographie au géoweb
La cartographie sur Internet - De la néogéographie au géoweb
 
Google maps
Google mapsGoogle maps
Google maps
 
Le web mapping pour tous
Le web mapping pour tousLe web mapping pour tous
Le web mapping pour tous
 

Mehr von ODC Orange Developer Center

Tendances des applications mobiles en 2014 de Noha Jaafar
Tendances des applications mobiles en 2014 de Noha JaafarTendances des applications mobiles en 2014 de Noha Jaafar
Tendances des applications mobiles en 2014 de Noha JaafarODC Orange Developer Center
 

Mehr von ODC Orange Developer Center (20)

Lightning Talks Réalité Augmentée
 Lightning Talks Réalité Augmentée Lightning Talks Réalité Augmentée
Lightning Talks Réalité Augmentée
 
Graphiste vs dévelopeur de Noha Jaafar
Graphiste vs dévelopeur de Noha JaafarGraphiste vs dévelopeur de Noha Jaafar
Graphiste vs dévelopeur de Noha Jaafar
 
Tendances des applications mobiles en 2014 de Noha Jaafar
Tendances des applications mobiles en 2014 de Noha JaafarTendances des applications mobiles en 2014 de Noha Jaafar
Tendances des applications mobiles en 2014 de Noha Jaafar
 
Countly
CountlyCountly
Countly
 
Owasp
OwaspOwasp
Owasp
 
Frameworks de développement Mobile
Frameworks de développement MobileFrameworks de développement Mobile
Frameworks de développement Mobile
 
Sencha Touch
Sencha TouchSencha Touch
Sencha Touch
 
Android Device Monitor
Android Device MonitorAndroid Device Monitor
Android Device Monitor
 
Monkey & Monkey Runner
Monkey & Monkey RunnerMonkey & Monkey Runner
Monkey & Monkey Runner
 
Shared Preferences
Shared PreferencesShared Preferences
Shared Preferences
 
Action Bar - AB & ActionBarSherlock - ABS
Action Bar - AB & ActionBarSherlock - ABSAction Bar - AB & ActionBarSherlock - ABS
Action Bar - AB & ActionBarSherlock - ABS
 
Upload - Download
Upload - DownloadUpload - Download
Upload - Download
 
Upload - Download
Upload - DownloadUpload - Download
Upload - Download
 
Sensors
SensorsSensors
Sensors
 
Framework php « Codeignitor »
Framework php « Codeignitor » Framework php « Codeignitor »
Framework php « Codeignitor »
 
J Unit
J UnitJ Unit
J Unit
 
Business Plan d’une application mobile
Business Plan d’une application mobileBusiness Plan d’une application mobile
Business Plan d’une application mobile
 
UX guidelines
UX guidelinesUX guidelines
UX guidelines
 
Push notification
Push notificationPush notification
Push notification
 
Push Notification
Push Notification Push Notification
Push Notification
 

Itinéraire sur Google Maps

  • 1. Itinéraire sur Google Maps Lightning Talks Chrigui Sarah
  • 2. 2 Plan Introduction API Google Maps v2 Exemple Conclusion Lightning Talks: Itinéraire sur Google Maps
  • 3. 3 Introduction Intégration des Maps dans la majorité des applications Mobiles. Besoin de précision, de guidage. Utilisation des APIs proposés par Google . Lightning Talks: Itinéraire sur Google Maps
  • 4. 4 API Google Maps v2 L’API Google Maps v2 fournit des méthodes et des classes permettant de créer : La map Des évènements sur la map Les fonctions infowindow Les polylignes Les classes qu’on va utiliser sont : LatLng // créer des points a partir de leur longitude et latitude Marker // créer un point géographique sur une carte PolylineOptions // créer un lien graphique entre deux points sur la carte Lightning Talks: Itinéraire sur Google Maps
  • 5. 5 Exemple Etapes 1. Afficher la carte (Google Maps). 2. Ajouter des marqueurs. 3. Récupérer de l’itinéraire. 4. Ajouter l’itinéraire à la carte. Lightning Talks: Itinéraire sur Google Maps
  • 6. 6 Exemple Etape1: Afficher la carte (Google Maps). Lightning Talks: Itinéraire sur Google Maps Installer le package de Google Play Services
  • 7. 7 Exemple Etape1: Afficher la carte (Google Maps). Lightning Talks: Itinéraire sur Google Maps Importer Google Play Services sous Eclipse
  • 8. 8 Exemple Etape1: Afficher la carte (Google Maps). Lightning Talks: Itinéraire sur Google Maps Récupérer la clé Google Maps API
  • 9. 9 Exemple Etape1: Afficher la carte (Google Maps). Lightning Talks: Itinéraire sur Google Maps Récupérer la clé Google Maps API
  • 10. 10 Exemple Etape1: Afficher la carte (Google Maps). Lightning Talks: Itinéraire sur Google Maps Résultat Etape 1
  • 11. 11 Exemple Etape 2: Ajouter des marqueurs Lightning Talks: Itinéraire sur Google Maps Il faut activer le GPS pour pouvoir déterminer votre position et par la suite y mettre un marqueur // Recuperer la map private GoogleMap mMap=mMap = ((SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map)).getMap(); // Déterminer ma position public void onLocationChanged(Location location) { myLocation=location; } LatLng mapos=new LatLng(myLocation. latitude,myLocation. longitude);
  • 12. 12 Exemple Etape 2: Ajouter des marqueurs Lightning Talks: Itinéraire sur Google Maps // Définir le marqueur de ma position et de la destination et l’ajouter à la carte Marker m1; m1 = mMap.addMarker(new MarkerOptions() .position(mapos) .title("Ma position") .icon(BitmapDescriptorFactory.fromResource(R.drawable.ici))); // Faire de même pour la destination Marker m2; m2 = mMap.addMarker(new MarkerOptions() .position(destination) // destionation de type LatLng .title(« Lake Club") .icon(BitmapDescriptorFactory.fromResource(R.drawable.laba));
  • 13. 13 Exemple Etape 2: Ajouter des marqueurs Lightning Talks: Itinéraire sur Google Maps Résultat Etape 2
  • 14. 14 Exemple Etape 3: Récupérer l’itinéraire Lightning Talks: Itinéraire sur Google Maps // Voici l’url avec laquelle on peut récupérer la route entre deux points http://maps.google.com/maps/api/directions/xml?origin= latitude_point1,longitude_point1&destination=latitude_point2, longitude_point2&sensor=true&mode=driving
  • 15. 15 Exemple Etape 3: Récupérer l’itinéraire Lightning Talks: Itinéraire sur Google Maps // Résultat de l’url
  • 16. 16 Exemple Etape 3: Récupérer l’itinéraire Lightning Talks: Itinéraire sur Google Maps // Dans notre activité : // 1) On construit l’url StringBuilder urlString = new StringBuilder(); urlString.append("http://maps.google.com/maps/api/directions/xml?origin="); // Ajouter des long et lat de la source urlString.append(myLocation.getLatitude()); urlString.append(","); urlString.append(myLocation.getLongitude()); // Ajouter des long et lat de la destination urlString.append("&destination="); urlString.append(dest_lat); urlString.append(","); urlString.append(dest_long); urlString.append("&sensor=true&mode=driving"); Log.d("url","::"+urlString.toString());
  • 17. 17 Exemple Etape 3: Récupérer l’itinéraire Lightning Talks: Itinéraire sur Google Maps // 2) On établit la connexion HttpURLConnection urlConnection= null; URL url = null; url = new URL(urlString.toString()); urlConnection=(HttpURLConnection)url.openConnection(); urlConnection.setRequestMethod("GET"); urlConnection.setDoOutput(true); urlConnection.setDoInput(true); urlConnection.connect(); DocumentBuilderFactory dbf = DocumentBuilderFactory.newInstance(); DocumentBuilder db = dbf.newDocumentBuilder(); // Recuperation du resultat dans "doc" Document doc = (Document) db.parse(urlConnection.getInputStream());
  • 18. 18 Exemple Etape 4: Ajouter l’ itinéraire Lightning Talks: Itinéraire sur Google Maps // Retourner tous les points LatLong sur la route du point 1 vers le point 2 NodeList _nodelist_path = doc.getElementsByTagName("overview_polyline"); private ArrayList<LatLng> decodePoly(String encoded) {…} List<LatLng> directionPoint = decodePoly(_path); //_path : resultat de recuperation de données du nœud overview_polyline // Definir la couleur PolylineOptions rectLine = new PolylineOptions().width(3).color(Color.CYAN); for (int i = 0; i < directionPoint.size(); i++) { rectLine.add(directionPoint.get(i)); } // Ajouter la route à la map mMap.addPolyline(rectLine);
  • 19. 19 Lightning Talks: Itinéraire sur Google Maps
  • 20. 20 Conclusion Lightning Talks: Itinéraire sur Google Maps Autres informations peuvent être récupérées via l’url présentée (distance, estimation de temps,..) Profiter des API disponibles (Google Earth API, Places API ,..) Améliorer vos applications
  • 21. Merci pour votre attention