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

SOUTENANCE FINALE

DU PROJET SWITCHOME

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

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

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:

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

6Projet SwitcHome

Localisation avec l’adresse

Introduction

I. Maquette

II. Inscription

III. Recherche

IV.Difficultés

rencontrées

Conclusion

7Projet SwitcHome

Localisation avec l’adresse

Introduction

I. Maquette

II. Inscription

III. Recherche

IV.Difficultés

rencontrées

Conclusion

8Projet SwitcHome

Localisation avec des coordonnées GPS

Introduction

I. Maquette

II. Inscription

III. Recherche

IV.Difficultés

rencontrées

Conclusion

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

10Projet SwitcHome

Page pour rechercher des maisons

Introduction

I. Maquette

II. Inscription

III. Recherche

IV.Difficultés

rencontrées

Conclusion

11Projet SwitcHome

Association d’une info bulle à un tag

Introduction

I. Maquette

II. Inscription

III. Recherche

IV.Difficultés

rencontrées

Conclusion

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

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

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

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

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()

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()

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

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>

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>

21Projet SwitcHome

Recherche

Introduction

I. Maquette

II. Inscription

III. Recherche

IV.Difficultés

rencontrées

Conclusion

22Projet SwitcHome

Difficultés rencontrées

Introduction

I. Maquette

II. Inscription

III. Recherche

IV.Difficultés

rencontrées

Conclusion

23Projet SwitcHome

Conclusion

Introduction

I. Maquette

II. Inscription

III. Recherche

IV.Difficultés

rencontrées

Conclusion