Download - Introduction I. Maquette II. Inscription III. Recherche IV. Difficultés rencontrées Conclusion
![Page 1: Introduction I. Maquette II. Inscription III. Recherche IV. Difficultés rencontrées Conclusion](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814cb6550346895db9c181/html5/thumbnails/1.jpg)
Adeline COUPE, Hélène DRAUX, Ismaïla GIROUX, Loïc TACHET
SOUTENANCE FINALE
DU PROJET SWITCHOME
![Page 2: Introduction I. Maquette II. Inscription III. Recherche IV. Difficultés rencontrées Conclusion](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814cb6550346895db9c181/html5/thumbnails/2.jpg)
2Projet SwitcHome
Introduction
I. Maquette
II. Inscription
III. Recherche
IV.Difficultés
rencontrées
Conclusion
Le projet SwitcHome
• Site Internet gratuit d’échange de maisons
• Cherche à améliorer le site et à attirer
de nouveaux internautes
![Page 3: Introduction I. Maquette II. Inscription III. Recherche IV. Difficultés rencontrées Conclusion](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814cb6550346895db9c181/html5/thumbnails/3.jpg)
3Projet SwitcHome
Maquette
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 4: Introduction I. Maquette II. Inscription III. Recherche IV. Difficultés rencontrées Conclusion](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814cb6550346895db9c181/html5/thumbnails/4.jpg)
4Projet SwitcHome
Page pour ajouter une annonce
Introduction
I. Maquette
II. Inscription
III. Recherche
IV.Difficultés
rencontrées
Conclusion
Ajout d’un bouton de géolocalisation:
![Page 5: Introduction I. Maquette II. Inscription III. Recherche IV. Difficultés rencontrées Conclusion](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814cb6550346895db9c181/html5/thumbnails/5.jpg)
5Projet SwitcHome
Page de Géolocalisation
Introduction
I. Maquette
II. Inscription
III. Recherche
IV.Difficultés
rencontrées
Conclusion
2 types de géolocalisation possibles: par géocodage et par GPS
![Page 6: Introduction I. Maquette II. Inscription III. Recherche IV. Difficultés rencontrées Conclusion](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814cb6550346895db9c181/html5/thumbnails/6.jpg)
6Projet SwitcHome
Localisation avec l’adresse
Introduction
I. Maquette
II. Inscription
III. Recherche
IV.Difficultés
rencontrées
Conclusion
![Page 7: Introduction I. Maquette II. Inscription III. Recherche IV. Difficultés rencontrées Conclusion](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814cb6550346895db9c181/html5/thumbnails/7.jpg)
7Projet SwitcHome
Localisation avec l’adresse
Introduction
I. Maquette
II. Inscription
III. Recherche
IV.Difficultés
rencontrées
Conclusion
![Page 8: Introduction I. Maquette II. Inscription III. Recherche IV. Difficultés rencontrées Conclusion](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814cb6550346895db9c181/html5/thumbnails/8.jpg)
8Projet SwitcHome
Localisation avec des coordonnées GPS
Introduction
I. Maquette
II. Inscription
III. Recherche
IV.Difficultés
rencontrées
Conclusion
![Page 9: Introduction I. Maquette II. Inscription III. Recherche IV. Difficultés rencontrées Conclusion](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814cb6550346895db9c181/html5/thumbnails/9.jpg)
9Projet SwitcHome
Récupération des coordonnées
Introduction
I. Maquette
II. Inscription
III. Recherche
IV.Difficultés
rencontrées
Conclusion
Champs latitude et longitude dans le formulaire d’inscription de l’annonce
![Page 10: Introduction I. Maquette II. Inscription III. Recherche IV. Difficultés rencontrées Conclusion](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814cb6550346895db9c181/html5/thumbnails/10.jpg)
10Projet SwitcHome
Page pour rechercher des maisons
Introduction
I. Maquette
II. Inscription
III. Recherche
IV.Difficultés
rencontrées
Conclusion
![Page 11: Introduction I. Maquette II. Inscription III. Recherche IV. Difficultés rencontrées Conclusion](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814cb6550346895db9c181/html5/thumbnails/11.jpg)
11Projet SwitcHome
Association d’une info bulle à un tag
Introduction
I. Maquette
II. Inscription
III. Recherche
IV.Difficultés
rencontrées
Conclusion
![Page 12: Introduction I. Maquette II. Inscription III. Recherche IV. Difficultés rencontrées Conclusion](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814cb6550346895db9c181/html5/thumbnails/12.jpg)
12Projet SwitcHome
La géolocalisation
Introduction
I. Maquette
II. Inscription
III. Recherche
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
![Page 13: Introduction I. Maquette II. Inscription III. Recherche IV. Difficultés rencontrées Conclusion](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814cb6550346895db9c181/html5/thumbnails/13.jpg)
13Projet SwitcHome
Les fonctions Google Map
Introduction
I. Maquette
II. Inscription
III. Recherche
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
![Page 14: Introduction I. Maquette II. Inscription III. Recherche IV. Difficultés rencontrées Conclusion](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814cb6550346895db9c181/html5/thumbnails/14.jpg)
14Projet SwitcHome
Les fonctions Google Map
Introduction
I. Maquette
II. Inscription
III. Recherche
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
![Page 15: Introduction I. Maquette II. Inscription III. Recherche IV. Difficultés rencontrées Conclusion](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814cb6550346895db9c181/html5/thumbnails/15.jpg)
15Projet SwitcHome
La géolocalisation: ShowAddress()
Introduction
I. Maquette
II. Inscription
III. Recherche
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 {
ADDRESS
latlon
![Page 16: Introduction I. Maquette II. Inscription III. Recherche IV. Difficultés rencontrées Conclusion](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814cb6550346895db9c181/html5/thumbnails/16.jpg)
16Projet SwitcHome
Introduction
I. Maquette
II. Inscription
III. Recherche
IV.Difficultés
rencontrées
Conclusion
// 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");
La géolocalisation: ShowAddress()
![Page 17: Introduction I. Maquette II. Inscription III. Recherche IV. Difficultés rencontrées Conclusion](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814cb6550346895db9c181/html5/thumbnails/17.jpg)
17Projet SwitcHome
Introduction
I. Maquette
II. Inscription
III. Recherche
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") ;
La géolocalisation: ShowAddress()
![Page 18: Introduction I. Maquette II. Inscription III. Recherche IV. Difficultés rencontrées Conclusion](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814cb6550346895db9c181/html5/thumbnails/18.jpg)
18Projet SwitcHome
La géolocalisation : GPS( lat, lon)
Introduction
I. Maquette
II. Inscription
III. Recherche
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 cartemap.addOverlay(markerb);
latb lonb
![Page 19: Introduction I. Maquette II. Inscription III. Recherche IV. Difficultés rencontrées Conclusion](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814cb6550346895db9c181/html5/thumbnails/19.jpg)
19Projet SwitcHome
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 20: Introduction I. Maquette II. Inscription III. Recherche IV. Difficultés rencontrées Conclusion](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814cb6550346895db9c181/html5/thumbnails/20.jpg)
20Projet SwitcHome
Page ajouter une annonce
Introduction
I. Maquette
II. Inscription
III. Recherche
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>
![Page 21: Introduction I. Maquette II. Inscription III. Recherche IV. Difficultés rencontrées Conclusion](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814cb6550346895db9c181/html5/thumbnails/21.jpg)
21Projet SwitcHome
Recherche
Introduction
I. Maquette
II. Inscription
III. Recherche
IV.Difficultés
rencontrées
Conclusion
![Page 22: Introduction I. Maquette II. Inscription III. Recherche IV. Difficultés rencontrées Conclusion](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814cb6550346895db9c181/html5/thumbnails/22.jpg)
22Projet SwitcHome
Difficultés rencontrées
Introduction
I. Maquette
II. Inscription
III. Recherche
IV.Difficultés
rencontrées
Conclusion
![Page 23: Introduction I. Maquette II. Inscription III. Recherche IV. Difficultés rencontrées Conclusion](https://reader035.vdocuments.us/reader035/viewer/2022070502/56814cb6550346895db9c181/html5/thumbnails/23.jpg)
23Projet SwitcHome
Conclusion
Introduction
I. Maquette
II. Inscription
III. Recherche
IV.Difficultés
rencontrées
Conclusion