1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196
| <!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>[Google Maps API V3] Show Hide Marker</title>
<meta name="Author" content="NoSmoking">
<style type="text/css">
html, body {
height:100%;
margin:0;
padding:0;
font-family:Verdana;
font-size:1em;
background-color:#F8F8F8;
}
h1{
font-size:1.5em;
margin:0;
padding:0.5em;
}
h1 img{
vertical-align:middle;
}
#page {
position:relative;
width:50em;
min-height:100%;
margin:0 auto;
padding:0;
border-left:1px solid #B0B0FF;
border-right:1px solid #B0B0FF;
background-color:#FFF;
overflow:hidden;
}
#header{
font-size:0.9em;
margin:0px;
background-color:#E1E4F2;
border-bottom:1px solid #B0B0FF;
}
#header h1{
color:#006699;
font-style:normal;
padding-top:0.5em;
text-shadow:1px 1px 0px #FFF;
}
#header span {
float:right;
font-size:0.6em;
font-style:italic;
}
#content{
overflow:hidden;
padding:10px;
padding-bottom:2.5em; /* hauteur pied de page */
}
#footer{
position:absolute;
bottom:0;
left:0;
width:100%;
padding:0.5em;
background-color:#F5F5F5;
border-top:1px solid #B0B0FF;
overflow:hidden;
}
#footer p{
margin:0;
padding:0;
font-size:0.7em;
line-height:1em;
}
#footer a{
color:#00F;
text-decoration:none;
}
#cadre_carte {
margin:0 auto;
padding:5px;
height:600px;
width:600px; /* largeur effective 610px */
border:1px solid #888;
overflow:hidden;
}
#div_carte {
height:600px;
width:600px;
margin:auto;
}
#cde{
position:relative;
margin:5px auto;
padding:5px;
width:600px;
background-color:#F5F5F5;
border:1px solid #888;
z-index:1000;
}
button {
font:0.8em Verdana;
padding:1px;
margin:0 5px 0 0;
width:10em;
background-color:#FFF;
border:1px solid #808080;
cursor:pointer;
}
button:hover{
background-color:#DDD;
/* font-weight:bold;*/
}
button span{
position:absolute;
display:none;
font-weight:normal;
text-shadow:1px 1px 1px #FFFFFF;
color:#00F;
white-space:nowrap;
top:2px;
right:2px;
margin:0;
padding:5px;
z-index:1000;
width:25em;
}
button:hover span{
display:inline-block;
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initCarte(){
// init
var i, posLat = 43.5, posLng = 0.6, nb = 600;
var allMarkers = [], oMap, oMarker;
// creation de la carte
oMap = new google.maps.Map(document.getElementById('div_carte'),{
'backgroundColor': '#fff',
'mapTypeControl': false,
'streetViewControl': false,
'zoomControlOptions': {
style: google.maps.ZoomControlStyle.SMALL
},
'zoom': 6,
'center': new google.maps.LatLng( 46.80, 1.75),
'mapTypeId': google.maps.MapTypeId.ROADMAP
});
// creation des marqueurs
for( i=0; i <nb; i++){
oMarker = new google.maps.Marker({
'position' : new google.maps.LatLng( posLat, posLng),
'map' : oMap
});
// décalage
posLat += 0.01;
posLng += 0.01;
// stockage du marker
allMarkers.push( oMarker);
}
// affectation des actions au boutons
document.getElementById('btn_hide').onclick = function(){
for( i=0; i< allMarkers.length; i++){
allMarkers[i].setMap(null);
}
};
document.getElementById('btn_show').onclick = function(){
for( i=0; i< allMarkers.length; i++){
allMarkers[i].setMap( oMap);
}
};
}
// init lorsque la page est chargee
google.maps.event.addDomListener(window, 'load', initCarte);
</script>
</head>
<body>
<div id="page">
<div id="header">
<h1><span>[Google Maps API V3]</span>Show Hide Markers</h1>
</div>
<div id="content">
<div id="cde">
<button id="btn_hide">Hide All<span>Masque tous les Markers</span></button>
<button id="btn_show">Show All<span>Affiche tous les Markers</span></button>
</div>
<div id="cadre_carte">
<div id="div_carte"></div>
</div>
</div>
<div id="footer">
<p>Auteur : <a href="http://www.developpez.net/forums/u405341/nosmoking/" target="DVP">NoSmoking</a> pour <a href="http://web.developpez.com/" target="DVP">developpez.com</a></p>
</div>
</div>
</body>
</html> |
Partager