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

Le projet SwitcHome Site Internet gratuit d’échange de maisons Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion Site Internet gratuit d’échange de maisons Cherche à améliorer le site et à attirer de nouveaux internautes

Maquette Ajout d’un système de GeoTagging 2 axes de travail: Introduction I. Maquette II. Inscription III. Recherche 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

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

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

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

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

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

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

Page pour rechercher des maisons Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion

Association d’une info bulle à un tag Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion

La géolocalisation 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 Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion

Les fonctions Google Map Les fonctions Google Map utilisées : Dans la fonction load() chargement de la carte initiale Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion 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

Les fonctions Google Map map.setCenter(new GLatLng(34, 0), 1); // vue globale du monde geocoder = new GClientGeocoder(); // autorise une nouvelle géolocalisation Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion 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

La géolocalisation: ShowAddress() 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 { Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion ADDRESS lat lon

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

La géolocalisation: ShowAddress() // 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") ; Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion

La géolocalisation : GPS( lat, lon) // 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); Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion latb lonb

Validation de la position Introduction I. Maquette II. Inscription III. Recherche 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>

Page ajouter une annonce 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> Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion

Recherche Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion

Difficultés rencontrées Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion

Conclusion Introduction I. Maquette II. Inscription III. Recherche IV.Difficultés rencontrées Conclusion