Vous aurez peut-être remarqué qu’a coté des tags dans les billets il y a maintenant un petit lien ‘Où ?’. J’ai il y a quelques semaines ajouté 2 champs à la table de messages dans la base de données de ce blog made-in-1030 qui contiennent la latitude et la longitude, afin de pouvoir géotagger des billets.
A coté de ça, je me suis amusé à programmer un petit ajout pour ce blog,
dans le genre du lightbox qui au lieu d’images mets une carte Google Maps afin de représenter à l’intérieur de ce site l’endroit dont parle le billet. L’idée étant la même que le lightbox :
- Faire un lien vers un url, grace à la balise HTML ‘a’
- Mettre une relation via l’attribut rel de la balise a.
- Exemple : <a href="%lien_google_maps%" rel="gmap">Blabla</a>
Un JavaScript va ensuite scanner tous les liens qui ont la relation ‘gmap’ pour y ajouter un comportement
onclick qui va lancer le script lightbox qui ouvrira la carte dans le site.
Cette méthode a un grand avantage, c’est que la carte reste accessible tant via vos lecteurs RSS (
Bloglines,
Google Reader,
Thunderbird,…) qu’à l’intérieur de ce site où elle offre un plus d’information sans que le visiteur doit quitter la page.
Voici le script en application, cliquez sur les liens pour le voir. (l’exemple ne fonctionneras que depuis le site pour voir le lightbox, sinon ca ira vers Google Maps) :
J’ai déjà été ici et ici, mais j’aimerais bien aller la-bas aussi.
Ce script est à votre disposition. Si vous trouvez des bugs ou quoi, n’hésitez pas à me le signaler. Je ne l’ai pas testé sur IE6 mais bien avec IE7 et FF2.
Cliquez ici pour télécharger la version 0.1 du script gmlightbox.
L’installation se fait en 4 pas :
- Dézipper les fichiers sur votre serveur.
- Demander une clé Google Maps et insérer dans vos pages/templates la balise que le site vous fournis.
- Inclure le JavaScript gmlightbox :
<script src="http://%urlbase%/gmlightbox/gmlightbox.js" type="text/javascript"></script></li> - Inclure le CSS gmlightbox :
<link href="http://%urlbase%/gmlightbox/gmlightbox.css" rel="stylesheet"/>
(%urlbase% corresponds à l'URL de base de votre site)
Une fois que ceci est fait, il ne vous reste plus qu’une chose à faire pour voir la carte parraître sur votre site :
- Trouver l’endroit dans Google Maps et recuperer le lien de l’endroit en cliquant sur « Link to this page », on va appeler ce lien %url_google_maps%
- Mettre la balise a :
<a href="%url_google_maps%" rel="gmap" title="Titre">Coucou</a>
J’espère que c’est plus au moins clair, sous réserve que le sujet vous intéresse, bien entendu. De toute façon rien ne vous oblige à lire.
Le code JavaScript est loin d’être optimal. Je dois encore uniformiser les noms de variables, optimaliser le code etc., mais tout ça suivra. Des que je fais une nouvelle version, je la mettrais à disposition ici.
Passer à Firefox 
?
