Aujourd’hui nous allons voir comment intégrer une carte Google Map dans vos pages web.
Pour ce tutoriel j’utilise la bibliothèque jQuery. Elle me permet de récupérer dynamiquement les coordonées à utiliser. Cela vous permet d’utiliser le même code pour plusieurs pages. Par exemple, imaginons que votre site ait pour sujet la critique de restaurant et qu’il permette la création de « fiche » de restaurant comportant les coordonnées du restaurant et une carte pour visualiser son emplacement.
1. Code HTML
<!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" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" media="screen" href="style.css"/>
<meta name="author" content="Snoupix"/>
<script src="http://maps.google.com/VOTRE CLE GOOGLE" ></script>
<script src="http://www.google.com/ET LE RESTE DU CODE" ></script>
<script src="jquery-1.3.2.min.js" type="text/javascript" ></script>
<script src="scriptGoogleMap.js" type="text/javascript" ></script>
</head>
<body>
<div id="global">
<h1>Houaa, Google m'a trouvé</h1>
<div id="coordonnees">
<h2>Mes coordonnés</h2>
Nom : <b id="nom">Snoupix</b>
Adresse : <b id="adresse">35 rue d'hérouville, Caen, France</b>
</div>
<div id="map"></div>
</div>
</body>
</html>
Quelques mots sur le code HTML. Tout d’abord notez bien les « id » nom et adresse. C’est grâce à ces id que nous pourrons récupérer les valeur d’adresse et de nom grâce à jQuery. De plus c’est dans la div id= »map » que la carte sera intégrée.
Pour finir, le plus inportant. Vous devez vous inscrire gratuitement à l’API Google Map pour avoir une clé de carte personnelle. Allez à cette adresse http://code.google.com/intl/fr/apis/maps/signup.html, inscrivez vous et récupérez la clé Google que vous devrez intégrer dans les balises de votre fichier HTML.
2. Code javascript
//initilaisation des variables
var map = null;
var geocoder = null;
function load() {
if (GBrowserIsCompatible()) {
//nouvel objet de type Map
map = new GMap2(document.getElementById("map"));
//centralisa de la carte initiale.
//Emplacement fait en fonction des code Longitude et Latitude
map.setCenter(new GLatLng(48.9, 2.3), 13);
//affichage des contrôleurs de zoom, ...
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
//nouvel Obget de géocodeur
geocoder = new GClientGeocoder();
}
//récupération des valeurs des champs d'adresse et nom
var adresse = $('#adresse').text();
var nom = $('#nom').text();
if (geocoder) {
geocoder.getLatLng(
adresse,function(point) {
//si l'adresse n'existe pas on l'affiche
if (!point) {
alert(adresse + " introuvable");
} else {
//centrer la carte sur les coordonnées.
//le chiffre 13 correspond au zoom de visualisation de la carte
map.setCenter(point, 13);
//initialisation du pointer (flêche rouge)
var marker = new GMarker(point);
map.addOverlay(marker);
//création des informations affichées sur le pointeur
marker.openInfoWindowHtml(nom +""+adresse);
}
}
);
}
}
// appelle de la fonction d'initailisation et de chargement de la page dès que google est ok.
google.setOnLoadCallback(load)
Ce code est très simple. N’essayez pas de faire des correspondances avec javascript, ce code est du pûr Google uniquement comprit par les scripts Google.
Maintenant à vous de jouer, et n’hésitez pas à bidouiller ce code pour l’adapter à vos projets.
Vous avez peut être manqué ces articles :
