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

Itinéraire sur Google Maps

  • 1.
    Itinéraire sur GoogleMaps Lightning Talks Chrigui Sarah
  • 2.
    2 Plan Introduction API Google Mapsv2 Exemple Conclusion Lightning Talks: Itinéraire sur Google Maps
  • 3.
    3 Introduction Intégration des Mapsdans 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 Mapsv2 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 lacarte (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 lacarte (Google Maps). Lightning Talks: Itinéraire sur Google Maps Installer le package de Google Play Services
  • 7.
    7 Exemple Etape1: Afficher lacarte (Google Maps). Lightning Talks: Itinéraire sur Google Maps Importer Google Play Services sous Eclipse
  • 8.
    8 Exemple Etape1: Afficher lacarte (Google Maps). Lightning Talks: Itinéraire sur Google Maps Récupérer la clé Google Maps API
  • 9.
    9 Exemple Etape1: Afficher lacarte (Google Maps). Lightning Talks: Itinéraire sur Google Maps Récupérer la clé Google Maps API
  • 10.
    10 Exemple Etape1: Afficher lacarte (Google Maps). Lightning Talks: Itinéraire sur Google Maps Résultat Etape 1
  • 11.
    11 Exemple Etape 2: Ajouterdes 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: Ajouterdes 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: Ajouterdes marqueurs Lightning Talks: Itinéraire sur Google Maps Résultat Etape 2
  • 14.
    14 Exemple Etape 3: Récupérerl’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érerl’itinéraire Lightning Talks: Itinéraire sur Google Maps // Résultat de l’url
  • 16.
    16 Exemple Etape 3: Récupérerl’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érerl’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: Ajouterl’ 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érairesur 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.