Afficher/Masquer marker

**anfalsh** · 14/12/2012, 11h46

Bonjour,

Je suis actuellement en train de réaliser une migration de google map v2 vers la v3 sur un ancien projet. La carte, lorsqu'elle est chargée au maximum contient environ 600 Points avec icones personnalisés (images png).

Mon problème survient au moment ou je veux cacher/retirer certains ou tous mes markers de la carte. Sur la v2 on pouvait facilement vider la carte avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
map.clearOverlays();

or sur la v3 il faut sortir les marqueurs un par un avec le code suivant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
for (var i=0; i < allMarker.length; i++) {
   allMarker[i].setMap(null);
   // ou
   allMarker[i].setVisible(false);
};

Ce code là entraine systématiquement le plantage de ma page, qui ne répond plus. Cela fait même planter l'explorateur...

Quelqu'un aurait-il une idée sur la manière de procéder pour vider d'un coup un grand nombre de marker sans provoquer de plantage ou de ralentissements? où sur le source de cette erreur?

Merci d'avance.

**NoSmoking** · 16/12/2012, 11h55

Bonjour,
il eut été intéressant que tu nous montres comment tu initialises et mets à jour ton allMarker, aucune raison que cela ne fonctionne pas.

Un exemple complet :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**anfalsh** · 17/12/2012, 09h04

Bonjour,

J'ai finalement trouvé une solution. Je suis tombé sur un même type d'erreur dans un forum internet, qui mentionnait des lenteurs dans les chargement de la carte lors de la migration de la v2 vers la v3.

Or en changeant de version de la carte on obtient un changement vraiment remarquable.

Donc au lieu de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=weather&sensor=false"></script>

j'utilise maintenant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=weather&sensor=false&v=3.4"></script>

J'ai testé entre les différentes version 3.3, 3.4, 3.5. Jusqu'à trouver celle qui était la plus rapide.

@NoSmoking

Pour information, et éventuellement quelques conseils qui me permettrait d'améliorer mon code voila comment j'initialise mon allMarker

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
allMarker = []; // appelé dans la fonction d'initialisation de la carte
 
 [...]
 
// appelé pour chaque lieu à placer récupéré dans ma base de donnée
function setMarker() {
  var icon = {
	anchor: new google.maps.Point(0, 0),
	url: "/pic/map_icons/"+icon_selected+".png",
	size: google.maps.Size(22,22)
   };
   var mo = {
	"map": map,
	"position": latlng,
	"title": m_infos["name"],
	"labelContent": m_infos[index],
	"labelAnchor": new google.maps.Point(0,-4),
	"labelClass": "map_label" ,
	"optimized": false,
	"icon": icon
    };
   var mk = new MarkerWithLabel(mo);
   allMarker.push(mk);
}

~~On peut maintenant classer la discussion en "RESOLU" mais je ne trouve pas le bouton~~

**NoSmoking** · 17/12/2012, 19h08

Or en changeant de version de la carte on obtient un changement vraiment remarquable.

c'est effectivement un constat que l'on a fait sur ce forum dans je ne sais plus quelle discussion.

Certains facteurs influent de façon non négligeable sur le temps d'affichage, par exemple l'option sur les makers 'draggable': true, ou encore 'optimized': false,. Si tu n'as pas besoin de ces options vires les ou mets les explicitement à false et true.

Les temps dans les routines de créations même si ils sont plus longs quand non optimisés ne représentent presque rien par rapport à la durée d'affichage, ce n'est pas forcément pour cela qu'il faut les négliger.

Dans ta fonction setMarker() tu pourrais éviter de recréer à chaque fois l’icône personnalisé, en créant toutes tes icônes avant et ne faisant qu'une affectation dans la fonction.

Tu peux également factoriser la création de tes points

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var ptIconAnchor =  new google.maps.Point(0, 0);
var sizeIcone = new google.maps.Size(22,22);
var ptLabelAnchor = new google.maps.Point(0,-4);

mais je le répètes cela sera peu par rapport aux options gourmandes.

Afficher/Masquer marker [Google Maps]

APIs Google

Discussions similaires

Partager

Partager