L'API Google Maps Xml et Ajax sont sur un site web - Programmation

Navigation : Publications > Programmation

Nous avions vu dans notre précédent article le service de géolocalisation avec l'API Google Maps, permettant d'afficher une carte du point de connexion de l'internaute.
Dans le cas où il y a plusieurs points, il suffit d'utiliser la base SQL, mais si la quantité d'information risque d'être important, on peut alors utiliser les Flux XML avec la syndication de Flux.

Api google maps et XML

Le principe des flux xml dans l'API est d'aller chercher un ensemble d'informations (en l'occurence des coordonnées géographique, des noms de villes) dans un fichier xml, ce dernier ficher est constitué à la volée avec la syndication de flux. La syndication étant à part, partons du principe que le fichier xml est généré ( voyez ici pour en savoir plus sur la syndication de Flux)

Prenons en exemple un fichier XML déja utilisé sur le site :
La structure est la suivante :

markers
marker lat="" lng="" link="" ville="" type="" guid="" title="" cat=""
markers

Au niveau de l'utilisation de l'API, l'appel et l'utilisation du fichier xml peut se faire ainsi :

GDownloadUrl('data.xml', function(data) {
MaCarte.clearOverlays();
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName('marker');
for (var i = 0; i < markers.length; i++) {
var type = markers[i].getAttribute('type');
var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')), parseFloat(markers[i].getAttribute('lng')));
var title = markers[i].getAttribute('title');
var url = markers[i].getAttribute('guid');
var link = markers[i].getAttribute('link');
var ville = markers[i].getAttribute('ville');
var type = markers[i].getAttribute('type');
var cat = markers[i].getAttribute('cat');
var marker = creerMarker(point, title, url, link, ville, type, cat);
MaCarte.addOverlay(marker);
}
});

C'est la fonction creerMarker qui va ensuite positionner l'épingle sur le point et afficher une info-bulle classique ou en html avec les informations sur la ville, l'url, la catégorie etc ...

La carte est bien ainsi, mais selon la taille du fichier xml et les types d'information, on se retrouve avec une carte avec de nombreux marqueurs positionnés, de couleur différente eventuellement, mais il n'est pas possible de faire afficher une information donnée par une couleur de marqueur. Ajax va alors nous aider

Ajax et Google Maps

Le fichier Xml étant constitué voire même affiché sur la carte, il ne reste plus qu'à sélectionner les données et permettre avec des boutons radios (par exemple) de ne faire afficher qu'une seule couleur de marqueur.

La fonction creerMarker peut alors devenir :

function creerMarker(point, title, thumb, link, ville, type, cat) {
if(type=='Entreprise'){var icone = entreprise;}
if(type=='Boutique'){var icone = boutique;}
if(type=='Freelance'){var icone = freelance;}
if(type=='Association'){var icone = association;}
if(type=='Club'){var icone = club;}
var marker = new GMarker(point, icone);
return marker;
}

Au chargement de la carte, il faut gérer les boutons radios positionnés dans un formulaire classique

var MesBalisesInput = document.getElementsByTagName('input');
if(MesBalisesInput != null){
for(var i = 0; i < MesBalisesInput.length; i++){
if(MesBalisesInput[i].type == 'radio'){
MesBalisesInput[i].onclick=function(){Charge(this);}
}
}
}


function Charge(val){
GDownloadUrl('data.xml', function(data) { // voir au dessus
}
}

Le script présente ainsi une carte avec un choix de bouton radio permettant de sélectionner des "types de", avec des données issues d'une base SQL, et intérrogées par le cache d'un flux de syndication.
Le résultat peut-être vu sur cet Annuaire thèmatique cartographié

Commentaires Page 1/1

Cet article n'a pas encore été commenté.
Vous pouvez vous exprimer en remplissant le formulaire ci-dessous.

Commenter cet article

Pseudo :
Email :
Titre :
Commentaire :