API avec plusieurs points

Version imprimable

Bonjour voici mon code

Code:

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
 
   var dataECOLE = new Array();
                dataECOLE[0] = new Array('Clermont-Ferrand', 'Pierre Henri',45.777101824345486,3.0833816528320312, 'Down', 'voiture', '<p>Retour</p>');
                dataECOLE[1] = new Array('Toulouse', 'Vincent dupont',43.603018819924465, 1.4374923706054688, 'Up', 'Aller', '<p>Stage 1A</p>');
 
 
 
  map = new google.maps.Map(mapDiv, myOptions);
 
  var homeControlDiv = document.createElement('DIV');
  var homeControl = new HomeControl(homeControlDiv, map);
map.controls[google.maps.ControlPosition.TOP_CENTER].push(homeControlDiv);
  var contenue;
                var point;
                var optionsMarker;
                var marker;
 
                for (var i = 0; i < dataECOLE.length; i++) {
                    point = new google.maps.LatLng(dataECOLE[i][2], dataECOLE[i][3]);
                    optionsMarker = {
                        position: point,
                        map: map,
                        title: dataECOLE[i][1]
                    }
                    marker = new google.maps.Marker(optionsMarker);

31/03/2011, 15h35
NoSmoking

Bonjour,
problème de closure déjà rencontré et traité sur le forum.

Question :
Une seule InfoWindow pour tous les markers ou une InfoWindow par marker?
31/03/2011, 16h54
morphine63

merci déjà de votre réponse.
C'est en effet une infobulle par marker

dans ce cas, et dans l'autre d'ailleurs, il existe plusieurs solutions dont celle d'ajouter une propriété au marker dans laquelle on stocke la référence à l'InfoWindow

Code:

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
 
  var i, nb = dataECOLE.length;
  for( var i = 0; i < nb; i++) {
    point = new google.maps.LatLng(dataECOLE[i][2], dataECOLE[i][3]);
    optionsMarker = {
      position: point,
      map: map,
      title: dataECOLE[i][1]
    };
    marker = new google.maps.Marker(optionsMarker);
    var contentString =
      '<div id="conteneurInfoBulle">' +
      '<h1>' + dataECOLE[i][1] + '</h1>' +
      '<h2>Entreprise : ' + dataECOLE[i][4] + '</h2>' +
      '<div id="texteInfoBulle">' +
      '<div id="lettrineImage"><img src="' + dataECOLE[i][5] + '" title="Logo Entreprise" />' +
      '</div>' + dataECOLE[i][6] +
      '</div>' +
      '</div> ';
 
    // creation avant utilisation
    var infowindow = new google.maps.InfoWindow({
      content: contentString
    });    
    // Stockage infowindow pour open sur click
    marker._infowindow = infowindow;
    // ajout l'action sur onclick    
    google.maps.event.addListener(marker, 'click', function (){
      // ! IMPORTANT on utilise this et non pas marker
      this._infowindow.open( map, this);
    });    
  }

il te restera à gérer l'empilage quand plusieurs seront proche et le reste...

31/03/2011, 19h25
morphine63

Merci bcp !