Subversion Repositories eFlore/Applications.cel

Rev

Rev 427 | Rev 439 | Go to most recent revision | Show entire file | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

Rev 427 Rev 435
Line 4... Line 4...
4 
		<title>Google Maps API Example - Observations</title>
 4 
		<title>Google Maps API Example - Observations</title>
Line 5... Line 5...
5
5
6 
		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
 6 
		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
Line 7... Line 7...
7 
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 7 
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
8
8
Line 9... Line 9...
9 
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
 9 
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
10 
		<script type="text/javascript" src="<?=$url_base?>modules/carto/squelettes/markerclusterer_compiled.js"></script>
 10 
		<script type="text/javascript" src="<?=$url_base?>modules/carto/squelettes/markerclusterer_compiled.js"></script>
11
11
Line 32... Line 32...
32
32
33 
				for (var i = 0; i < obs.nombre; ++i) {
 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);
 34 
					var latLng = new google.maps.LatLng(obs.points[i].coord_x, obs.points[i].coord_y);
35 
					var marker = new google.maps.Marker({
 35 
					var marker = new google.maps.Marker({
36 
						position: latLng,
 36 
						position: latLng,
37 
						draggable: true,
 37 
						map: map,
- 
 
 38 
						icon: markerImage,
38 
						icon: markerImage
 39 
						title: 'test'
- 
 
 40 
					});
- 
 
 41 
 
- 
 
 42 
					var contenu = latLng.toString();
- 
 
 43 
					var infowindow = new google.maps.InfoWindow({
- 
 
 44 
						content: contenu
- 
 
 45 
					});
- 
 
 46 
 
- 
 
 47 
					google.maps.event.addListener(marker, 'click', function() {
- 
 
 48 
						infowindow.open(map, marker);
- 
 
 49 
					});
39 
					});
 50
40 
					markers.push(marker);
 51 
					markers.push(marker);
Line 41... Line 52...
41 
				}
 52 
				}
42 
 
 53 
 
Line -... Line 54...
- 
 
 54 
				markerClusterer = new MarkerClusterer(map, markers);
- 
 
 55 
			}
- 
 
 56 
 
- 
 
 57 
			function afficher() {
- 
 
 58 
				document.getElementById('panneau-lateral').style.display = 'block';
- 
 
 59 
				document.getElementById('pl-corps').innerHTML = 'Afficher';
- 
 
 60 
				document.getElementById('pl-ouverture').style.display = 'none';
- 
 
 61 
				google.maps.event.trigger(map, 'resize');
- 
 
 62 
			};
- 
 
 63 
			function cacher() {
- 
 
 64 
				document.getElementById('panneau-lateral').style.display = 'none';
- 
 
 65 
				document.getElementById('pl-corps').innerHTML = 'Cacher';
- 
 
 66 
				document.getElementById('pl-ouverture').style.display = 'block';
43 
				markerClusterer = new MarkerClusterer(map, markers);
 67 
				google.maps.event.trigger(map, 'resize');
44 
			}
 68 
			};
- 
 
 69
- 
 
 70 
			function initialize() {
- 
 
 71 
				map = new google.maps.Map(document.getElementById('carte'), carteOptions);
- 
 
 72
- 
 
 73 
				// Create the DIV to hold the control and call the HomeControl()
- 
 
 74 
				// constructor passing in this DIV.
- 
 
 75 
				var panneauDiv = document.getElementById('panneau-lateral');
- 
 
 76 
				panneauDiv.index = 0;
- 
 
 77 
				map.controls[google.maps.ControlPosition.TOP_LEFT].push(panneauDiv);
- 
 
 78 
 
- 
 
 79 
				var ouverturePanneauDiv = document.getElementById('pl-ouverture');
- 
 
 80 
				ouverturePanneauDiv.index = 0;
- 
 
 81 
				map.controls[google.maps.ControlPosition.TOP_LEFT].push(ouverturePanneauDiv);
- 
 
 82 
 
- 
 
 83 
				var ouvertureDiv = document.getElementById('pl-ouverture');
- 
 
 84 
				google.maps.event.addDomListener(ouvertureDiv, 'click', afficher);
- 
 
 85 
 
- 
 
 86 
				var fermetureDiv = document.getElementById('pl-fermeture');
45 
 
 87 
				google.maps.event.addDomListener(fermetureDiv, 'click', cacher);
46 
			function initialize() {
 88
47 
				map = new google.maps.Map(document.getElementById('carte'), carteOptions);
 89 
				cacher();
48 
				refreshMap();
 90 
				refreshMap();
49 
			}
 91 
			}
50 
		//]]>
 92 
		//]]>
51 
		</script>
 93 
		</script>
52 
		<style type="text/css">
 94 
		<style type="text/css">
53 
			html, body {
 95 
			html, body {
54 
				margin:0;
 96 
				margin:0;
55 
				padding:0;
 97 
				padding:0;
- 
 
 98 
				height: 100%;
56 
				height: 100%;
 99 
				font-family:Arial;
57 
				font-family: Arial;
 100 
				font-size:12px;
58 
				font-size: 12px;}
 101 
			}
- 
 
 102 
			#carte {
- 
 
 103 
				width:100%;
- 
 
 104 
				height:100%;
- 
 
 105 
			}
- 
 
 106 
			.bouton {
- 
 
 107 
				background-color:white;
- 
 
 108 
				border:2px solid black;
- 
 
 109 
				cursoir:pointer;
- 
 
 110 
				text-align:center;
- 
 
 111 
			}
- 
 
 112 
			#panneau-lateral {
- 
 
 113 
				width:300px;
- 
 
 114 
				height:100%;
- 
 
 115 
				padding:0;
- 
 
 116 
				display:none;
- 
 
 117 
				background-color:white;
- 
 
 118 
				border-right:1px solid grey;
- 
 
 119 
				box-shadow:2px 2px 6px #979797;-webkit-box-shadow:2px 2px 6px #979797;-moz-box-shadow:2px 2px 6px #979797;
- 
 
 120 
			}
- 
 
 121 
			#pl-entete {
- 
 
 122 
				text-align:right;
- 
 
 123 
			}
- 
 
 124 
			#pl-corps {
- 
 
 125 
				height:86%;
- 
 
 126 
				overflow:auto;
- 
 
 127 
				padding:5px;
- 
 
 128 
			}
- 
 
 129 
			#pl-ouverture, #pl-fermeture {
- 
 
 130 
				position:relative;
- 
 
 131 
				top:0;
- 
 
 132 
				width:95px;
- 
 
 133 
				background-color:#FFF;
- 
 
 134 
				text-align:center;
- 
 
 135 
				border:1px solid black;
- 
 
 136 
				cursor:pointer;
- 
 
 137 
			}
- 
 
 138 
			#pl-ouverture {
- 
 
 139 
				border-left:0;
- 
 
 140 
			}
- 
 
 141 
			#pl-fermeture {
59 
			#carte {
 142 
				border-right:0;
60 
				width:100%;
 143 
				float:right;
Line 61... Line 144...
61 
				height:100%;
 144 
			}
- 
 
 145 
		</style>
- 
 
 146 
	</head>
- 
 
 147 
 
- 
 
 148 
	<body onload="initialize()">
- 
 
 149 
		<div id="panneau-lateral">
- 
 
 150 
			<div id="pl-entete">
- 
 
 151 
				<div id="pl-ouverture">Panneau >></div>
62 
		</style>
 152 
				<div id="pl-fermeture"><< Fermer [x]</div>
63 
	</head>
 153 
			</div>
64 
 
 154 
			<div id="pl-corps"></div>
65 
	<body onload="initialize()">
 155 
		</div>