Solito problema con le infoWindow e ciclo for!

[Rodrigoson6]

Ci risiamo....

solito problema:

voglio far apparire l'infoWindow di ogni marker, ma qualsiasi marker io clicco mi si apre l'infowindow dell'ultimo vettore dell'array.

vi faccio vedere il codice:

 var mydati= [
   [150,50],
   [90,23],
   [45,-10],
   [100,33]
  ];
  
  function circleinfo(){
   for (var s = 0; s < mydati.length; s++) {
    var sism= mydati[s];   
    var longi= sism[0];
    var lati= sism[1];
    var centrocircle= new google.maps.LatLng(lati,longi);
    var circleOptions = new google.maps.Circle({
     strokeColor: '#ff0000',
     strokeOpacity: 1,
     strokeWeight: 2,
     fillColor: '#ff0000',
     fillOpacity: 0.85,
     map: map,
     center: centrocircle,
     info: 'casa',
     radius: 10000
    });    
    var infoWindow = new google.maps.InfoWindow({
     content: 'casa'
    });    
    google.maps.event.addListener(circleOptions, 'click', function() {
     infoWindow.setPosition(centrocircle);
     infoWindow.setContent('casa'); 
     infoWindow.open(map, this);
    });  
   }
  }

ho provato anche a dichiarare globalmente la variabile infoWindow ma niente....
Se non ho capito male, il problema è l'evento addListener ma non ho capito il perché

[Rodrigoson6]

ho risolto ma stato il solito colpo di fortuna... mi spiego:

ho risolto cosi

google.maps.event.addListener(circleOptions, 'click', function() {
     infoWindow.setPosition(this.center);
     infoWindow.setContent(this.info); 
     infoWindow.open(map,this);
    })

ma perché mettendo :

google.maps.event.addListener(circleOptions, 'click', function() {
     infoWindow.setPosition(centrocircle); 
     infoWindow.setContent(this.info); 
     infoWindow.open(map,this);
    })

non funziona, però se dichiaro la variabile circleOptions in questo modo:

var centrocircle= new google.maps.LatLng(X,Z);
    var circleOptions = new google.maps.Circle({
     strokeColor: colore,
     strokeOpacity: 1,
     strokeWeight: 2,
     fillColor: colore,
     fillOpacity: 0.85,
     map: map,
     position:centrocircle,
     center: centrocircle,
     info: 'casa',
     radius: raggio*770
    });

quindi dichiarando position.. se metto:

google.maps.event.addListener(circleOptions, 'click', function() {
     infoWindow.setPosition(centrocircle);
     infoWindow.setContent(this.info); 
     infoWindow.open(map,this);
    })

funziona ??


Mha...
spero possiate farmi capire

[Vindav]

le istruzioni che stanno all'interno della funzione click non vengono eseguite durante il ciclo ma al click di un marker appunto, quindi quando quelle istruzioni vengono eseguite il ciclo è già terminato e la variabile centrocircle è valorizzata con l'ultimo elemento dell'array. E' inutile impostare la posizione dell'infowindow(a meno che non si voglia mostrarla in altra posizione rispetto al marker), perche verrà posizionata in automatico vicino al marker, in altre parole questa istruzione

infoWindow.setPosition(centrocircle);

è inutile.

[Rodrigoson6]

le istruzioni che stanno all'interno della funzione click non vengono eseguite durante il ciclo ma al click di un marker appunto, quindi quando quelle istruzioni vengono eseguite il ciclo è già terminato e la variabile centrocircle è valorizzata con l'ultimo elemento dell'array.

e allora come si fa ad aprire la infoWindow corretta se la variabile centrocircle è valorizzata con l'ultimo elemento dell'array???

E' inutile impostare la posizione dell'infowindow(a meno che non si voglia mostrarla in altra posizione rispetto al marker), perche verrà posizionata in automatico vicino al marker, in altre parole questa istruzione

infoWindow.setPosition(centrocircle);

è inutile.

nel mio caso si, a me sono Cerchi non markers





Vindav conosci un metodo per customizzare le Infowindow aggiungendo ad esempio border-radius e background-color, senza ricorrere a librerie esterne?

io avevo provato in questo modo ma niente:

 var infoWindow;  //like global variable
       
       var centrocircle= new google.maps.LatLng(X,Z);
    var circleOptions = new google.maps.Circle({
     strokeColor: colore,
     strokeOpacity: 1,
     strokeWeight: 2,
     fillColor: colore,
     fillOpacity: 0.85,
     map: map,     
     center: centrocircle,
     info: '<p id="hook">home</p>',
     radius: raggio*770
    });
     google.maps.event.addListener(circleOptions, 'domready', function() {
      var l = $('#hook').parent().parent().parent().siblings();
       for (var i = 0; i < l.length; i++) {
        if($(l[i]).css('z-index') == 'auto') {
         $(l[i]).css('border-radius', '16px 16px 16px 16px');
         $(l[i]).css('border', '2px solid red');
        }
       }  
                        });
                google.maps.event.addListener(circleOptions, 'click', function() {     
     infoWindow.setPosition(this.center);
     infoWindow.setContent(this.info); 
     infoWindow.open(map,this);
    })

[Rodrigoson6]

Ottima guida per customizzarle

http://en.marnoto.com/2014/09/5-form...nfowindow.html

[Vindav]

e allora come si fa ad aprire la infoWindow corretta se la variabile centrocircle è valorizzata con l'ultimo elemento dell'array???

Associando i dati al marker(o circle poco cambia) come hai fatto qui:

var circleOptions = new google.maps.Circle({
strokeColor: '#ff0000',
strokeOpacity: 1,
strokeWeight: 2,
fillColor: '#ff0000',
fillOpacity: 0.85,
map: map,
center: centrocircle,
info: 'casa',
radius: 10000
});

inoltre la infoWindow è solo una e viene mostrata di volta in volta in posizione diversa e con diverso contenuto

[Rodrigoson6]

ah ecco va bene grazie