New file |
0,0 → 1,68 |
<!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> |
<title>Google Maps API Example - Observations</title> |
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> |
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> |
|
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> |
<script type="text/javascript" src="<?=$url_base?>services/squelettes/markerclusterer_compiled.js"></script> |
|
<script src="<?=$url_json?>" type="text/javascript"></script> |
<script type="text/javascript"> |
//<![CDATA[ |
var markerClusterer = null; |
var map = null; |
var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&chco=FFFFFF,008CFF,000000&ext=.png'; |
var carteCentre = new google.maps.LatLng(46.4, 3.10); |
var carteOptions = { |
zoom: 6, |
center: carteCentre, |
mapTypeId: google.maps.MapTypeId.ROADMAP |
}; |
|
function refreshMap() { |
if (markerClusterer) { |
markerClusterer.clearMarkers(); |
} |
|
var markers = []; |
var markerImage = new google.maps.MarkerImage(imageUrl, new google.maps.Size(24, 32)); |
|
for (var i = 0; i < obs.nombre; ++i) { |
var latLng = new google.maps.LatLng(obs.points[i].coord_x, obs.points[i].coord_y); |
var marker = new google.maps.Marker({ |
position: latLng, |
draggable: true, |
icon: markerImage |
}); |
markers.push(marker); |
} |
|
markerClusterer = new MarkerClusterer(map, markers); |
} |
|
function initialize() { |
map = new google.maps.Map(document.getElementById('carte'), carteOptions); |
refreshMap(); |
} |
//]]> |
</script> |
<style type="text/css"> |
html, body { |
margin:0; |
padding:0; |
height: 100%; |
font-family: Arial; |
font-size: 12px;} |
#carte { |
width:100%; |
height:100%; |
</style> |
</head> |
|
<body onload="initialize()"> |
<div id="carte"></div> |
</body> |
</html> |