Les 2 plugins ont à peine été mis en ligne hier qu’ils ont déjà droit à une mise à jour.

WordPress Geotagging Plugin v0.1.2
Le plugin a désormais une option en plus qui permet de retrouver un endroit sur la carte à partir d’une adresse. Un placemark apparaît également quand on regarde une carte sur Google Maps.

WordPress Google Maps Lightbox Plugin v0.1.2
J’ai adapté le plugin pour qu’il n’attende plus que le document soit chargé entièrement pour s’initialiser.

Si vous avez installé les versions précédentes, n’hésitez pas à les mettre à jour et à me faire part de bugs, remarques et suggestions. En principe ça devrait être bon. Vous devez simplement mettre à jour les fichiers, les settings restent maintenus.

J’avais il y a quelques semaines mis en ligne mon Google Maps Lightbox. Dans le ‘guide d’installation’, j’expliquais les diverses étapes afin d’installer celui-ci. Bonne nouvelle, si vous êtes sous WordPress, ce sera plus facile, car je viens de le transformer en plugin.

Pour rappel, le gmlightbox affiche dans un lightbox une Google Map à partir de tout lien qui va vers une carte Google Maps. Souvenez vous des 3 exemples :

J’ai déjà été ici et ici, mais j’aimerais bien aller la-bas aussi.

Pour l’installer, suivez les pas suivants :

• Télécharger le plugin Google Maps Lightbox pour WordPress.
• Mettez le dossier ‘gmlightbox’ issu du zip dans votre répértoire de plugins, étant ‘wp-content/plugins’.
• Activez le plugin via la console admin.
• Via « Options », « gmlightbox », remplissez la clé Google Maps que vous pouvez obtenir gratuitement en suivant ce lien (qui parraît sur la page également).
• Vous êtes désormais prêt à utiliser le gmlightbox. Ajoutez à chaque lien mis la relation gmap rel="gmap", exemple : <a href="http://..." rel="gmap">.

Pour info, il y a un blog WordPress expérimental qui m’a servi pour les tests et sur lequel les plugins que je développe tournent.

Merci de me faire part de bug ou incompatibilités en tout genre afin que je puisse y remedier au plus vite.

Voilou… Qu’est-ce qu’on dis ?

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 :

1. Dézipper les fichiers sur votre serveur.
2. Demander une clé Google Maps et insérer dans vos pages/templates la balise que le site vous fournis.
3. Inclure le JavaScript gmlightbox :
   <script src="http://%urlbase%/gmlightbox/gmlightbox.js" type="text/javascript"></script></li>
4. 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 :

1. 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%
2. 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.