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
| <!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>Application Paysages de France</title>
<style type="text/css">
#map{
position:absolute;top:10px;left:10px;width:1000px; height: 750px
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script language="JavaScript" src="../libraryV3/markermanager_packed.js" type="text/JavaScript"></script>
<script type="text/javascript">
// initialisation avec centre de la carte et zoom initial
var latcentrecarto = 46.54;
var longcentrecarto = 2.416;
var zoominitialcarto = 6;
// initialisation des demi largeur/hauteur des zones touristiques
var demihauteurzonetouristique = 0.116;
var demilargeurzonetouristique = 0.347;
// initialisation des zones touristiques avec le nom et la lattitude, longitude du centre de la zone
var nomzone=[];
var latcentrezone =[];
var longcentrezone =[];
// Bassin d'Arcachon
nomzone[0]= "Bassin d Arcachon";
latcentrezone[0]= 44.6897998686099;
longcentrezone[0]= -1.1421918869018554;
// Côte Basque
nomzone[1]= "Côte Basque";
latcentrezone[1]= 43.415678458962645;
longcentrezone[1]= -1.5047407150268554;
function load() {
//construction de la carte
var mymap;
var centreCarte = new google.maps.LatLng(latcentrecarto, longcentrecarto);
var optionsCarte = {
zoom: zoominitialcarto,
center: centreCarte,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
mymap = new google.maps.Map(document.getElementById("map"), optionsCarte);
//construction des polygones réactifs correspondant aux Zones touristiques
var myzone =[];
var tableaupointspolygone =[];
for(i=0;i<latcentrezone.length;i++){
tableaupointspolygone[i]= [
new google.maps.LatLng(latcentrezone[i]-demihauteurzonetouristique,longcentrezone[i] +demilargeurzonetouristique),
new google.maps.LatLng(latcentrezone[i]-demihauteurzonetouristique,longcentrezone[i]-demilargeurzonetouristique),
new google.maps.LatLng(latcentrezone[i]+demihauteurzonetouristique,longcentrezone[i]-demilargeurzonetouristique),
new google.maps.LatLng(latcentrezone[i]+demihauteurzonetouristique,longcentrezone[i]+demilargeurzonetouristique)];
var optionsZone = {
clickable: true,
fillColor: "#00AAFF",
fillOpacity: 0.5,
map: mymap,
paths: tableaupointspolygone[i],
strokeColor:"#FFAA00",
strokeOpacity: 1,
strokeWeight:1,
zIndex:5
};
myzone[i]= new google.maps.Polygon(optionsZone);
//Evènement : affichage du nom de la zone touristique au clic de la souris dans celle-ci
google.maps.event.addListener (myzone[i],"click", function() {
alert(nomzone[i]);
});
}
return;}
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map"></div>
</body>
</html> |
Partager