Nous allons créé une carte sur laquelle s'affichent plusieurs marqueurs.
Un click, sur n'importe quel marqueur, va zoomer la carte sur celui-ci, et déclencher l'ouverture d'une info-bulle.
Puis, en cliquant n'importe ou sur la carte, ou en refermant l'info-bulle, la carte retrouve son aspect initial avec tous ses marqueurs.
Les données sont extraites d'un fichier XML dont le contenu est téléchargeable ici
Il se présente sous cette forme :
<?xml version="1.0" encoding="utf-8"?>
<markers>
<marker lat="47.391174" lng="0.722265"
type="Moto" nom="Honda
Moto Tours" adresse="108-110, avenue de le République" codepostal="37700"
ville="Saint-Pierre-des-Corps" />
etc ...
</markers>
[1] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> [2] <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> [3] <head> [4] <title>Google Maps - Un click sur le marqueur permet de zoomer sur la carte</title> [5] <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> [6] <script src="http://maps.google.com/maps?file=api&v=2.x&key= Mettez Votre Clef API Ici " type="text/javascript"></script> [7] <script type="text/javascript"> [8] //<![CDATA[ [9] function load() { [10] if (GBrowserIsCompatible()) { [11] [12] var baseIcon = new GIcon(); [13] baseIcon.iconSize=new GSize(12,20); [14] baseIcon.shadowSize=new GSize(20,22); [15] baseIcon.iconAnchor=new GPoint(6,20); [16] baseIcon.infoWindowAnchor=new GPoint(5,1); [17] var MonIcone = new GIcon(baseIcon, 'http://labs.google.com/ridefinder/images/mm_20_red.png', null, 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'); [18] [19] // Création de la Carte // [20] var MaCarte = new GMap2(document.getElementById('EmplacementDeMacarte')); [21] MaCarte.addControl(new GLargeMapControl()); [22] MaCarte.addControl(new GMapTypeControl()); [23] MaCarte.setCenter(new GLatLng(47.38254402467962, 0.690765380859375), 9); [24] [25] function CreationDuMarqueur(point,html) { [26] var marker = new GMarker(point,MonIcone); [27] GEvent.addListener(marker, 'click', function() { [28] MaCarte.setCenter(marker.getPoint(),15); [29] marker.openInfoWindowHtml(html); [30] }); [31] GEvent.addListener(marker, 'infowindowclose', function() { [32] MaCarte.setCenter(new GLatLng(47.38254402467962, 0.690765380859375), 9); [33] }); [34] return marker; [35] } [36] [37] [38] GDownloadUrl('http://www.touraineverte.com/Google-Maps/data.xml', function(data) { [39] var xml = GXml.parse(data); [40] var markers = xml.documentElement.getElementsByTagName('marker'); [41] for (var i = 0; i < markers.length; i++) { [42] var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')), parseFloat(markers[i].getAttribute('lng'))); [43] var nom = markers[i].getAttribute('nom'); [44] var marker = CreationDuMarqueur(point, nom); [45] MaCarte.addOverlay(marker); [46] } [47] }); [48] }else{ [49] alert('Désolé, mais votre navigateur n\'est pas compatible avec Google Maps'); [50] } [51] } [52] //]]> [53] </script> [54] [55] </head> [56] <body onload="load()" onunload="GUnload()"><center> [57] <div id="EmplacementDeMacarte" style="width: 740px; height: 400px"></div> [58] </body> [59] </html>
En cours de construction
Néant