| 424 |
jpm |
1 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
|
2 |
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
|
3 |
<head>
|
|
|
4 |
<title>Google Maps API Example - Observations</title>
|
|
|
5 |
|
|
|
6 |
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
|
|
7 |
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
|
|
8 |
|
| 435 |
jpm |
9 |
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
|
| 427 |
jpm |
10 |
<script type="text/javascript" src="<?=$url_base?>modules/carto/squelettes/markerclusterer_compiled.js"></script>
|
| 424 |
jpm |
11 |
|
|
|
12 |
<script src="<?=$url_json?>" type="text/javascript"></script>
|
|
|
13 |
<script type="text/javascript">
|
|
|
14 |
//<![CDATA[
|
|
|
15 |
var markerClusterer = null;
|
|
|
16 |
var map = null;
|
| 439 |
jpm |
17 |
var pointImageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&chco=FFFFFF,008CFF,000000&ext=.png';
|
| 424 |
jpm |
18 |
var carteCentre = new google.maps.LatLng(46.4, 3.10);
|
|
|
19 |
var carteOptions = {
|
|
|
20 |
zoom: 6,
|
|
|
21 |
center: carteCentre,
|
|
|
22 |
mapTypeId: google.maps.MapTypeId.ROADMAP
|
|
|
23 |
};
|
|
|
24 |
|
|
|
25 |
function refreshMap() {
|
|
|
26 |
if (markerClusterer) {
|
|
|
27 |
markerClusterer.clearMarkers();
|
|
|
28 |
}
|
|
|
29 |
|
| 439 |
jpm |
30 |
var points = [];
|
|
|
31 |
var pointImage = new google.maps.MarkerImage(pointImageUrl, new google.maps.Size(24, 32));
|
|
|
32 |
var infoBulle = new google.maps.InfoWindow();
|
| 424 |
jpm |
33 |
for (var i = 0; i < obs.nombre; ++i) {
|
| 439 |
jpm |
34 |
var maLatLng = new google.maps.LatLng(obs.points[i].coord_x, obs.points[i].coord_y);
|
|
|
35 |
var point = new google.maps.Marker({
|
|
|
36 |
position: maLatLng,
|
| 435 |
jpm |
37 |
map: map,
|
| 439 |
jpm |
38 |
icon: pointImage,
|
| 435 |
jpm |
39 |
title: 'test'
|
| 424 |
jpm |
40 |
});
|
| 435 |
jpm |
41 |
|
| 439 |
jpm |
42 |
google.maps.event.addListener(point, 'click', function() {
|
|
|
43 |
var contenu = this.getPosition().toString();
|
|
|
44 |
infoBulle.setContent(contenu);
|
|
|
45 |
infoBulle.open(map, this);
|
| 435 |
jpm |
46 |
});
|
|
|
47 |
|
| 439 |
jpm |
48 |
points.push(point);
|
| 424 |
jpm |
49 |
}
|
|
|
50 |
|
| 439 |
jpm |
51 |
markerClusterer = new MarkerClusterer(map, points);
|
| 424 |
jpm |
52 |
}
|
|
|
53 |
|
| 435 |
jpm |
54 |
function afficher() {
|
|
|
55 |
document.getElementById('panneau-lateral').style.display = 'block';
|
|
|
56 |
document.getElementById('pl-corps').innerHTML = 'Afficher';
|
|
|
57 |
document.getElementById('pl-ouverture').style.display = 'none';
|
|
|
58 |
google.maps.event.trigger(map, 'resize');
|
|
|
59 |
};
|
|
|
60 |
function cacher() {
|
|
|
61 |
document.getElementById('panneau-lateral').style.display = 'none';
|
|
|
62 |
document.getElementById('pl-corps').innerHTML = 'Cacher';
|
|
|
63 |
document.getElementById('pl-ouverture').style.display = 'block';
|
|
|
64 |
google.maps.event.trigger(map, 'resize');
|
|
|
65 |
};
|
|
|
66 |
|
| 424 |
jpm |
67 |
function initialize() {
|
|
|
68 |
map = new google.maps.Map(document.getElementById('carte'), carteOptions);
|
| 435 |
jpm |
69 |
|
|
|
70 |
// Create the DIV to hold the control and call the HomeControl()
|
|
|
71 |
// constructor passing in this DIV.
|
|
|
72 |
var panneauDiv = document.getElementById('panneau-lateral');
|
|
|
73 |
panneauDiv.index = 0;
|
|
|
74 |
map.controls[google.maps.ControlPosition.TOP_LEFT].push(panneauDiv);
|
|
|
75 |
|
|
|
76 |
var ouverturePanneauDiv = document.getElementById('pl-ouverture');
|
|
|
77 |
ouverturePanneauDiv.index = 0;
|
|
|
78 |
map.controls[google.maps.ControlPosition.TOP_LEFT].push(ouverturePanneauDiv);
|
|
|
79 |
|
|
|
80 |
var ouvertureDiv = document.getElementById('pl-ouverture');
|
|
|
81 |
google.maps.event.addDomListener(ouvertureDiv, 'click', afficher);
|
|
|
82 |
|
|
|
83 |
var fermetureDiv = document.getElementById('pl-fermeture');
|
|
|
84 |
google.maps.event.addDomListener(fermetureDiv, 'click', cacher);
|
|
|
85 |
|
|
|
86 |
cacher();
|
| 424 |
jpm |
87 |
refreshMap();
|
|
|
88 |
}
|
|
|
89 |
//]]>
|
|
|
90 |
</script>
|
|
|
91 |
<style type="text/css">
|
|
|
92 |
html, body {
|
|
|
93 |
margin:0;
|
|
|
94 |
padding:0;
|
|
|
95 |
height: 100%;
|
| 435 |
jpm |
96 |
font-family:Arial;
|
|
|
97 |
font-size:12px;
|
|
|
98 |
}
|
| 424 |
jpm |
99 |
#carte {
|
|
|
100 |
width:100%;
|
|
|
101 |
height:100%;
|
| 435 |
jpm |
102 |
}
|
|
|
103 |
.bouton {
|
|
|
104 |
background-color:white;
|
|
|
105 |
border:2px solid black;
|
|
|
106 |
cursoir:pointer;
|
|
|
107 |
text-align:center;
|
|
|
108 |
}
|
|
|
109 |
#panneau-lateral {
|
|
|
110 |
width:300px;
|
|
|
111 |
height:100%;
|
|
|
112 |
padding:0;
|
|
|
113 |
display:none;
|
|
|
114 |
background-color:white;
|
|
|
115 |
border-right:1px solid grey;
|
|
|
116 |
box-shadow:2px 2px 6px #979797;-webkit-box-shadow:2px 2px 6px #979797;-moz-box-shadow:2px 2px 6px #979797;
|
|
|
117 |
}
|
|
|
118 |
#pl-entete {
|
|
|
119 |
text-align:right;
|
|
|
120 |
}
|
|
|
121 |
#pl-corps {
|
|
|
122 |
height:86%;
|
|
|
123 |
overflow:auto;
|
|
|
124 |
padding:5px;
|
|
|
125 |
}
|
|
|
126 |
#pl-ouverture, #pl-fermeture {
|
|
|
127 |
position:relative;
|
|
|
128 |
top:0;
|
|
|
129 |
width:95px;
|
|
|
130 |
background-color:#FFF;
|
|
|
131 |
text-align:center;
|
|
|
132 |
border:1px solid black;
|
|
|
133 |
cursor:pointer;
|
|
|
134 |
}
|
|
|
135 |
#pl-ouverture {
|
|
|
136 |
border-left:0;
|
|
|
137 |
}
|
|
|
138 |
#pl-fermeture {
|
|
|
139 |
border-right:0;
|
|
|
140 |
float:right;
|
|
|
141 |
}
|
| 424 |
jpm |
142 |
</style>
|
|
|
143 |
</head>
|
|
|
144 |
|
|
|
145 |
<body onload="initialize()">
|
| 435 |
jpm |
146 |
<div id="panneau-lateral">
|
|
|
147 |
<div id="pl-entete">
|
|
|
148 |
<div id="pl-ouverture">Panneau >></div>
|
|
|
149 |
<div id="pl-fermeture"><< Fermer [x]</div>
|
|
|
150 |
</div>
|
|
|
151 |
<div id="pl-corps"></div>
|
|
|
152 |
</div>
|
| 424 |
jpm |
153 |
<div id="carte"></div>
|
|
|
154 |
</body>
|
|
|
155 |
</html>
|