27
07 sep 2008


Introduction


Ce tutoriel va nous permettre d'afficher des marqueurs stockés en base de données sur la carte Google Maps. Nous verrons donc comment ouvrir une liaison Ajax avec notre serveur, comment interpréter la réponse envoyée par le serveur et comment construire cette réponse en PHP.

Initialisation


Reprendre la carte du tutoriel n°2.

Définition


Déclarons tout d'abord une fonction qui crée un marqueur sur la carte et qui ouvre une infobulle lorqu'on clique dessus :

function createMarker(point,nom,url) {
var marker = new GMarker(point);
var html = ""+nom+"";
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}


Ajax


L'API Google Maps possède une méthode permettant une communication Ajax avec un script (ici le fichier ajax_mysql.php) :

var urlstr = "./ajax_mysql.php";
GDownloadUrl(urlstr, function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var nom = markers[i].getAttribute("nom");
var url = markers[i].getAttribute("url");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),parseFloat(markers[i].getAttribute("long")));
var marker = createMarker(point,nom,url);
map.addOverlay(marker);
}

Ici nous avons parsé le fichier XML envoyé par le script et nous avons appelé la fonction createMarker() pour chaque élément de type 'marker' du XML et en passant en paramètres le GPoint créé grâce aux attributs 'lat' et 'long', et les attributs 'nom' et 'url'.

Construction du XML côté serveur


Côté serveur, créer un fichier ajax_mysql.php qui ouvre une connexion vers la base de données contenant les enregistrements et qui édite un fichier XML grâce aux fonctions du DOM XML :

$user = "******";
$password = "*****";
$host = "******";
$bdd = "******";

mysql_connect($host,$user,$password);
mysql_select_db($bdd) or die("erreur de connexion à la base de données");
$sql = "select * from test_ajax_mysql";
$res = mysql_query($sql) or die(mysql_error());
$dom = new DomDocument('1.0', 'iso-8859-1');
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node);
while ($result = mysql_fetch_array($res)){
$node = $dom->createElement("marker");
$newnode = $parnode->appendChild($node);
$newnode->setAttribute("nom", $result['nom']);
$newnode->setAttribute("lat", $result['lat']);
$newnode->setAttribute("long", $result['long']);
$newnode->setAttribute("url", $result['url']);
}
$xmlfile = $dom->saveXML();
echo $xmlfile;

?>


Code complet






<br /> [Google Maps] 10. Utiliser Ajax, MySQL et PHP pour afficher des marqueurs<br />






$user = "******";
$password = "*****";
$host = "******";
$bdd = "******";

mysql_connect($host,$user,$password);
mysql_select_db($bdd) or die("erreur de connexion à la base de données");
$sql = "select * from test_ajax_mysql";
$res = mysql_query($sql) or die(mysql_error());
$dom = new DomDocument('1.0', 'iso-8859-1');
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node);
while ($result = mysql_fetch_array($res)){
$node = $dom->createElement("marker");
$newnode = $parnode->appendChild($node);
$newnode->setAttribute("nom", $result['nom']);
$newnode->setAttribute("lat", $result['lat']);
$newnode->setAttribute("long", $result['long']);
$newnode->setAttribute("url", $result['url']);
}
$xmlfile = $dom->saveXML();
echo $xmlfile;

?>