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 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Diving Map</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title> Google Maps Example</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//<![CDATA[
/* Déclaration des variables globales */
var contenuListe = "";
var tableaumarqueurs = [];
var html="";
var infoWindow = new google.maps.InfoWindow;
var bounds = new google.maps.LatLngBounds();
/* Déclaration de la variable "urlXml" avec le chemin et le nom du fichier XML avec les coordonnées des sites */
var urlXml = "genxml.php";
var customIcons = {
spot: {
icon: 'vert.png'
},
ile: {
icon: 'ile.png'
},
epave: {
icon: 'epave.png'
},
avion: {
icon: 'avion.png'
}
};
function load() {
var latlng = new google.maps.LatLng(43.211182, 5.327511);
var options = {
center: latlng,
zoom: 12,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("map"), options);
downloadUrl(urlXml, function(data) {
var xml = parseXml(data);
marqueurs = xml.documentElement.getElementsByTagName("marqueur");
contenuListe += '<ol>';
for (var i = 0; i < marqueurs.length; i++) {
var level = '<br /><li>Niveau Recommandé : ' + marqueurs[i].getAttribute('level') + '</li>' ;
var notation = '<br /><li>Intéret de la plongée : ' + marqueurs[i].getAttribute('notation') + ' sur 5 ' + '</li>' ;
var prof = '<br /><li>Profondeur Maximale : <font color=#FF0000>-' + marqueurs[i].getAttribute('prof') + ' Mètres ' + '</font></li>';
var gps = '<br /><li>Coordonnées GPS : ' + marqueurs[i].getAttribute('gps') + '</li></ul>' ;
var url = '<br /><center><a href="/' + marqueurs[i].getAttribute('url') + '" target="_blank">Description Complete </a></center>';
var type = '</u></strong><br /><ul><li>Type de Plongée : ' + marqueurs[i].getAttribute('type') + '</li>' ;
var nom = '<strong><u>' + marqueurs[i].getAttribute('nom');
var ile = marqueurs[i].getAttribute('ile');
var icone = marqueurs[i].getAttribute('icone');
var point = new google.maps.LatLng(
parseFloat(marqueurs[i].getAttribute("latitude")),
parseFloat(marqueurs[i].getAttribute("longitude")));
html = nom + type + notation + level + prof + gps;
var icon = customIcons[icone] || {};
var marqueur= new google.maps.Marker({
map: map,
position: point,
icon: icon.icon
});
tableaumarqueurs[i]=marqueur;
bindInfoWindow(marqueur, map, infoWindow, html);
contenuListe += '<li><a href="javascript:bindInfoWindow(marqueur,map,infoWindow,html)">' + nom +'</a></li>';
}
contenuListe += '</ol>';
document.getElementById("EmplacementDeLaListe").innerHTML = contenuListe;
});
}
function bindInfoWindow(marqueurs, map, infoWindow, html) {
google.maps.event.addListener(marqueurs, 'click', function() {
infoWindow.setContent(html);
map.setZoom(16);
infoWindow.open(map, marqueurs);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request.responseText, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function parseXml(str) {
if (window.ActiveXObject) {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
} else if (window.DOMParser) {
return (new DOMParser).parseFromString(str, 'text/xml');
}
}
function doNothing() {}
//]]>
</script>
</head>
<body onLoad="load()">
<div class="EncadrementDeMaCarte">
<div id="Container" style="position:relative; width:100%; height:400px">
<div id="map" style="float: left; width: 60%;height: 650px; border: none"></div>
<div id="EmplacementDeLaListe" style="overflow: auto; float: right; position: relative; width: 40%; height: 650px; border: none; background-color: #fff"></div>
</div>
</body>
</html> |
Partager