6,7 → 6,7 |
<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="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script> |
<script type="text/javascript" src="<?=$url_base?>modules/carto/squelettes/markerclusterer_compiled.js"></script> |
|
<script src="<?=$url_json?>" type="text/javascript"></script> |
34,9 → 34,20 |
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 |
map: map, |
icon: markerImage, |
title: 'test' |
}); |
|
var contenu = latLng.toString(); |
var infowindow = new google.maps.InfoWindow({ |
content: contenu |
}); |
|
google.maps.event.addListener(marker, 'click', function() { |
infowindow.open(map, marker); |
}); |
|
markers.push(marker); |
} |
|
43,8 → 54,39 |
markerClusterer = new MarkerClusterer(map, markers); |
} |
|
function afficher() { |
document.getElementById('panneau-lateral').style.display = 'block'; |
document.getElementById('pl-corps').innerHTML = 'Afficher'; |
document.getElementById('pl-ouverture').style.display = 'none'; |
google.maps.event.trigger(map, 'resize'); |
}; |
function cacher() { |
document.getElementById('panneau-lateral').style.display = 'none'; |
document.getElementById('pl-corps').innerHTML = 'Cacher'; |
document.getElementById('pl-ouverture').style.display = 'block'; |
google.maps.event.trigger(map, 'resize'); |
}; |
|
function initialize() { |
map = new google.maps.Map(document.getElementById('carte'), carteOptions); |
|
// Create the DIV to hold the control and call the HomeControl() |
// constructor passing in this DIV. |
var panneauDiv = document.getElementById('panneau-lateral'); |
panneauDiv.index = 0; |
map.controls[google.maps.ControlPosition.TOP_LEFT].push(panneauDiv); |
|
var ouverturePanneauDiv = document.getElementById('pl-ouverture'); |
ouverturePanneauDiv.index = 0; |
map.controls[google.maps.ControlPosition.TOP_LEFT].push(ouverturePanneauDiv); |
|
var ouvertureDiv = document.getElementById('pl-ouverture'); |
google.maps.event.addDomListener(ouvertureDiv, 'click', afficher); |
|
var fermetureDiv = document.getElementById('pl-fermeture'); |
google.maps.event.addDomListener(fermetureDiv, 'click', cacher); |
|
cacher(); |
refreshMap(); |
} |
//]]> |
54,15 → 96,63 |
margin:0; |
padding:0; |
height: 100%; |
font-family: Arial; |
font-size: 12px;} |
font-family:Arial; |
font-size:12px; |
} |
#carte { |
width:100%; |
height:100%; |
} |
.bouton { |
background-color:white; |
border:2px solid black; |
cursoir:pointer; |
text-align:center; |
} |
#panneau-lateral { |
width:300px; |
height:100%; |
padding:0; |
display:none; |
background-color:white; |
border-right:1px solid grey; |
box-shadow:2px 2px 6px #979797;-webkit-box-shadow:2px 2px 6px #979797;-moz-box-shadow:2px 2px 6px #979797; |
} |
#pl-entete { |
text-align:right; |
} |
#pl-corps { |
height:86%; |
overflow:auto; |
padding:5px; |
} |
#pl-ouverture, #pl-fermeture { |
position:relative; |
top:0; |
width:95px; |
background-color:#FFF; |
text-align:center; |
border:1px solid black; |
cursor:pointer; |
} |
#pl-ouverture { |
border-left:0; |
} |
#pl-fermeture { |
border-right:0; |
float:right; |
} |
</style> |
</head> |
|
<body onload="initialize()"> |
<div id="panneau-lateral"> |
<div id="pl-entete"> |
<div id="pl-ouverture">Panneau >></div> |
<div id="pl-fermeture"><< Fermer [x]</div> |
</div> |
<div id="pl-corps"></div> |
</div> |
<div id="carte"></div> |
</body> |
</html> |