Weblog W3Positive

Après avoir créé notre carte, nous allons appeler GDownloadUrl, qui permet de charger une ressource de manière asynchrone. Cette fonction prend deux paramètres :

• le fichier de données (ce peut être un programme qui va le générer, ici nous utiliserons un fichier statique)
• la fonction de chargement des données.

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.

Cette fonction peut être définie en ligne, ou nommée. C'est elle qui devra effectuer les traitements (affichage des marqueurs etc) car nous devons attendre d'avoir les données à notre disposition (rappelons-nous que le chargement est asynchrone). Voici le code pour un appel en ligne :

GDownloadUrl("islande.json", function(json, status) { 
  var data = eval('(' + json + ')');
  // traitement
} );

En cas de timeout de la requête (notre ressource met trop de temps à être récupérée : le fichier n'existe pas, ou le programme censé la générer n'y parvient pas ou met trop longtemps), la fonction est appelée avec comme paramètres null et -1.

Le traitement est le même que celui que l'on trouvait dans la fonction load de l'exemple que nous améliorons. Il est juste "déporté" dans la fonction de traitement pour ne s'exécuter qu'après le chargement des données. Attention, pour que map soit accessible dans cette fonction, elle doit être définie en global :

var map = null ;
function load() { 
  ...
  map = new GMap2(document.getElementById("map")); 
  ...
  GDownloadUrl("islande.json", traite_json); 
  ...
}
traite_json = function(json, status) { 
  if (json == null) return ;

  var donnees = eval('(' + json + ')');
  var data = donnees.data ;

  var blueIcon = new GIcon(G_DEFAULT_ICON);
  blueIcon.image = "http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/blank.png";  
  for (i=0 ; i < data.length ; ++i) {
    map.addOverlay(createMarker(new GLatLng(data[i].coord.lat, data[i].coord.lng),
                   data[i].html,
                   eval(data[i].icon)));
  }
}

Voici le fichier JSON utilisé et notre exemple.