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.
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 satellite 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érêt 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 prenant un peu de hauteur on peut prendre des points de repè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 satellites (zoom jusqu'à 30m de hauteur seulement).
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. Parmi les possibilités offerte par cette API on trouve :
Techniquement cette API se présente sous forme d'un ensemble d'objets javascript ayant chacun leur fonction. Les trois objets principaux sont :
Voyons comment mettre en place tous ces objets pour obtenir un plan. Mais avant tout avez vous une 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/ManageAccount
Ensuite 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>
Voici ce qui est configurable dans votre carte grâce aux variables commençant par 'cfg_' (cf code ci dessous):
Certaines options sont configurables en commentant ou dé-commentant des lignes de code (lire les commentaires pour voir lesquelles):
<!-- 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 (satellite, 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>