Trouver les coordonnées Geo d'une adresse

Le vieux Port de Marseille

• Le Vieux Port workquai des Belges 13001 Marseille .

Le Vieux Port (en occitan provençal lo Pòrt Vielh selon la norme classique ou lou Pouart Vièi selon la norme mistralienne) est un site de Marseille qui se trouve en bas de la Canebière. Fondée en 600 av JC par des marins grecs originaires de Phocée en Asie Mineure sous le nom de Massalia, Marseille est la plus ancienne implantation urbaine de France.

• Source

Trouver les coordonnées géographique d'une adresse sans un GPS n'est pas évident. On peut tenter de les lire sur une carte. Ce n'est pas très fiable et il faut avoir la bonne carte sous la main. Comme souvent la solution nous vient de l'Api Google Maps. Nous ne développerons pas pour l'instant une telle solution, mais nous irons tout simplement nous servir de la page de La Touraine Verte qui nous donne les informations dont nous avons besoin.

1. Entrer la recherche dans la boite en dessous de la carte : Vieux-Port, Marseille.
2. Noter les coordonnées : Latitude 43.295465 et Longitude 5.373816.
3. Créer notre balise Geo comme vue précédemment en modifiant les coordonnées et le texte.

• Vieux-Port

A noter qu'en déplaçant le "marker" sur la carte on peut affiner la recherche et trouver une position exacte en s'aidant des vues satellite, ou de sa connaissance du terrain. A ce stade de notre travail on aimerais vérifier que cela fonctionne en dehors de notre Css, c'est le rôle des "parser" de microformats, et on ouvre notre page dans Firefox pour verifier avec Operator.

Premiers pas avec GEO

Le but de ce blog est de faire la démonstration d'un site web geolocalisable en utilisant le web sémantique, les microformats et la classe geo. Je vous propose donc de construire un blog autour de Google Maps et de son Api JavaScript. Pour ce faire je vous convie à une visite guidé de Marseille et des alentours. Avant de passer aux choses sérieuses, il faut posséder un blog ou en créer un chez Blogger. J'ai ajouté de suite et sans réfléchir les codes pour avoir des stats et le référencèrent Google, bien sur ce n'est pas obligatoire. La transposition vers d'autres systèmes ne devrait pas être trop difficile.

1. Ajout du code Google Analytics : Paramètres Analytics > Paramètres de profil > Code de suivi
2. Copiez le bloc de code Javascript dans chaque page Web dont vous souhaitez effectuer le suivi, en le plaçant juste avant la balise ◄/body►
3. Ajout du code Outils Google pour les webmasters : Tableau de bord > Votre blog > Outils > Gérer la validation de site
4. Copiez la balise META mentionnée en la plaçant juste avant la balise ◄/head►. " Plus d'infos ici...

Notre-Dame-de-la-Garde

• Notre-Dame-de-la-Garde workrue du Fort du Sanctuaire 13006 Marseille.

Notre-Dame-de-la-Garde, également appelée "Bonne mère", est l'une des basiliques mineures de l'Église catholique. Elle est située sur les hauteurs de Marseille à 162 m d'altitude, au sud du Vieux-Port.

• Source

Geo est un simple format pour baliser l'information WGS84 des coordonnées géographiques (latitude, longitude), adaptable pour embarquement dans le HTML ou XHTML, Atom, RSS et le XML arbitraire. geo est une représentation 1:1 de la propriété "geo" dans le standard vCard Notre aventure peut commencer en incluant notre premiére balise geo dans une page:

1. Ajouter la balise à votre code HTML.

Notre-Dame-de-la-Garde
Ce qui nous donne : Notre-Dame-de-la-Garde. Il n'y a rien de visible sauf en passant le curseur sur le texte. La balise ABBR nous renvoie les coordonnées Latitude longitude de la celebre basilique de Marseille. Le but des micro-formats étant de rendre compréhensible par une machine, un programme, des informations humaines, il va bien sur falloir un peu travailler. A noter que certain "Parser" de microformats ne reconnaisse que la balise ABBR, ce qui est absurde, mais autant faire avec. Avant d'aller plus loin je vous propose juste de rajouter une balise CSS à votre blog, pour visualiser les Microformats Geo.

1. Tableau de bord > Mise en page > Modifier le code HTML
2. Ajouter les lignes suivantes juste avant : ]]◄/b:skin►

/* Microformat */ .geo { border:1px solid #000000; }

• Notre-Dame-de-la-Garde.

Et sur une carte Google Maps ?

• http://maps.google.com/?hl=FR&ie=UTF8&ll=43.284008,5.371059&spn=0.002062,0.004034&t=h&z=18.

Le parametre ll=43.284008,5.371059 est le même que celui de notre balise. Une prochaine approche consiteras à trouver cette information.