St Laurent de Chamousset et sa région
Présentation
GoogleMaps est une application Web recouvrant un outil d’annuaire et des données cartographiques mondiales : http://maps.google.fr/.
La base de données de Google Map peut être interrogée comme un service de renseignement classique pour localiser un emplacement, une entreprise, calculer ou itinéraire, ou à l’inverse pour rechercher visuellement des lieux préalablement indexés sur une carte.
La valeur ajoutée de l’outil réside dans le recouvrement carte / annuaire permettant de multiplier les points de vue, la souplesse d’un moteur de recherche à la google (le mot "pizza" entré en lien avec un nom de ville indique immédiatement l’emplacement des restaurateurs de pizza sur une carte) et l’intégration de la technologie ajax rendant rééllement efficace les raffraîchissements de pages. Ces caractéristiques n’en font pourtant pas une exception alors que la plupart des services équivalents (PagesJaunes.fr + Mappy) développent des outils allant dans cette direction.
La réelle nouveauté de Google Map réside dans les possibilités de personnalisation et d’intégration de l’outil dans des pages de son propre site Web.
Comme le montre l’exemple ci-dessus, une carte dynamique utilisant AJAX peut être intégrée à un corps de page HTML via un simple appel à une API distante. L’affichage de la carte est ensuite gérée par l’appel à des fonctions javascript la rendant paramétrable pour différents points :
- coordonnées initiale de la carte affichée
- gestion des barres d’outil
- réponse aux actions utilisateurs
- affichage des marqueurs locaux textuels
- déplacements de la carte sur des points distincts à intervalles réguliers
Méthode
1. Afin d’intégrer une carte Google Maps à votre page Web, il faut se procurer une clef d’accès aux fonctions API pour l’adresse de votre site Web : http://www.google.fr/apis/maps/sign...
2. Créer une page Web comportant le "Hello World" de Google Maps : l’affichage d’une carte centrée sur les coordonnées de votre ville (disponibles ici). Mettre la page Web en ligne sur votre serveur.
<!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=abcdefg"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(45.7384,4.4643), 13);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>La fonction map.setCenter(new GLatLng(45.7384,4.4643), 13) ; indique les coordonnées de la fenêtre accompagnées du niveau de zoom (le chiffre est proportionnel à votre éloignement du sol).
3. Vous pouvez ensuite consulter la documentation jointe, ainsi que le code source de l’exemple que j’ai développé.
Un peu de technique et d’imagination devrait permettre de créer aisément des cartes enrichies en contenu local ou des animations de présentation d’une région.
Une fonction non intégrée ici mais présentée dans l’API v2 de Google Maps permets à l’utilisateur d’ajouter ses propres marqueurs à la carte : http://www.google.fr/apis/maps/docu....
Liens
Manuel du développeur Google Map
Trouver les coordonnées d’une ville
Howto’s
Exemple commenté
Code source commenté de la carte ci-dessus
<!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 type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=xxx"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible())
{
/*Crèe une carte aux coordonnées indiquées avec comme troisième paramètre le niveau de zoom*/
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(45.7384,4.4643), 12);
/*Ajoute les barres d'outil de contrôle du Zoom et du Type d'affichage Plan ou Satellite*/
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
/*Affiche les coordonnées de la carte à chaque recentrage dans un div nommé message situé sous la carte*/
GEvent.addListener(map, "moveend", function() {
var center = map.getCenter();
document.getElementById("message").innerHTML = center.toString();
});
/*Ouvre une fenêtre d'information texte au centre du plan au chargement*/
map.openInfoWindow(map.getCenter(),
document.createTextNode("St Laurent de Chamousset, une région aux activités riches et variées"));
/*Ajoute des marqueurs sur la carte aux coordonnés passées en paramètre*/
var point = new GLatLng(46.7526, 4.4236);
map.addOverlay(new GMarker(point));
/*Ajoute des marqueurs avec texte s'ouvrant lors des clics. La fonction createMarker est à déclarer une fois*/
function createMarker(point, texte)
{
var marker = new GMarker(point);
map.addOverlay(marker);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(texte);
});
}
/*Déclaration d'un marqueur*/
var point = new GLatLng(45.76201437142477, 4.4968414306640625);
createMarker(point, "Bruliolles et ses beaux paturages");
/*Ajoute des marqueurs avec texte s'ouvrant au bout d'un certain temps. Permets de faire une visite automatique. La fonction CreateMarkerErasme est à déclarer une fois*/
function createMarkerErasme(point, texte, delais)
{
var marker = new GMarker(point);
map.addOverlay(marker);
GEvent.addListener(marker, "click", function()
{ marker.openInfoWindowHtml(texte); });
window.setTimeout(function()
{ marker.openInfoWindowHtml(texte); }, delais);
}
/*Déclaration des marqueurs*/
var point = new GLatLng(45.7526, 4.4236);
createMarkerErasme(point, "Le centre Erasme est la Mission Technologies de l'Information du Conseil Général du Rhône",5000);
var point = new GLatLng(45.7157, 4.396);
createMarkerErasme(point, "Ici on mange du bon cochon",10000);
var point = new GLatLng(45.73781803408217, 4.464569091796875);
createMarkerErasme(point, "Et tous les lundis matins, le marché aux bestiaux",15000);
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 550px; height: 500px"></div>
Coordonnées : <div id="message"></div>
<br>
</body>
</html>