Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

La geolocalisation par GOOGLE :

No description
by

Regat Stéphanie

on 24 September 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of La geolocalisation par GOOGLE :

Et voilà...
Le résultat ?
On reprend ici le langage HTML :
Le Code HTML permet d'appeler la fonction et d'afficher la carte dans les dimensions demandées

Fonction FindCity : Quand un choix est effectué dans la liste déroulante, la fonction FindCity appelle les coordonnées correspondantes et les affiche sur la carte
La géolocalisation : une forme de Mashup ?
"Un mashup (ou Application composite) désigne un site Web combinant plusieurs applications Web pour créer un nouveau service . Il s’agit ainsi par exemple d’agréger des contenus provenant d’autres sites. Ces applications tierces sont mises à disposition par le biais d’API, interfaces de programmation, autorisant l’extraction et le traitement d’informations.

De nombreux éditeurs fournissent des API libres afin d’inciter les développeurs à concevoir des mashups exploitant leur contenu. C’est le cas des principaux acteurs de l’Internet, tels Google (avec notamment le service de géolocalisation de Google Earth), Yahoo, Amazon, eBay ou Microsoft "

JDN
Exploiter les possibilités de la géolocalisation

Google Map met à disposition un outil permettant de créer des cartes personnalisées pouvant servir à la création de mashup.
Il est ainsi possible d'inclure des images, des vidéos et d’autres personnalisations puis partager les cartes ainsi créées.

Pour en savoir plus :
https://support.google.com/maps/?guide=21670#topic=3092425
Exemple de programme
Pour inclure les fonctions Google Maps dans une application, il faut ajouter une balise script dans la partie head de la page html. Il est nécessaire de faire appel au script JavaScript avec une clé d'authentification Google Map en paramètre.

Pour obtenir une clé Google map, vous devez au préalable disposer d'un compte google.

Une fois votre compte créé, vous pourrez alors faire une demande de clé google map. Vous serez invité(e) à accepter les conditions générales d'utilisation puis à saisir l'url du site pour lequel la clé Google sera utilisée.

Le code généré par Google est à insérer dans l'entête de chaque page de votre site qui utilisera l'api Google map:


Comment fait-on ?
Afin de concevoir l'intégration d'un module de géolocalisation, il est nécessaire d'avoir quelques bases des 3 langages suivants :
- html
- javascript
- xml

Et ensuite ?

et bien ensuite, suivez le guide ......
La géolocalisation ?
De quoi parle-t-on ?
Pourquoi faire ?
La géolocalisation ou géoréférencement est un procédé permettant de positionner un objet (une personne, etc) sur un plan ou une carte à l'aide de ses coordonnées géographiques.

Ses usages sont nombreux et souvent corrélés avec des bases de données de renseignements géographiques :

- Plans/cartes, calculs de position et d'itinéraires
- Renseignements locaux en mobilité (points d'intérêts proches)
- Résultats contextualisés sur les moteurs de recherche
- Méta-informations jointes aux photos/vidéos





<
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Cartographie Stéphanie </title>

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAqgYvEE32OK4P-ajhQvWvVRQh3KS4yzMBNWuAtTWpVrSIq-ymaRQ5yxWEVv1tewmqRmqjfUUDItiDag"
type="text/javascript"></script>

<script type="text/javascript">
//<![CDATA[
var lesMarkers = [];
var lesDesc = [];
var lesLiens = [];
var lesTitres = [];
var lesImages = []; //erreur1 ;
var map;


function dms2dec(d,m,s) {
return d + (m + s/60)/60;
}
function createMarker(point, texte) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(texte); //erreur2 e
});
return marker;
}

function load() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());

map.setCenter(new GLatLng(50.6050, 3.1334),7);


GDownloadUrl("data.xml",function (data,reponseCode) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
var boite="<select onchange='findCity(this.selectedIndex)'><option>Carte Globale</option>";
for (var i = 0; i < markers.length; i++) { //erreur 3 i
point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
lesTitres[i]= markers[i].getAttribute("titre");
lesDesc[i]= markers[i].getAttribute("desc");
lesLiens[i]= markers[i].getAttribute("link");
lesImages[i]= markers[i].getAttribute("image"); //erreur4 image
var texte="<p><b>"+lesTitres[i]+"</b><br />"+lesDesc[i]+"</p>"; //erreur 5 ; erreur6 </p>

lesMarkers[i]= createMarker(point,texte);
map.addOverlay(lesMarkers[i]);
boite+="<option>"+lesTitres[i]+"</option>";
}
boite+="</select>";
document.getElementById("selection").innerHTML = boite;
}
);

}
}
function findCity(which) {
if (which != 0) {
map.setCenter(lesMarkers[which-1].getPoint(), 13);
lesMarkers[which-1].openInfoWindowHtml("<p><b>" + "<img src='" + lesImages[which-1] + "'>" +lesTitres[which-1]+"</b><br /><a href='"+lesLiens[which-1]+"' target='_blank'>"+lesDesc[which-1]+"</a></p>"); //erreur 7 '
}
else {
map.setCenter(lesMarkers[3].getPoint(), 7);
map.closeInfoWindow();
}

}


//]]
>

</script>
</head>

<body onload="load()" onunload="GUnload()">
<table>
<tr>
<td align="center">
<div id="selection"></div>
</td>
</tr>

<tr>
<td>
<div id="map" style="width: 1024px; height: 768px"></div>
</td>
</tr>
</table>
</body>
</html>


Il faut ensuite déclarer les variables


Il s'agit des variables qui contiennent
les données utiles pour localiser
et caractériser les informations.
Par exemple : latitude, longitude, nom....
Passons maintenant aux fonctions

1/ dms : convertit les degrés / minutes/ secondes en décimal. Les données de latitude longitude sont traitées en mode décimal.

2/ Create Marker : pour créer les marqueurs et les actions associées : par ex : ouvrir une fenêtre quand on clique sur le marqueur

3/ Load : permet de charger la carte et les marqueurs associés
là, on centre la carte sur une zone. Ici, c'est le nord de la France qui est zoomé
Les boucles

Le fichier data.xml contient les données : latitude / longitude / nom / liens web...
Les boucles permettent de répéter une séquence du programme un nombre spécifique de fois

A chaque demande de l'utilisateur, le programme va chercher les variables nécessaires à l'affichage demandé, dans le fichier xml. Pour chaque marqueur, les informations attachées pourront s'afficher.
Cette commande crée la liste déroulante avec les différentes localisations
Stéphanie Regat IPM 2013-2015
<markers>
<marker lat="48.8417980" lng="2.3456980" titre="SmartCanal" desc="Editeur de contenus" link="http://www.smartcanal.com/" image="H_logo_smartcanal.png" />
<marker lat="48.8892890" lng="2.1700190" titre="HyperOffice" desc="Solution e-learning" link="http://www.uni-learning.com/index.php?lang=fr" image="logo_new.gif" />
<marker lat="47.2821720" lng="-1.5473450" titre="e-Doceo" desc="developpement e-learning" link="http://www.e-doceo.net/" image="logo_edoceo.gif" />
<marker lat="50.6114040" lng="3.1414032" titre="University of Lille 1" desc="Les sciences au service de l'ingenieur !" link="http://www.univ-lille1.fr/" image="Logo.jpg" />
<marker lat="48.8209230" lng="1.9948066" titre="Stéphanie Regat" desc="étudiante IPM" link="http://cueep204.univ-lille1.fr/master-ipm/cms/index.php" image="moi.jpg" />
</markers>
Fichier Data.xml
Full transcript