TP 6 : Google maps API
Objectifs pédagogiques du TP
- Utiliser l'API de Géolocalisation du navigateur
- Se familiariser avec les différentes API Google Maps
Outils
- Appareil/navigateur implémentant la géolocalisation (GPS ou par les réseaux)
- Bibliothèque JavaScript Google Maps
- Tutoriels et ressources :
- Spécification : Geolocation API Specification (Proposed Recommendation, May 2012)
- Exemples de code : dans le répertoire Examples/geolocation :
- geolocation.html : pour la géolocalisation ; réalisé d'après la spec ; pas d'implémentation spécifique aux navigateurs nécessaire.
- directions.html : pour le calcul d'itinéraires
- API Google Maps :
Préambule
Ce TP se déroule sur deux séances : la première consiste à explorer l'API de géolocalisation et l'API Google Maps. La seconde consiste à utiliser Node.JS pour partager des coordonnées en temps réel.
Créez un projet MIF38-TP6 sur la forge, ajoutez-y votre binôme et vos encadrants (comme reporters). N'oubliez pas de mettre vos noms dans la description du projet.
Faites tourner le code de d'exemple ci-dessus et vérifiez que votre navigateur arrive à accéder à votre position. S'il vous répond "The last location provider was disabled", cela signifie que vous avez désactivé la localisation via les réseaux sans fil (Android). Dans ce cas, vous pouvez utiliser le GPS de votre téléphone (fonctionne sous FF et Opera mobile).
Partie 1 : géolocalisation
L'objectif de cette partie est de modifier le code de l'exemple et d'afficher sa position sur Google Maps.
Suivi de la position
- activer l'option "enableHighAccuracy"
- suivre la position du navigateur toutes les 5 secondes
Affichage de la carte Google Maps
À partir de cette question, placez les scripts dans des fichiers JS à part
- Rajoutez une div dont l'id sera "maps" dans le HTML
- Utilisez les sources de l'exemple de code "Maps simple" pour afficher une carte dans cette div. Centrez cette carte à la position 0, 0 pour l'instant et passez le zoom à 0. Vérifiez que la carte s'affiche.
- Modifiez les options pour que l'image affichée soit la vue satellite et non le plan (MapOptions)
- Faites en sorte que quand on clique sur l'un des deux boutons, la carte se centre sur la position du client ; ajustez le zoom en conséquence (méthodes de l'objet Map, objet LatLng).
- Faites en sorte que quand on clique sur la carte, celle-ci se centre sur la position cliquée (exemple "event-arguments")
Attention : l'instruction addListener() doit se trouver à la fin de la méthode initialize(). - Rajoutez un champ texte permettant à l'utilisateur d'indiquer un pseudo et l'URL d'une image le représentant
- Ajoutez un Marker sur la carte correspondant à la position de l'utilisateur et affichez-y ce pseudo et cette image, à l'aide d'une InfoWindow
Geocoding
- En vous inspirant de l'exemple "geocoding-simple", récupérez l'adresse du de votre position courante, à l'aide du service google.maps.Geocoder
- Affichez cette adresse sur le marker de la carte
Calcul d'itinéraire
- À l'aide de l'exemple "directions-simple", faites en sorte d'afficher l'itinéraire entre deux position (origine: position courante, destination: bâtiment Nautibus). Pour cela, vous utiliserez les objets DirectionsService et DirectionsRenderer.
- Faites de même pour lancer un calcul d'itinéraire au clic sur la carte, entre la position courante et la position cliquée.
Partie 2 : partage de positions
- Rajoutez à votre application une partie serveur qui permet
- d'uploader son pseudo et sa position toutes les 5 secondes
- de récupérer en réponses un tableau des mêmes informations pour tous les autres utilisateurs connectés
- Affichez de la même façon des Markers pour les autres utilisateurs
- Dans la fenêtre de description, ajoutez la distance que vous sépare de cet utilisateur (aide : formule de calcul de la distance)
- Faites en sorte que le clic sur le marker d'un utilisateur permette d'afficher l'itinéraire pour aller le rejoindre.
Rendu du TP
Le rendu du TP s'effectue sur la forge. Le dernier commit devra avoir été fait avant le début de la séance de TP suivante.
