1. Accueil
  2. Tutoriels
  3. Javascript

Plan d'accès sur votre site avec zoom, vue sattelite, votre logo et adresse grâce à google maps.

Dernière mise à jour le par pijaku .

Plan d'accès sur votre site avec zoom, vue satellite, votre logo et adresse grâce à google maps

Introduction

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.

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 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).

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. Parmi les possibilités offerte par cette API on trouve :

  • L'affichage de carte (plan et satellite)
  • La possibilité 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 ?

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/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>

Etape 2 - le Plan

Voici 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 configurables en commentant ou 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 satellite, plan, hybride

Etape 3 - 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 (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>
A voir également
Ce document intitulé « Plan d'accès sur votre site avec zoom, vue sattelite, votre logo et adresse grâce à google maps. » issu de CodeS SourceS (codes-sources.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
18 Commentaires