Ce troisième billet sur l'API Google Maps vous apprendra à afficher des données distantes au format JSON (produites dynamiquement par un serveur par exemple). L'API peut utiliser le format XML. Je préfère cependant utiliser le format JSON, plus compact et plus rapide à traiter en JavaScript, mais aussi plus complexe.

Partons de l'exemple 3 du billet précédent dont nous supprimons la création du marqueur lors du chargement de la page (fonction load) pour la remplacer par un appel à la fonction GDownloadUrl. Cette fonction permet de charger une ressource de manière asynchrone et prends deux paramètres :

  • url : l'URL de la ressource, exemple04.json dans notre exemple.
  • onload : la fonction à appeler après le chargement de la ressource. Cette fonction doit avoir deux paramètres :
    • text : le texte du document téléchargé.
    • status : le code du statut de la réponse HTTP.
    En cas de timeout de la requête, la fonction est appelée avec null et -1 comme arguments.

Nous avons donc la fonction load suivante :

function load() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(46.85, 1.75), 6); GDownloadUrl("exemple04.json", setup_json); } else { alert("Desole, l'API Google Maps n'est pas compatible avec votre navigateur."); } }

Notons au passage que la vairable map a été sortie de la fonction afin de la rendre globale et de pouvoir y accéder dans la fonction set_json :

setup_json = function(json, status) { var data = eval('(' + json + ')'); for (var i=0; i<data.markers.length; i++) { var point = new GLatLng(data.markers[i].lat, data.markers[i].lng); var marker = createMarker(point, data.markers[i].html); map.addOverlay(marker); } }

Le résultat est visible sur l'exemple 4.

Plus de précisions : Data in JSON files.

Les autres billets de cette série sur l'API Google Maps :