Introduction I. Maquette II. Programmation III. Intégration IV. Difficultés rencontrées

1. Adeline COUPE, Hélène DRAUX, Ismaïla GIROUX, Loïc TACHET

2. Le projet SwitcHome Introduction I. Maquette II. Programmation III. Intégration IV.Difficultés rencontrées Conclusion • Site Internet d’échangegratuit de maisons • Cherche à améliorer le site et à attirer • de nouveaux internautes

3. Le projet SwitcHome Introduction I. Maquette II. Programmation III. Intégration IV.Difficultés rencontrées Conclusion Notre travail: Créer un API de Géolocalisation Analyse comparatives des scenarii techniques Choix de GoogleMap

4. Le projet SwitcHome Analyse comparatives des scenarii techniques Introduction I. Maquette II. Programmation III. Intégration IV.Difficultés rencontrées Conclusion Tic! tac!

5. Maquette Introduction I. Maquette II. Programmation III. Intégration IV.Difficultés rencontrées Conclusion • Ajout d’un système de GeoTagging • 2 axes de travail: • Ajout d’une annonce de maison à échanger • Recherche de maisons

6. Page pour ajouter une annonce Ajout d’un bouton de géolocalisation: Introduction I. Maquette II. Programmation III. Intégration IV.Difficultés rencontrées Conclusion

7. Page de Géolocalisation 2 types de géolocalisation possibles: par géocodage et par GPS Introduction I. Maquette II. Programmation III. Intégration IV.Difficultés rencontrées Conclusion

8. Localisation avec l’adresse Introduction I.Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion

9. Localisation avec l’adresse Introduction I. Maquette II. Programmation III. Intégration IV.Difficultés rencontrées Conclusion

10. Localisation avec des coordonnées GPS Introduction I.Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion

11. Récupération des coordonnées Champs latitude et longitude dans le formulaire d’inscription de l’annonce Introduction I. Maquette II. Programmation III. Intégration IV.Difficultés rencontrées Conclusion

12. Page pour rechercher des maisons Introduction I. Maquette II. Programmation III. Intégration IV.Difficultés rencontrées Conclusion

13. Association d’une info bulle à un tag Introduction I. Maquette II. Programmation III. Intégration IV.Difficultés rencontrées Conclusion

14. La géolocalisation Introduction I. Maquette II. Programmation a) inscription b) recherche III. Intégration IV.Difficultés rencontrées Conclusion • Intégration des fonctionnalités de géolocalisation de Google Map: • Respect de la structure du site: • un fichier javascript : geolocalisation.js • un fichier javascript pour l’aide (génération d’une popup) : popup.js • un fichier HTML : appel aux fonctions javascript et programmation des boutons

15. Les fonctions Google Map Introduction I. Maquette II. Programmation a) inscription b) recherche III. Intégration IV.Difficultés rencontrées Conclusion • Les fonctions Google Map utilisées : • Dans la fonction load() chargement de la carte initiale map.addControl(new GLargeMapControl());// cette fonction permet d’ajouter les fonctions de zoom et de déplacement de Google Map map.addControl( new GMapTypeControl());// cette fonction permet d’ajouter les différentes vues plan, mixte, aérien

16. Les fonctions Google Map Introduction I. Maquette II. Programmation a) inscription b) recherche III. Intégration IV.Difficultés rencontrées Conclusion map.setCenter(new GLatLng(34, 0), 1); // vue globale du monde geocoder = new GClientGeocoder();// autorise une nouvelle géolocalisation Dans la page html la fonction load() est appelée 3 fois : -au chargement de la page -lors d’une géolocalisation par l’adresse -lors d’une localisation par GPS

17. ADDRESS lat lon La géolocalisation: ShowAddress() Introduction I. Maquette II. Programmation a) inscription b) recherche III. Intégration IV.Difficultés rencontrées Conclusion • ShowAddress(address) : pour le geocodage • function showAddress(address) { • if (geocoder) { • geocoder.getLatLng( • address, • function(point) { • if (!point) { • alert(address + " veuillez rentrer une adresse valide :"+" "+"rue,ville,pays" ); • } else {

18. La géolocalisation: ShowAddress() // création du marqueur repositionnable associé var marker = new GMarker(point, {draggable: true}); map.addOverlay(marker); // association de la bulle info au marqueur marker.openInfoWindowHtml(address+"<br />"+" lat="+point.y+" lon="+point.x+"<br/>"+"vous pouvez repositionner le marqueur en cliquant et en faisant glisser le marqueur,<br> si vous êtes satisfait par la position appuyez sur valider ma position"); Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion

19. La géolocalisation: ShowAddress() Introduction I. Maquette II. Programmation a) inscription b) recherche III. Intégration IV.Difficultés rencontrées Conclusion // gestion de l'événement " marqueur déplacé" GEvent.addListener(marker, "dragend", function() { // récupération du point associé au marqueur var pointnew=marker.getPoint(); // association de l'info-bulle correspondante marker.openInfoWindowHtml(address+"<br />"+" lat="+pointnew.y+" lon="+pointnew.x+"<br/>"+"vous pouvez repositionner le marqueur en cliquant et en faisant glisser le marqueur,<br> si vous êtes satisfait par la position appuyez sur valider ma position") ;

20. latb lonb La géolocalisation : GPS( lat, lon) Introduction I. Maquette II. Programmation a) inscription b) recherche III. Intégration IV.Difficultés rencontrées Conclusion // création d'un point associé aux coordonnées GPS var pointb = new GLatLng(latb,lonb); // on centre la carte sur ce point map.setCenter(pointb, 13); // création du marqueur associé var markerb = new GMarker(pointb,{draggable: true}); // on ajoute le marqueur à la carte map.addOverlay(markerb);

21. Validation de la position Introduction I. Maquette II. Programmation a) inscription b) recherche III. Intégration IV.Difficultés rencontrées Conclusion JavaScript: document.forms["validation"].elements["lat"].value=latitude; document.forms["validation"].elements["lon"].value=longitude; HTML: <form name="validation" action="http://heleneliz.free.fr/GoogleMap/ajout_annonce.php"> latitude: <input type="text" name="lat" value=""> longitude: <input type="text" name="lon" value=""> <input type="submit" value="valider ma position" /> </form>

22. Page ajouter une annonce Introduction I. Maquette II. Programmation a) inscription b) recherche III. Intégration IV.Difficultés rencontrées Conclusion Récupération de la latitude et de la longitude: <input type="text" name="latitude" value="<?php echo $_GET['lat'];?>" style="width:100px;" /> <input type="text" name="longitude" value="<?php echo $_GET['lon'];?>" style="width:100px;" /> Bouton “géolocaliser sa maison”: <input type="button" onclick="location.href='http://heleneliz.free.fr/GoogleMap/googleinscription.html'" value="Géolocaliser sa maison" /> Lien vers une FAQ: <a href="javascript:popup('FAQgeolocaliser.html','Aide','resizable=yes,location=no, width=600, height=300, menubar=no, status=no, scrollbars=yes, menubar=no')">A quoi ca sert? </a>

23. Recherche Introduction I. Maquette II. Programmation a) inscription b) recherche III. Intégration IV.Difficultés rencontrées Conclusion

24. Intégration des travaux à l’existant Introduction I. Maquette II. Programmation a) inscription b) recherche III. Intégration IV. Difficultés rencontrées Conclusion Plusieurs méthodes • Copier-coller et remettre à jour les liens • Regarder la structure du site et l’exploiter • Proposer une architecture convenable à défaut de structure appropriée

25. Difficultésrencontrées Intégration dans un site déjà existant : Respect de l’architecture Compréhension de l’organisation Travail sur une base de données personnelles: Tests réguliers Pas de conflits entre les différents programmeurs ( équipe projet et designer ) Introduction I. Maquette II. Programmation III. Intégration IV.Difficultés rencontrées Conclusion Problème : base de données en SQL4 vs SQL5

26. Difficultésrencontrées Difficultés liées à Google Map Difficultés à retrouver l’origine d’une erreur dans un code API Google Map toujours en développement: les nouvelles fonctionnalités sont peu documentées Introduction I. Maquette II. Programmation III. Intégration IV.Difficultés rencontrées Conclusion

27. Difficultésrencontrées Exemple : Introduction I. Maquette II. Programmation III. Intégration IV.Difficultés rencontrées Conclusion Problème: chaque marqueur est associé à une carte Solution adoptée : utiliser la fonction load() Autre solution possible : utiliser le MarkerManager qui gère la visibilité des marqueurs.

28. Conclusion Introduction I. Maquette II. Programmation III. Intégration IV.Difficultés rencontrées Conclusion