SITE WEB de
François
BONNEVILLE
Enseignement > Web dynamique > TP n°6Le but de ce TP est de réaliser des cartes interactives à partir du fond de cartes et d'images satellites de Google Maps, qui sert également de base à Google Earth : Google Maps permet de visualiser des cartes simplement depuis un navigateur WEB, grâce aux techniques "Ajax", alors que Google Earth est un logiciel à télécharger et à installer sur son PC.
Google met à dispositon des webmasters une "API" permettant d'utiliser Google Maps, pourvu que le webmaster s'inscrive et obtienne une "clé" lui permettant d'inclure cette API dans ses pages WEB.
Cette API vous servira de base technique au cours de ce TP; étudiez donc attentivement les examples et les possibilités qui vous sont ainsi offertes.
La clé pour le serveur 172.20.128.70 utilisé en TP est
ABQIAAAAFJliK45nvfuHDnka-sFpGhSVmLQo489OIsNDRBRmHDVZSsJOxBQGGKsSszam8yaibawtODN-jf9d7A
<!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>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAFJliK45nvfuHDnka-sFpGhSVmLQo489OIsNDRBRmHDVZSsJOxBQGGKsSszam8yaibawtODN-jf9d7A"
type="text/javascript"></script>
</head>
1ère question
Reprennez le premier exemple de Google
http://www.google.com/apis/maps/documentation/#The_Basics
http://www.google.com/apis/maps/documentation/simple.html
Publiez votre première carte et testez-la.
Adaptez votre code pour centrer la carte sur votre salle de TP (latitude : 5.9875 - longitude : 47.2456), l'afficher sous forme d'image satellite et ajouter les controles permettant de zoomer.
2ème question
Ajouter à votre page le code nécessaire à l'affichage sous la carte de la latitude et de la longitude du point qui est cliqué sur la carte.
Ajouter ensuite à votre page le code nécessaire pour centrer la carte sur un point dont la latitude et la longitude sont saisies dans un formulaire.
Après avoir centré la carte sur ce nouveau point, ajouter sur la carte une icone à la position de ce point.
Déclencher l'ouverture d'une bulle d'information lorsqu'on clique sur ce point. Le texte d'information de la bulle aura préalablement été saisi dans le formulaire.
3ème question
Ecrire un formulaire permettant la saisie successive de plusieurs points. Ces points formeront un polygone sur la carte.
Mise à jour par l'éditeur le : 12/12/2008 -
Copyright © 2012 - 2013 François Bonneville - Tous droits réservés
Administré avec Agestis, outil de gestion de sites en ligne d' aricia