Chacun sa carte

Certains d'entre vous m'ont déjà demandé des conseils par mail pour afficher une carte Google Map sur leur blog hébergé chez Blogger. Si vous maîtrisez un tant soit peu le copier/coller, vous devriez pouvoir afficher une carte semblable à celle-ci en quelques minutes. Petit tutoriel étape par étape...


Introduction

Nous allons ici nous intéresser à l'API Version 2 de Google Map. La version 3 est disponible en béta mais je préfère commencer par la version que j'utilise actuellement.


Étape 1 : Récupérer une clé API

Afin d'utiliser une carte générée par Google Map, il faut vous identifier auprès des serveurs Google avec une clé correspondant à votre nom de domaine. Vous avez besoin pour cela d'un compte Google mais si vous avez un blog chez Blogger, c'est déjà fait et vous n'avez plus qu'à :

1. Vous rendre sur cette page : http://code.google.com/intl/fr/apis/maps/signup.html
   


2. Lire les conditions d'utilisation (si vous êtes anglophobe, il y a d'autres langues disponibles dans un menu déroulant en haut à droite. Pas de français cependant.) ;
   


3. Cocher le “I have read and agree with the terms and conditions”, indiquer l'adresse de votre blog et cliquer sur "Generate API Key" :




4. Récupérer la clé ainsi générée avec un double-clic qui devrait tout sélectionner et un Ctrl+C pour faire un copier.
   

Étape 2 : Insérer la clé API dans son blog

Je considère que si vous souhaitez installer une carte, c'est que vous savez modifier le template de votre blog au moins de manière basique. Il vous faut alors :

1. Ouvrir votre template ;
   


2. Repérer l'élément du code suivant : UNE ERREUR S'EST GLISSEE !!!!

   </head>



3. Insérer juste avant cet élément le code ci-dessous en prenant soin d'insérer votre clé :

   <script type='text/javascript'/ src='http://maps.google.com/maps?file=api&v=2.s&hl=fr&key=INSERER_VOTRE_CLE_ICI'>

   Vous devriez avoir quelque chose comme ça :

Remarque : votre clé étant valable seulement pour le domaine de votre blog, vous aurez un message d'erreur à chaque fois que vous modifierez l'apparence de votre blog en utilisant l'onglet "Mise en page" de l'interface de Blogger. Ce n'est absolument pas un problème, votre carte fonctionnera correctement une fois en ligne.


Étape 3 : Configurer sa carte

Pour cette partie, le code que je vous donne correspond à la carte que j'utilise pour "le Japon et moi". Il y a de nombreuses autres possibilités mais vous pouvez toujours vous en servir de base pour développer votre propre carte.

1. Ouvrir votre template ;
   


2. Repérer l'élément du code suivant qui se situe tout à la fin :

   </body>



3. Insérer juste avant le code suivant :

   <script type='text/javascript'>
   
   //<![CDATA[
   
   var select_html = '<select onChange="handleSelected(this)">' +
   '<option selected> - Choisissez un lieu - </option>';
   var gmarkers = [];
   var htmls = [];
   var i = 0;
   
   var map = new GMap2(document.getElementById("map2"));
   map.addControl(new GSmallMapControl());
   map.addControl(new GMapTypeControl());
   map.removeMapType(G_HYBRID_MAP);
   map.addMapType(G_PHYSICAL_MAP);
   map.setMapType(G_PHYSICAL_MAP);
   map.setCenter(new GLatLng(38.341656192795924, 138.9111328125), 5);
   
   function createTabbedMarker(point,name,html1,html2,label1,label2) {
   var marker = new GMarker(point);
   GEvent.addListener(marker, "click", function() {
   marker.openInfoWindowTabsHtml([new GInfoWindowTab(label1,html1), new GInfoWindowTab(label2,html2)]);
   });
   gmarkers[i] = marker;
   htmls[i] = html1;
   select_html += '<option> ' + name + '</option>';
   i++;
   return marker;
   }
   function handleSelected(opt) {
   var i = opt.selectedIndex - 1;
   if (i > -1) {
   GEvent.trigger(gmarkers[i],"click");
   }
   else {
   map.closeInfoWindow();
   }
   }
   
   // ************** Marker Zushi ******************
   var point = new GLatLng(35.296746, 139.579840);
   var marker = createTabbedMarker(point, "Zushi", "<table><tbody><tr><td><a href='http://lejaponetmoi.blogspot.com/2008/09/zushi-hayama.html'><img src='http://2.bp.blogspot.com/_p67Yup2YnnU/SOBXZ408fII/AAAAAAAADX0/Ht91U88x_6E/s320/Zushi_Hayama_001.jpg' width=150 height=100></a></td><td><u>Lieu</u> : Zushi<br><br><u>Nb. d'articles</u> : 1</td></tr></tbody></table>", "Cliquez sur l'article que vous souhaitez lire :<br>* <a href='http://lejaponetmoi.blogspot.com/2008/09/zushi-hayama.html'>Plage Hayama Morito</a>", "Description", "Articles");
   map.addOverlay(marker);
   
   select_html += '</select>';
   document.getElementById("selection").innerHTML = select_html;
   
   //]]>
   </script>

Le code pour votre carte est prêt et on a également configuré un menu déroulant qui reprend les lieux répertoriés sur la carte par ordre alphabétique. Vous pouvez bien sûr modifier certains éléments comme :

1. Les coordonnées géographiques du centre de la carte :

   map.setCenter(new GLatLng(38.341656192795924, 138.9111328125), 5);

2. Le niveau de zoom (5 dans notre cas) :

   map.setCenter(new GLatLng(38.341656192795924, 138.9111328125), 5);

3. L'apparence des pop-ups lorsque vous cliquez sur un marqueur :
   

   function createTabbedMarker(point,name,html1,html2,label1,label2) {
   var marker = new GMarker(point);
   GEvent.addListener(marker, "click", function() {
   marker.openInfoWindowTabsHtml([new GInfoWindowTab(label1,html1), new GInfoWindowTab(label2,html2)]);
   });
   gmarkers[i] = marker;
   htmls[i] = html1;
   select_html += ' ' + name + '';
   i++;
   return marker;
   }
   function handleSelected(opt) {
   var i = opt.selectedIndex - 1;
   if (i > -1) {
   GEvent.trigger(gmarkers[i],"click");
   }
   else {
   map.closeInfoWindow();
   }
   }

Les possibilités ne manquent donc pas et j'essaierai de parler plus en détails de certaines lorsque j'aurai un peu plus de temps.


Étape 4 : Placer un marqueur

Si vous jetez un coup d'œil au code source de mon blog (qui est un vrai capharnaüm), vous verrez à la fin une longue liste d'éléments que j'ai appelé ******* Marker XYZ ********* correspondant à chaque lieu présent sur la carte (Voir l'exemple "Marker Zushi" ci-dessus). Vous pouvez les reproduire pour installer vos propres marqueurs en prenant soin de changer les coordonnées géographiques de la première ligne. Le reste correspond à ma configuration des pop-ups avec deux onglets et aux différents champs que je souhaitais avoir : modifiez-les donc selon vos besoins personnels.

Étape 5 : Afficher la carte

Pour la dernière étape, il vous suffit de créer un article où vous souhaitez que la carte s'affiche et d'y insérer le code suivant :

<div id="map2" style="width: 605px; height: 450px; color: rgb(51, 51, 51);"></div>

Vous pouvez notamment modifier ici la taille de la carte affichée :

width: 605px; height: 450px;

Et choisir ou non d'afficher une liste des lieux répertoriés avec le code suivant (placez-le où vous souhaitez qu'elle s'affiche) :

<div id="selection"></div>

Publiez votre article et voilà votre carte exposée aux yeux du monde ! Je ne rentrerai pas plus dans les détails pour aujourd'hui, mais si vous avez une question, n'hésitez pas à laisser un message bien entendu. Bon bidouillage ! ;)