|
|
Le fichier XML que nous utilisons, qui doit impérativement être encodé en UTF-8 :
<?xml version="1.0" encoding="utf-8" ?><markers> <marker lat="48.9" lng="2.3" info="Premier endroit" details="Quelques informations supplémentaires" /> <marker lat="49" lng="3" info="Deuxième endroit" details="Quelques informations supplémentaires" /> <marker lat="48.2" lng="2.7" info="Troisième endroit" details="Quelques informations supplémentaires" /> <marker lat="48.5" lng="2.4" info="Quatrieme endroit" details="Quelques informations supplémentaires" /></markers>
Notre fichier XHTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Utilisation de XML</title> <script src="http://maps.google.com/maps?file=api&v=2" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(48.7, 2.3), 8); function creerMarker(point, onglet1, onglet2) { var marker = new GMarker(point); var infoTabs = [ new GInfoWindowTab("Infos", onglet1), new GInfoWindowTab("Détails", onglet2) ]; GEvent.addListener(marker, "click", function() { marker.openInfoWindowTabsHtml(infoTabs); }); return marker; } GDownloadUrl("donnees.xml", function(data) { var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")), 9); var marker = creerMarker(point, markers[i].getAttribute("info"), markers[i].getAttribute("details") ); map.addOverlay(marker); } }); } } //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <div id="map" style="width: 600px; height: 200px"></div> </body></html>
Exemple de code HTML pour les infobulles :
- <marker lat="48.2" lng="2.7" info="Troisième endroit" details="Grâce à HTML, nous pouvons utiliser des images : <br/> <img src='http://www.google.com/intl/fr_fr/images/maps_results_logo.gif'/> " />
|
