| 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 |
|
|
|
9 |
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
|
|
|
10 |
<script type="text/javascript" src="<?=$url_base?>services/squelettes/markerclusterer_compiled.js"></script>
|
|
|
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;
|
|
|
17 |
var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&chco=FFFFFF,008CFF,000000&ext=.png';
|
|
|
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 |
|
|
|
30 |
var markers = [];
|
|
|
31 |
var markerImage = new google.maps.MarkerImage(imageUrl, new google.maps.Size(24, 32));
|
|
|
32 |
|
|
|
33 |
for (var i = 0; i < obs.nombre; ++i) {
|
|
|
34 |
var latLng = new google.maps.LatLng(obs.points[i].coord_x, obs.points[i].coord_y);
|
|
|
35 |
var marker = new google.maps.Marker({
|
|
|
36 |
position: latLng,
|
|
|
37 |
draggable: true,
|
|
|
38 |
icon: markerImage
|
|
|
39 |
});
|
|
|
40 |
markers.push(marker);
|
|
|
41 |
}
|
|
|
42 |
|
|
|
43 |
markerClusterer = new MarkerClusterer(map, markers);
|
|
|
44 |
}
|
|
|
45 |
|
|
|
46 |
function initialize() {
|
|
|
47 |
map = new google.maps.Map(document.getElementById('carte'), carteOptions);
|
|
|
48 |
refreshMap();
|
|
|
49 |
}
|
|
|
50 |
//]]>
|
|
|
51 |
</script>
|
|
|
52 |
<style type="text/css">
|
|
|
53 |
html, body {
|
|
|
54 |
margin:0;
|
|
|
55 |
padding:0;
|
|
|
56 |
height: 100%;
|
|
|
57 |
font-family: Arial;
|
|
|
58 |
font-size: 12px;}
|
|
|
59 |
#carte {
|
|
|
60 |
width:100%;
|
|
|
61 |
height:100%;
|
|
|
62 |
</style>
|
|
|
63 |
</head>
|
|
|
64 |
|
|
|
65 |
<body onload="initialize()">
|
|
|
66 |
<div id="carte"></div>
|
|
|
67 |
</body>
|
|
|
68 |
</html>
|