Tout d’abord, un peu de background sur le microformat geo : c’est un petit morceau de HTML dans lequel sont indiquées des coordonnées géographiques (latitude, longitude).
Un tag geo est constitué d’un élement quelconque possédant la classe .geo, et contenant deux éléments de type <abbr />, l’un portant la classe latitude et un title indiquant la valeur numérique de latitude, l’autre portant la classe longitude :
<div class="geo">
<abbr class="latitude" title="37.408183">N 37° 24.491</abbr>
<abbr class="longitude" title="-122.13855">W 122° 08.313</abbr>
</div>Nous allons programmer un script jQuery qui repérera tous les blocs de ce type sur notre page, et les enrichira d’un lien vers une application de cartographie (ici Google Maps).
Après le classique chargement de jquery.js :
<script src="http://jquery.com/src/latest/"
type="text/javascript"></script>nous attendons que la page soit prête, et nous lançons alors, sur tous les éléments portant la classe geo, une fonction :
$(document).ready(function() {
$(".geo").each(function() {
...
});
});Cette fonction va chercher, à l’intérieur dudit élément, les éléments de type abbr portant la classe latitude et ayant un attribut title.
Ce qui s’exprime sous la forme :
$(this).find("abbr.latitude[@title]")
Cela nous renvoie un objet jQuery, dont on prend le premier (et probablement le seul) item avec .get(0), item dont on lit ensuite l’attribut title dans une variable :
var latitude = $(this).find("abbr.latitude[@title]").get(0).title;Même chose en suite pour la longitude :
var longitude = $(this).find("abbr.longitude[@title]").get(0).title;Il ne reste alors plus qu’à composer notre URL géographique [1], et à ajouter une image avec le bon lien à la fin du bloc geo
if (latitude && longitude) {
var url = 'http://maps.google.com/'
+ '?ll='+latitude+','+longitude + '&spn=0.1,0.1';
$(this).append('<a href="'+url
+'" target="map"><img src="'
+'http://www.jquery.info/IMG/jpg/googlemaps.jpg'
+'" /></a>');
}Et c’est tout !
RSS 2.0
Plan du site
Espace privé