Google Maps Api V3 - MarkerCluster con icone personalizzate

[stiffa]

In questo esempio si vede benissimo quello che vorrei ottenere :

esempio markerclusterer V3

Il fatto e' che nel link il colore dei gruppi di segnalini (blu - giallo - rosso) dipende dalla quantita' di segnalini che li contengono.

Quello rosso infatti e' sopra il 100 il giallo dal 10 al 100 e il blu sotto il 10...

Io vorrei usare i tre colori per indicare gruppi scelti da me.

Io non ho cosi tanti segnalini . I miei gruppi sono massimo da 7.

Pero ho vari gruppi... facciamo finta di voler mettere per ogni provincia di una regione 7 segnalini. Vorrei ottenere il segnalino tondo su ogni provincia con colori diversi.

Spero di esser stato chiaro.

E' sicuramente da modificare il file markercluster.js



http://google-maps-utility-library-v...erclusterer.js




ma come?

[Vindav]

la modifica del file js te la sconsiglio vivamente, è abbastanza complesso te lo assicuro...

L'unico "trucchetto" che mi è venuto in mente è quello di dividere la creazione dei cluster in + parti andando a spezzettare l'array che contiene i marker.

Per esempio se hai un array di marker di 21 elementi potresti dividere l'array in 3 parti.... cicli i primi 7 elementi e crei il cluster, poi passi ai sucessivi 7 e richiami nuovamente il costruttore del cluster e cosi via per l'ultimo. Una cosa è da precisare, non sei tu a decidere come vengono aggregati i marker, l'aggruppamento viene deciso tramite un algoritmo particolare, puoi solo mettere dei "paletti" andando a valorizzare alcune opzioni del costruttore MarkerClusterer. Quindi l'utlizzo di questo "trucco" può portare delle anomalie. Per esempio se alcuni marker del primo gruppo(da 1a7) sono vicini geograficamente a marker del secondo gruppo(da 8a14), magari a livelli di zoom bassi, vedresti due cluster uno sopra l'altro, anziche uno. Mai provata una cosa del genere quindi non sono sicuro nemmeno che funzioni, provare però non ti costa nulla.

[stiffa]

grazie mille. sei stato molto chiaro.
Ora faro' delle prove con l'array

Volevo chiedere un altro paio di cose. Sono abb alle prime armi con queste nuove librerie.

Sempre sul mio esempio speed test come posso cliccare una delle citta sull'elenco nella colonna a sinistra e ottenere uno zoom sulla mappa fino a un tot che voglio io?
E' pressapoco quello che si ottiene cliccando sul segnalino dell'array di marker blu . Solo che vorrei zoommare di piu .

Poi un ultima cosa...

Su mozilla , quando seleziono una citta dalla colonna a sinistra, la mappa non viene centrata con la citta che ho selezionato. Questo comporta che la mia infoWindow viene tagliata fuori dalla mappa. Posso ovviare a questo? su explorer l'info viene visualizzata correttamente.

Per essere precisi ...solo al primo click e' tagliata fuori. poi se vado avanti cliccando sulla mappa la info appare sempre dentro la mappa e mai tagliata... Da cosa puo dipendere?

[Vindav]

Sempre sul mio esempio speed test come posso cliccare una delle citta sull'elenco nella colonna a sinistra e ottenere uno zoom sulla mappa fino a un tot che voglio io?
E' pressapoco quello che si ottiene cliccando sul segnalino dell'array di marker blu . Solo che vorrei zoommare di piu .

Usa il metodo setZoom dell' oggetto Map

Su mozilla , quando seleziono una citta dalla colonna a sinistra, la mappa non viene centrata con la citta che ho selezionato. Questo comporta che la mia infoWindow viene tagliata fuori dalla mappa. Posso ovviare a questo? su explorer l'info viene visualizzata correttamente.

Ho provato su firefox ma non riscontro questo problema

[stiffa]

ok ci sono riuscito.

Pian piano sto capendo un po di piu sul google map v3

Ora mi sono imbattuto in un simpatico errore :

Posso applicare un infoWindow dopo aver effettuato uno zoom ?

Nel senso. Al momento la mia mappa funziona cosi :

Creo una mappa
ciclo
creo 3 marker
Creo il listener sui marker

Quando clicco :
Faccio uno zoom
Ripulisco la mappa dai marker
ciclo
Creo 5 marker nuovi .


Se io mettessi qu questi ultimi addListener visualizzo al click sempre lo stesso infowindow....

come posso fare? a che punto devo mettere il seguente codice se ho il ciclo di marker?

 speedTest.infoWindow = new google.maps.InfoWindow();
        speedTest.infoWindow.setContent(infoHtml);
        speedTest.infoWindow.setPosition(myLatlng);
      // Open the infowindow on marker click
      google.maps.event.addListener(marker2, "click", function() {
       speedTest.infoWindow.open(speedTest.map, marker2);
      }); 

visualizzo sempre e solo 1 info.

[Vindav]

Posso applicare un infoWindow dopo aver effettuato uno zoom ?

certo che puoi.

come posso fare? a che punto devo mettere il seguente codice se ho il ciclo di marker?

dentro il ciclo che crea i 5 marker

google.maps.event.addListener(marker iesimo, "click", function() {
speedTest.infoWindow.open(speedTest.map, this);
});

Se non ricordo male è inutile settare la posizione dell'infoWindow, se non specificata si aprirà a fianco del marker cliccato. Nel tuo caso è anche inutile usare il metodo setContent separatamente... puoi farlo direttamente nel costruttore:

speedTest.infoWindow = new google.maps.InfoWindow({
content: infoHtml
});

[stiffa]

ho fatto come dici ma il contenuto dell'info window e' sempre lo stesso.... cioe' l'ultimo record del mio file json con l'elenco...

Leggevo delle interessanti letture che usavano il "this"
ecco la lettura : leggi

usando il this ho risolto molti problemi (tipo anche con i marker mi visualizzava sempre l'ultimo)...

Ora pero' sono inscastrato....

Il contenuto della infowindow e' semrpe quello....l'ultimo della mia lista
ecco il mio codice....

speedTest.showsubMarkers = function(father) {
  speedTest.markers = [];
 var numMarkers = speedTest.stations.length;
  for (var i = 0; i < numMarkers; i++) {
      if(speedTest.stations[i].parent_id==father.photo_id){
           var myLatlng = new google.maps.LatLng(speedTest.stations[i].latitude, speedTest.stations[i].longitude);
         speedTest.map.setCenter(speedTest.map.setCenter(myLatlng));
            var imageUrl = '/ecospazio/jquery-map/image/'+speedTest.stations[i].icona+'.png'; 
        var marker2 = new google.maps.Marker({
            position: myLatlng,
            map: speedTest.map,
            icon: imageUrl,
            flat: true
        });
        
        var imageUrl = '/ecospazio/jquery-map/image/'+speedTest.stations[i].icona+'.png';
      var markerImage = new google.maps.MarkerImage(imageUrl,new google.maps.Size(24, 32));  
         speedTest.markers.push(marker2);    
         
         
          var title = speedTest.stations[i].photo_title;
         
    var url = speedTest.stations[i].photo_url;
    var fileurl = speedTest.stations[i].photo_file_url;
    var logo = speedTest.stations[i].logo_url;

    var infoHtml = '<div class="info"><div style="float:left;width:100%;">[img]'+logo+'[/img]<h3>' + title +
      '</h3></div><div style="float:left;width:400px;">[url="' + url + '" target="_blank"><img src="][/url]sdasasdasdsad</div>' +
      '</div>';
         
        
        google.maps.event.addListener(marker2, 'click', function() {
 
   /* close the previous info-window */
  speedTest.closeInfos();

   /* the marker's content gets attached to the info-window: */
   speedTest.infoWindow = new google.maps.InfoWindow({content: infoHtml});
     //speedTest.infoWindow.setContent(infoHtml);
        speedTest.infoWindow.setPosition(myLatlng);
   /* trigger the infobox's open function */
   speedTest.infoWindow.open(speedTest.map,this);
 
   /* keep the handle, in order to close it on next click event */
   speedTest.infos[0]=speedTest.infoWindow;
 
});
            
     }     
  }

} 

ho provato a mettere il this

 speedTest.infoWindow = new google.maps.InfoWindow({content: this.infoHtml}); 

ma nulla

ancora grazie dell'aiuto

[Vindav]

var infoHtml = '<div class="info"><div style="float:left;width:100%;">[img]'+logo+'[/img]<h3>' + title +
       '</h3></div><div style="float:left;width:400px;">[url="' + url + '" target="_blank"><img src="][/url]sdasasdasdsad</div>' + 
      '</div>'; 
          
         marker2.infoWindow = new google.maps.InfoWindow({content: infoHtml});

        google.maps.event.addListener(marker2, 'click', function() { 
  
   /* close the previous info-window */ 
  speedTest.closeInfos(); 

   /* the marker's content gets attached to the info-window: */ 
    
     //speedTest.infoWindow.setContent(infoHtml); 
        this.infoWindow.setPosition(myLatlng); 
   /* trigger the infobox's open function */ 
   this.infoWindow.open(speedTest.map,this); 
  
   /* keep the handle, in order to close it on next click 

[stiffa]

funziona

[stiffa]

in realta ci siamo quasi

la riga
speedTest.infos[0]=speedTest.infoWindow;

non funzionava cosi


speedTest.infos[0] is null

allora ho messo speedTest.infos[0]=marker2.infoWindow;

e apre le finestre con i vari contenuti ad ogni click su ogni segnalino ma non si chiudono


nella lettura che ho postato prima ho trovato un post che scrive a riguardo :

infos[0].set(“marker”,null); just detaches the last opened info-window from it’s marker,
That’s necessary before removing the reference to the last opened info-window
(once the handle is gone, it just can’t be accessed so easy anymore).



scusate

posto anche il codice per chiudere la finestra...forse e' il prob...

speedTest.closeInfos = function(){
 
   if(speedTest.infos.length > 0){
 
      /* detach the info-window from the marker */
      speedTest.infos[0].set("marker2",null);
 
      /* and close it */
      speedTest.infos[0].close();
 
      /* blank the array */
     speedTest.infos.length = 0;
   }
}