1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Carte</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://maps.google.com/maps?file=api&v=2.x&key= ENTRER VOTRE CLE " type="text/javascript"></script>
<script language='JavaScript' type='text/JavaScript'>
var map = null;
var TousMesMarqueurs = [];
function load (){
var baseIcon = new GIcon();
baseIcon.iconSize=new GSize(12,20);
baseIcon.shadowSize=new GSize(20,22);
baseIcon.iconAnchor=new GPoint(6,20);
baseIcon.infoWindowAnchor=new GPoint(5,1);
var national = new GIcon(baseIcon, 'marker-orange.png', null, '');
var international = new GIcon(baseIcon, 'http://labs.google.com/ridefinder/images/mm_20_blue.png', null, 'http://labs.google.com/ridefinder/images/mm_20_shadow.png');
// Création de la Carte //
var MaCarte = new GMap2(document.getElementById('EmplacementDeMacarte'));
MaCarte.addControl(new GLargeMapControl());
MaCarte.addControl(new GMapTypeControl());
/*Définission du centre et du niveau de zoom de la carte initiale*/
MaCarte.setCenter(new GLatLng(47.38254402467962, 0.690765380859375), 9);
var ToutesLesBalisesInput = document.getElementsByTagName('input');
if(ToutesLesBalisesInput != null){
for(var i = 0; i < ToutesLesBalisesInput.length; i++){
if(ToutesLesBalisesInput[i].type == 'checkbox'){
ToutesLesBalisesInput[i].onclick=function(){EnvoiLoisir(this);}
}
}
}
function EnvoiLoisir(val){
if(val == null){return;}
var loisirselec=val.value;
if(val.checked==true){
GDownloadUrl('data.xml', function(data) {
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');
if(type == loisirselec){
var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')), parseFloat(markers[i].getAttribute('lng')));
var nom = markers[i].getAttribute('nom');
var adresse = markers[i].getAttribute('adresse');
var codepostal = markers[i].getAttribute('codepostal');
var ville = markers[i].getAttribute('ville');
var type = markers[i].getAttribute('type');
var urls = markers[i].getAttribute('urls');
// La syntaxe suivante ne fonctionne pas
var urls = <a href="urls">urls</a>;
// fin du lien
var marker = CreationDuMarqueur(point, nom, adresse, codepostal, ville, type, urls, i);
MaCarte.addOverlay(marker);
}
}
});
}
if(val.checked==false){ <!-- Si la case est décochée ... -->
GDownloadUrl('data.xml', function(data) {
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');
if(type == loisirselec){ <!-- ... les marqueurs correspondant à la catégorie ... -->
MaCarte.removeOverlay(TousMesMarqueurs[i]);<!-- ... sont masqués -->
}
}
});
}
}
function CreationDuMarqueur(point, nom, adresse, codepostal, ville, type, urls, i) {
if(type=='national'){var icone = national;}
if(type=='international'){var icone = international;}
var marker = new GMarker(point,icone);
TousMesMarqueurs[i]=marker;
GEvent.addListener(marker, 'click', function() { <!-- En cas de click sur le marqueur ... -->
marker.openInfoWindowHtml('<b>' + nom + '</b><br/>' + adresse + '<br/>' + codepostal + ' ' + ville +'<br/>'+ urls );
});
return marker;
}
};
</script>
<style type="text/css">
<!--
#cadre {margin: 0; padding:10px 0 5px 0; width: 740px; height: auto; border: 1px solid #B8D6C2;text-align:center; background-color: #F6FCEC;}
#EmplacementDeMacarte {border: 1px solid #B8D6C2;}
-->
</style>
</head>
<body onload="load()" onunload="GUnload()"><center>
<div id="EmplacementDeMacarte" style="width: 740px; height: 400px"></div>
<br />
<div id="cadre">
Cliquez sur les "cases à cocher" ci-dessous pour faire apparaître ou disparaître les marqueurs.<br />
En cliquant sur chaque marqueur, une info-bulle contenant les coordonnées de la société s'affiche.<br /><br />
<form>| <input type="checkbox" name="loisir" value="national">
National |
<input type="checkbox" name="loisir" value="international">
International |
</form>
</div>
</body>
</html> |