retour à la caverne

Tutoriel : Intégrer Google Map V3 sur son site

Si vous n'êtes pas habitué à la notation JSON, même s'il est simple de comprendre le code, vous devriez d'abord vous renseigner sur cette notation... Le tutoriel n'utilisera que du javascript, html et css, autant dire accessible à tout le monde.

Accès rapides du tutoriel

Partie 1 :

Préambule

J'ai eu l'occasion de tester l'API Google Map V2. Je l'ai trouvé fort sympathique et j'ai décidé de me pencher sur sa V3 et d'en faire un petit tutoriel qui vous permettra d'installer à votre tour une petite "Google Map" sur votre site.

Ce tutoriel traite donc de la version 3 de Google Map. Elle se veut plus rapide et ne nécessite pas de "key" (clés API), donc vous n'aurez pas besoin de vous en acquérir une sur google au cours de ce tutoriel.

Ce tutoriel ne traite pas de toutes les fonctionnalités possibles de l'api, pour pousser encore plus loin l'utilisation de google map, vous trouverez tout à partir d'ici : http://code.google.com/intl/fr/apis/maps/documentation/javascript/

SUITE DU TUTORIEL >>
(Les indispensables)

Les indispensables

Je vous lance tout de suite un morceau de code minimaliste qui inclut les lignes de code nécessaires à l'affichage d'une carte google map. J'explique après ce morceau de code :

            <html> 
            <head></head>
            
            <body>
               <div id="carte_gmaps" style="width:600px; height:600px; margin:auto;"></div>
            </body>
            
              <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
            <script type="text/javascript">
            var Gmaps = {	
                  Init : function(id, typeRendu, latCenter, lngCenter, zoom) {
                     this.num=0;
                      this.marker = new Array();
                      this.txtBulles=new Array();
                      this.icon, this.point, this.titleMk;
              
                      var myOptions = {
                          center: new google.maps.LatLng((latCenter ? latCenter : 46.86178015), (lngCenter ? lngCenter :  1.70158805)),
                          zoom: (zoom ? zoom : 6),
                          mapTypeId: (typeRendu ? typeRendu : 'roadmap')
                      }
                              
                      this.map = new google.maps.Map(document.getElementById(id), myOptions);
                  }
              };
              
              window.onload = function(){
                  Gmaps.Init('carte_gmaps');
              }
            </script>
              
            </html>


Alors voilà, le code ci-dessus permet d'aller chercher ce dont on a besoin chez Google pour afficher une carte sur notre site. Vous remarquerez la fonction javascript "initialize()" qui a pour but d'afficher la carte dans la div ayant pour id "carte_gmaps". Avec ce code, nous avons donc notre belle france qui s'affiche sur notre écran.
Voir un aperçu

Explications du code :
- ligne 5 : Ici on place un div qui récupérera la carte envoyé par Google contenant l'id "carte_gmaps". Nous avons pris soin de passé le nom de l'id de la div en paramètre à l'API à la ligne 33. La div a une taille de 600/600 pixels pour permettre à la carte de france d'être entièrement visible. Vous pouvez évidemment jouer avec le zoom et la taille de la div.

- ligne 8 : nous incluons le script javascript de l'API G-Maps. Cette ligne de code récupère le moteur de l'API (toutes les fonctions/options nécessaires à son utilisation). ATTENTION : l'url doit contenir obligatoirement "?sensor=" suivi de "true" ou "false", elle sert à indiquer si google doit tenir compte de l'emplacement géographique du visiteur, nous avons mis false car cela ne nous intéresse pas ici.

- ligne 10 à 25 : nous avons créé un objet javascript qu'on a intitulé "Gmaps" avec la méthode "Init" qui demande jusque 5 attributs :
- id : c'est l'id de la div qui contiendra notre carte, pour notre exemple il s'agit de l'id "carte_gmaps"
- latCenter : la latitude qui servira à centrer la carte par rapport au bord de notre div
- lngCenter : ici c'est idem que la latitude mais avec la longitude...
- typeRendu : le type de rendu de la carte, on aura l'occasion d'approfondir les différents rendus un peu plus tard.
- zoom : ben... c'est le zoom de la carte... il faut généralement faire des test pour le fixer... moi je le mets à 6 par défaut...
Si les champs latCenter et lngCenter ne sont pas définit (comme dans le code ci-dessus), la carte est automatiquement centrer sur la france. Pour le type de rendu, c'est définit par défaut sur ROADMAP (plan) et le zoom, comme dit plus haut, sur 6.
Les lignes 12 à 15 cervent à initialiser des variables qui nous serviront plus tard, ne vous en occuper pas pour le moment.
A la ligne 23, nous demandons à l'api google maps de nous retourner notre carte qu'il crée dans la variable globale this.map (par globale, j'entends : "disponible dans toutes les méthodes de notre objet Gmaps")

- ligne 27 à 29 : On lance la méthode Init de notre objet Gmaps dès que notre page est chargée.


Notre carte s'affiche maintenant correctement, voyons quelques personnalisations possibles grâce aux attributs de la méthode Init...

SUITE DU TUTORIEL >>
(Paramétrer l'affichage par défaut de sa carte)

Paramètrez l'affichage par défaut de votre carte Google Maps

Nous allons commencer par voir le type de rendu de la carte, je veux parler des rendus : Plan, Satellite, Mixte et Relief. Si vous vous souvenez dans le code vu dès le début de ce tutoriel, nous n'avions passé aucun arguments à notre méthode Init(), ce qui avait eu pour conséquence d'afficher par défault à l'option "mapTypeId", le type de rendu "roadmap"... nous avions donc un rendu de type "Plan".

Voici maintenant les différentes valeurs pour chaque type de rendu :
- type Plan = ROADMAP
- type Satellite = SATELLITE (facile)
- type Mixte = HYBRID (hum...)
- type Relief = TERRAIN (oui bon... ok)

Donc si nous devions opter pour un rendu de type mixte, voici les attributs que devrions passer à notre méthode Init() ( Si la méthode Init() ne vous dit rien, rendez-vous ici ) : 

            <script type="text/javascript">
            window.onload = function(){
               Gmaps.Init('carte_gmaps', 'hybrid');
            }
            </script>


Voilà, il n'y a que la ligne 3 (du code ci-dessus) qui a changé et pour être plus précis, nous avons ajouté "hybrid" afin d'obtenir un affiche de notre carte en relief ainsi que les légendes.

Je vous laisse tester les différentes sur notre lancée et regardons ce que nous pouvons proposer à nos visiteurs comme type d'aperçu pour la barre de changement de type d'aperçu (un petit aperçu de ce que je dire peut être... )


Barre de choix du type de rendu par défaut


Voilà, c'est mieux avec une image. Alors désormais, pour qu'on se comprenne mieux, cette barre ci-dessus on va l'appeler "la barre des rendus"...

SUITE DU TUTORIEL >>
(Placer un marqueur sur notre carte)

Placer un marqueur sur notre google maps


Maintenant que nous avons notre carte, il serait peut être tant de lui trouver une utilité... Mais ! ... Et si on lui ajoutait un marqueur pour indiquer où se trouve notre société par exemple, c'est pas une bonne idée ça

On va s'éviter trop de fioritures pour le moment (on verra ça par la suite) et on va imaginer qu'on connait parfaitement chaque latitude et longitude de tous les endroits de la planète (on est pas mal fort les gars, c'est moi qui vous le dit ^^) Alors comme on connait ça par coeur... ma petite entreprise est située au 246 rue du communal 62890 Mentque Nortbécourt... ce qui nous donne les latitudes et longitudes : 50.7558629 / 2.0617393

Pour placer notre marqueur, il va nous falloir 2 nouvelles méthodes à notre objet Gmaps.
    - La méthode CreateMarker() qui aura pour fonction de créer notre marqueur
    - La méthode PlaceMarker() qui aura pour fonction de placer notre marqueur sur la carte. Cette dernière méthode sera automatiquement appelé par la méthode "CreateMarker" afin de nous faciliter à l'avenir les choses... vous verrez plus tard, que ce sera utile ;)

Commençons donc par notre méthode CreateMarker() qui se présente ainsi : 

      <script type="text/javascript">
           // création d'un marqueur
           CreateMarker : function(lat, lng) {
               if(!this.map) {
                   alert('Erreur : Vérifier que la méthode Init a bien été appelé (ex : Gmaps.Init(\'id_carte_gmaps\');)'); return false;
               }
               this.point = new google.maps.LatLng(lat, lng);
               this.PlaceMarker();
           }
       </script>

On voit que notre méthode CreateMarker() demandera 2 attributs (lat et lng) qui correspondent à la latitude et la longitude de notre point.
On commence notre méthode par une condition, celle-ci vérifie que "this.map" a bien été initialisé sinon elle nous retourne une alerte.

On "demande" ensuite à google de nous préparer un marqueur selon une latitude et une longitude passées en paramètres que l'on récupère de notre côté dans la variable "this.point" que nous avions initilisé au préalable dans la méthode Init()
Une fois les coordonnées envoyées à l'api google maps, on apelle notre méthode PlaceMarker() que voici : 

      <script type="text/javascript">
           // Place le marqueur sur la carte
           PlaceMarker : function() {
               this.marker[this.num] = new google.maps.Marker({
                   position: this.point,
                   map: this.map
               });
           }
       </script>

Ici, on demande à l'api google maps de placer notre point "this.point" sur la carte "this.map".
this.point a été créé grâce à la méthode CreateMarker() et this.map, il s'agit de la variable contenant notre carte que nous avions créé grâce à la méthode Init() ... ça ne vous dit rien ? Alors retour au point de départ hihi (Les indispensables)

Evidemment, ces deux nouvelles méthodes sont à placer dans notre objet Gmaps... si nous plaçons cela en dehors de notre objet, nous aurons droit à une belle erreur js...
Avec cela, il faut également que nous appellions notre méthode CreatMarker() en lui fournissant les latitudes et longitudes de notre entreprise... ce qui nous donne alors le code (complet) suivant : 

       <html> 
         <head></head>
         
         <body>
            <div id="carte_gmaps" style="width:600px; height:600px; margin:auto;"></div>
         </body>
           
           <script type="text/javascript">
           var Gmaps = {	
               Init : function(id, typeRendu, latCenter, lngCenter, zoom) {  
                   this.num=0;
                   this.marker = new Array();this.txtBulles=new Array();
                   this.icon, this.point, this.titleMk;
                   
                   var myOptions = {
                       center: new google.maps.LatLng((latCenter ? latCenter : 46.86178015), (lngCenter ? lngCenter :  1.70158805)),
                       zoom: (zoom ? zoom : 6),
                       mapTypeId: (typeRendu ? typeRendu : 'roadmap')
                   }
                           
                   this.map = new google.maps.Map(document.getElementById(id), myOptions);
               },
               
               // création d'un marqueur
               CreateMarker : function(lat, lng) {
                   if(!this.map) {
                       alert('Erreur : Vérifier que la méthode Init a bien été appelé (ex : Gmaps.Init(\'id_carte_gmaps\');)');
                       return false;
                   }
                   this.point = new google.maps.LatLng(lat, lng);
                   this.PlaceMarker();
               },
               
               // Place le marqueur sur la carte et ajout un événement click au besoin
               PlaceMarker : function() {
                   this.marker[this.num] = new google.maps.Marker({
                       position: this.point,
                       map: this.map
                   });
               }
           };
           
           window.onload = function(){
              Gmaps.Init('carte_gmaps');
              Gmaps.CreateMarker(50.7558629, 2.0617393);
           }
           </script>
       </html>

Voici alors un aperçu du résultat renvoyez par le code ci-dessus : Voir l'aperçu

Le tutoriel s'arrête là pour le moment, nous verrons plus tard comment trouver à la volé la latitude et la longitude depuis une adresse postale... ce sera déjà plus pratique n'est ce pas

retour à la caverne