Vous désirez mettre en place un plan d'accés Google Maps sur votre site alors lisez ce tutoriel.
Voici à quoi ressemblera votre plan :
L'avantage de ce plan est que l'on peut zoomer, passer en vue satellite et aussi se déplacer dans les 4 directions.
Tout d'abord nous allons commencer par présenter l'API Google Maps, à quoi ça sert, quelles sont les fonctionnalités puis nous verrons comment configurer et créer un plan. Pour les personnes pressées rendez vous directement à la partie C.
A) Présentation de Google Maps
Google Maps est un service entièrement gratuit de carte géographique et de plan en ligne. Ce service permet de visualiser le monde sous forme de plan, de vue sattelite ou les deux en même temps. Avec le zoom il est possible d'avoir une vision qui varie de la rue à la terre entière. Tout l'intéret d'intégrer un plan de ce type sur votre site est qu'avec le système de zoom on retrouvera plus facilement votre localisation car en prennant un peu de hauteur on peut prendre des points de répère avec les ville voisine.
D'autre part le site Google Maps permet de faire des recherches d'itinéraires et des recherches de proximité (ou sont les pizzéria dans votre quartier). Ce qui vous éblouira avec Google Maps, c'est la qualité des plans et le détails des images sattelites (zoom jusqu'à 30m de hauteur seulement).
B) Fonctionnalité de l'API
L'API Google Maps offre des fonctionnalités trés puissante qui dépasse le cadre de ce tutorial. Elle est simple d'utilisation pour un peu que l'on maitrise le javascript. Parmis les possibilités offerte par cette API on trouve :
- L'affichage de carte (plan et satellite)
- La possiblité de choisir l'adresse qui servira de centre pour l'affichage du plan
- L'ajout de repère(icône) cliquable avec apparition d'un calque (genre de fenêtre) qui peut afficher du texte simple, des images, du HTML ou bien même des applications de type forum ou autre. Ces fenêtres peuvent contenir plusieurs onglets contenant différentes informations
- Il est possible d'effectuer des tracés par exemple entre deux adresses
- On peut ajouter un système de recherche d'itinéraires
- L'ajout de marqueur n'est pas limité, on en affiche autant qu'on le souhaite et il est possible de les afficher ou cacher suivant le niveau de zoom
Techniquement cette API se présente sous forme d'un ensemble d'objets javascript ayant chacun leur fonction. Les trois objets principaux sont :
- GMAP2 qui permet de créer un carte
- GClientGeocoder qui traduit une adresse en longitude,latitute.
- GMarker qui permet de placer un repère sur la carte
Voyons comment mettre en place tous ces objets pour obtenir un plan. Mais avant tout avez vous une clef d'activation ?
C) Plan
Etape 1 - La clef d'activation
Pour utiliser l'API de google vous avez besoin d'un clef d'activation et pour avoir un clef il vous faut un compte google.
Si vous n'avez pas de compte google il suffit d'en créer un ici, bien sur c'est gratuit :
https://www.google.com/accounts/ManageAccountEnsuite pour avoir un clef d'activation il faut aller sur le site d'aide à l'utilisation de l'API (cliquer sur "Sign up for a Google Maps API key"):
http://www.google.com/apis/maps/Cette clef est valide pour un nom de domaine exemple www.iworks.fr et tous les sous répertoires du site, par exemple www.iworks.fr/plans/
En revanche pour plan.iworks.fr il faudrait une autre clef.
Voici a quoi ressemble une clef : ABQIAAAAW9GyMK3xmJic7HkkJ6_FKhRgqac2kDoat0qdh_Gp70xojZjKPBS0aYcbexH1s9cAbRM8T_PeZX9xrg
Et ça s'utilise de la manière suivante (cf code ci dessous) :
<script src=" http://maps.google.com/?file=api&v=2.x&key=ABQIAAAAW9GyMK3xmJic7HkkJ6_FKhRgqac2kDoat0qdh_Gp70xojZjKPBS0aYcbexH1s9cAbRM8T_PeZX9xrg" type="text/javascript"></script>
Etape 2 - le PlanVoici ce qui est configurable dans votre carte grâce aux variables commençant par 'cfg_' (cf code ci dessous):
- la hauteur
- la largeur
- le niveau de zoom
- l'adresse
- le texte du popup (texte simple ou HTML)
Certaines options sont configurable en commentant on décommentant des lignes de code (lire les commentaires pour voir lesquelles):
- le zoom grâce à la molette de la souris
- le type de barre de zoom (à gauche dans la carte)
- l'affichage ou non des boutons vue sattelite, plan, hybride
Etape 2 - Le code à insérer là ou doit apparaitre votre plan : <!-- Remplacer la clef aprés key= par la votre//-->
<script src=" http://maps.google.com/?file=api&v=2.x&key=ABQIAAAAW9GyMK3xmJic7HkkJ6_FKhRgqac2kDoat0qdh_Gp70xojZjKPBS0aYcbexH1s9cAbRM8T_PeZX9xrg" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
// Adresse sur laquelle le carte sera centrer et ou sera placer le marqueur
var cfg_adress = '57 rue archereau, 75019 Paris';
// Largeur de la carte
var cfg_largeur = '500px';
// Hauteur de la carte
var cfg_hauteur = '400px';
// Niveau de zoom, entre 1 (niveau globe) et 17 (niveau rue)
var cfg_zoomLevel = 13;
// Texte pour le popup
// Si vous ne souahitez pas de poupup laisser mettre simplement "" comme valeur
var cfg_description = ""+
"<table border='0' width='207' cellpadding='3' cellspacing='0'>"+
"<tr><td valign='top'><div style='color: blue; font-size: 14px; font-weight:bold;'>MnM Solutions</div><br/>57 rue archereau<br/>75019 Paris<br/>01 34 00 16 71<br/>"+
"<a href='http://www.mnmsolutions.fr'>www.mnmsolutions.fr</a>"+
"</td>"+
"<td>"+
"<img src='http://www.business-in-europe.com/fr/visuals/new-voie-express.gif' border='0' alt='Photo' vspace='5' align='right' />"+
"</td></tr></table>";
// Variable globale pour l'objet GMAP2
var map;
// Variable global pour l'objet GClientGeocoder qui traduit une adresse en longitude,latitude
var geocoder;
// Function appellée au chargement de la page web
// Créee et configure la carte
function loadMyMap() {
// Teste si le navigateur est compatible avec l'API Gmaps
if (GBrowserIsCompatible()) {
// Affecte la carte à la div "map_mezy" (voir tout en bas)
var divMap = document.getElementById("map_mezy");
// Redimensionne la carte
divMap.style.width = cfg_largeur;
divMap.style.height = cfg_hauteur;
// Création des objets princiapux
map = new GMap2(divMap);
geocoder = new GClientGeocoder();
// Pour zoomer avec la molette de la souris
// Pour le désactiver ajouter // devant la ligne suivante ou bien la supprimer :)
map.enableScrollWheelZoom();
// Grande barre de zoom
map.addControl(new GLargeMapControl());
// Ou bien : Deux boutons zoom + 4 directions
//map.addControl(new GSmallMapControl());
// Ou bien : Juste deux boutons pour zoomer et dézoomer
//map.addControl(new GSmallZoomControl());
//Pour switcher entre les différentes vues (sattelite, plan, hybride)
map.addControl(new GMapTypeControl());
// On centre la carte sur votre adresse
centerMapOnAdress(cfg_adress);
}
else alert('Votre navigateur ne permet pas l\'affichage de carte Google Maps');
}
// Centre une carte sur une adresse
// Geocode l'adresse
// Message d'erreur si adresse non trouvé
function centerMapOnAdress(adresse) {
if (!adresse.length) alert('Remplir la variable adresse');
// Décodage de l'adresse
geocoder.getLatLng(
adresse,
function(point) {
// Adresse introuvable
if (!point) {
alert('Adresse : ' + addresse + " introuvable");
} else {
// Centre la carte sur l'adresse
map.setCenter(point, cfg_zoomLevel);
// On créer un marqueur à l'adresse spécifiée
var marker = new GMarker(point);
var textePopUp = cfg_description;
// Si il y a une description
if (textePopUp.length) {
// Affiche un popup lors du clic sur le marqueur
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(textePopUp);
});
// Affiche le marqueur
map.addOverlay(marker);
// Par défaut on affiche le popup tout de suite sans attendre un clic
// Désactiver en commentant la ligne
marker.openInfoWindowHtml(textePopUp);
}
else map.addOverlay(marker); // Affiche le marqueur
}
}
);
}
// Au chargement de la page on affiche la carte
window.onload=loadMyMap;
// A la fermeture de la page on libère la mémoire allouée à la carte
window.onunload=GUnload;
//]]>
</script>
<!-- div dédiée à la carte //-->
<div id="map_mezy"></div>
La suite : itinéraireCette contribution sera bien utile à tous les webmasters qui veulent avoir un vrai plan sur leur site. Prochainement nous montrerons comment ajouter une recherche d'itinéraire pour voir comment se rendre facilement à votre adresse.