dimanche 11 octobre 2009
Tout le monde aime Google Maps et ceux qui possèdent un commerce avec pignon sur rue désirent souvent afficher la carte pour indiquer leur localisation. Je vais vous montrer à quel point c'est facile d'intégrer Google Maps et je vous présenterai quelques options intéressantes.
D'abord, il vous faut une clé d'API (gratuite) qui est reliée au domaine sur lequel on veut l'installer (fonctionne aussi sur les sous-domaines et les répertoires).
Une fois en possession de votre clé, vous devrez faire un peu de JavaScript. Incluez en entête la librairie externe de Google Maps en prenant soin d'y placer votre clé d'API.
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=VOTRE_CLE" type="text/javascript"></script>Dans le code HTML, déclarez un conteneur dans lequel la carte s'affichera. Prenez soin d'attacher les fonctions aux événements load et unload (libre à vous de le faire comme ci-dessous ou avec Prototype ou jQuery).
<body onload="initGM()" onunload="GUnload()">Ouvrez un bloc JavaScript et déclarez les objets principaux :
<div id="mapHolder" style="width:800px;height:600px"></div>
</body>
var map;Je prendrai pour acquis qu'on utilisera la carte pour afficher qu'une seule coordonnée. Déclarez deux nouvelles variables qui contiendront les informations à afficher dans la bulle (lorsqu'on cliquera sur le marqueur) :
var geocoder;
var title = "La Banquise";Il faut définir la fonction qui initialise la carte au chargement de la page. Quelques lignes seraient suffisantes mais comme je présente quelques options, je commenterai au fur et à mesure dans le code.
var address = "994, Rue Rachel Est, Montreal, QC H2J 2J3";
function initGM() {
if (GBrowserIsCompatible()) {
// mapHolder est le conteneur HTML
map = new GMap2(document.getElementById("mapHolder"));
// on peut utiliser cette façon mais qui
// connait vraiment les coordonnées ?
// map.setCenter(new GLatLng(37.4419, -122.1419), 13);
// à la place, les trouver avec Geocoder!
geocoder = new GClientGeocoder();
// la variable address a été définie
// plus haut
geocoder.getLocations(address, addToMap);
// constantes du choix de carte
// G_NORMAL_MAP
// G_SATELLITE_MAP
// G_HYBRID_MAP
map.setMapType(G_NORMAL_MAP);
// affiche les contrôles par défaut
// (zoom et types de cartes)
// map.setUIToDefault();
// ou bien, personnaliser les contrôles
// on doit utiliser addControl
var mapTypeControl = new GMapTypeControl();
// positions possibles
// G_ANCHOR_TOP_RIGHT
// G_ANCHOR_TOP_LEFT
// G_ANCHOR_BOTTOM_RIGHT
// G_ANCHOR_BOTTOM_LEFT
var topRight = new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10,10));
map.addControl(mapTypeControl, topRight);
// pour le contrôle de zoom
// GSmallMapControl / GLargeMapControl
// GLargeMapControl = la barre verticale
// dégradée
map.addControl(new GSmallMapControl());
}
}Il ne reste qu'à définir la fonction addToMap() qui contrôle aussi le contenu affiché dans la bulle.function addToMap(response){
place = response.Placemark[0];
// obtenir la latitude et longitude
point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
// centrer la carte sur ce point
// 18 représente la profondeur du zoom
map.setCenter(point, 18);
// créer le marqueur
var numberedIcon = new GIcon(G_DEFAULT_ICON);
// permet de changer l'icône par défaut
// par exemple le logo de l'entreprise
// numberedIcon.image = 'http://www.domaine.com/marker.png';
markerOptions = { icon:numberedIcon, clickable:true };
marker = new GMarker(point, markerOptions);
// ajouter le marqueur à la carte
map.addOverlay(marker);
GEvent.addListener(marker, "click",
function() {
var streetAddress = place.AddressDetails.Country.AdministrativeArea.SubAdministrativeArea.Locality.Thoroughfare.ThoroughfareName;
var city = place.AddressDetails.Country.AdministrativeArea.SubAdministrativeArea.Locality.LocalityName;
var state = place.AddressDetails.Country.AdministrativeArea.AdministrativeAreaName;
marker.openInfoWindowHtml(
'<strong>' + title + '</strong>' + '<br>' + streetAddress + '<br>' + city + ', ' + state);
}
);
}Ça peut ne pas sembler très clair ce que je fais avec var streetAddress = place.AddressDetails... mais si vous éclatez l'objet "place" avec Firebug (console.log(place)), vous aurez accès à toute la structure de l'objet JSON qui permet de récupérer toutes les informations de géolocalisation sur le point demandé.Je n'ai pas encore pris le temps de régler l'affichage du code sur mon blogue alors je vous suggère de l'ouvrir en cliquant sur "view plain" dans le coin supérieur gauche des blocs de code pour le voir mieux indenté et sans retour de chariots automatiques.
Vous voilà maintenant avec une carte fonctionnelle.
Tags:
Intégration,
JavaScript
