Google map à partir d’une table mysql (api V3)

Voici les grandes lignes du tutorial que j’ai utilisé pour générer des objets dynamiques (trajectoires) dans google maps à partir d’une table mysql.
Recommandation, il faut prendre son temps et s’appliquer, l’objet ne s’affichera que lorsque tout le code sera juste.
Voici le lien vers le tutorial en anglais :
http://code.google.com/apis/maps/articles/phpsqlajax_v3.html
On suppose que vous savez utiliser php et mysql. Vous avez donc dans une table mysql divers champs, dont les champ lat et lng au format float 10,6.
Il va falloir passer par xml pour faire passer les données de mysql vers javascript.
On va passer tout de suite à « outputting xml with php ».
Il faut tout naturellement un fichier de connection à votre base de données (à mettre dans un fichier à part pour éviter de le publier par mégarde) (phpsqlajax_dbinfo.php)
Ensuite, on va passer directement à Using PHP’s DOM functions to Output XML (il faut Php5).
Dans le script fourni (phpsqlajax_genxml3.php), j’ai du corriger localhost par $host (et ajouté $host dans mon fichier de connection).
Voyez ce que fait ce fichier. Il créé un élément markers et fait passer tous les champs de la table mysql que l’on veut utiliser comme attributs de cet élément. C’est ainsi qu’on pourra les récupérer.
Pour vérifier que tout va bien, on peut faire afficher ce fichier genxml3.php, il se peut qu’il faille enlever la ligne Header content/type. Les erreurs éventuelles sont dues aux caractères spéciaux des champs mysql, il faudra les tranformer en utf 8 par utf8_encode($row[‘type’]).
C’est là que ça se corse.
Pour appeler le fichier xml (Loading xml file), il va falloir définir la fonction
downloadUrl(url,callback), url étant l’adresse soit du fichier xml, soit du php qui génère dynamiquement le xml.
Puis appeler le fichier par downloadUrl (phpsqlajax_genxml3.php etc….) et le décortiquer.
On définit une série de variables var qui sont les attributs récupérés à partir du fichier xml.
var lat var lng var name var type var html
var html prédéfinit le contenu de la fenêtre d’information que l’on peut faire ouvrir en cliquant sur le marker.
Le marker permet de localiser une petite icône aux latitudes, longitudes voulues.
Le tutorial complique les choses en proposant deux types d’icônes (customIcons) en fonction du type (hotel ou restaurant). Attention aux majuscules, minuscules, singulier, pluriel !
Ensuite il va falloir associer la fenêtre d’information avec la fonction bindInfoWindow.
Ne pas oublier d’appeler cette fonction à la fin du décorticage du xml.
bindInfoWindow(marker, map, infoWindow, html);
Enfin on reconstitue le tout en suivant l’ordre de Putting it all together.
A noter dans la fonction load qui charge la page.
Définir le centre de la carte, le niveau de zoom.
Il faut préciser le type de carte roadmap, terrain ou satellite.
Venons-en à la particularité de cette carte, je voulais afficher une trajectoire.
J’ai choisi l’overlay polyline.
Dans mon décorticage, j’ai récupéré les latitudes/longitudes de départ et d’arrivée que j’ai mis dans les variables point1 et point2 par new google.maps.LatLng(lat,lng)

var point1 = new google.maps.LatLng(
parseFloat(arrows[i].getAttribute(« lat1 »)),
parseFloat(arrows[i].getAttribute(« lng1 »)));
var point2 = new google.maps.LatLng(
parseFloat(arrows[i].getAttribute(« lat2 »)),
parseFloat(arrows[i].getAttribute(« lng2 »)));

Puis il faut définir le chemin :

var Path=[point1, point2];

Puis l’overlay Polyline (je l’ai appelé Arrow, plus haut j’ai défini var Arrow)

Arrow = new google.maps.Polyline({
path: Path,
strokeColor: « #FF0000 »,
strokeOpacity: 1.0,
strokeWeight: 2 });
Arrow.setMap(map);

La dernière ligne lie le tracé à la carte.
J’espère que ces informations seront utiles, en tout cas moi elles m’aideront lorsque je reprendrai cela après une pause.
Je vais de ce pas dessiner de belles flêches avec l’overlay Polygon.