Gestire l'aggiunta di più segnaposto (marker) nella stessa Google Maps non è cosa difficile, le API V3 delle mappe di google mettono a disposizione una serie di oggetti veramente completi ed efficaci, per aggiungere pertanto più marker sulla mappa basterà sfruttare funzioni ed eventi delle API, mentre per la loro gestione, (ad es. cambio icona, titolo, posizione, etc. etc.), necessita di un piccolo workaround da parte nostra che prevede l'uso, ahimè!, di un array globale in Javascript contenitore dei nostri marker, la soluzione risulta comunque efficace, andiamo a scoprire come fare.
Supponiamo di avere n ristoranti, e per ognuno di esso desideriamo porre un segnaposto sulla nostra mappa indicante la sua posizione, quindi avremo un ciclo che scorre la lista o l'array dei ristoranti, ed all'interno di esso, creiamo un marker per ogni iterazione e lo assegniamo allo stesso tempo sia alla mappa che ad un array globale da noi creato (ci servirà dopo), vediamo il codice:
map = new google.maps.Map(document.getElementById("map"), mapOptions);
var markers = new array(); //array globale di markers
...
for(i=0; i < restaurants.length; i++){
var marker = new google.maps.Marker({position: restaurants[i].latlng, map: map, icon: 'red.gif', flat: true});
markers[i] = marker; //aggiungo ogni nuovo marker all'array globale
google.maps.event.addListener(marker, 'mouseover', function () { changeIconOver(i);});
google.maps.event.addListener(marker, 'mouseout', function () { changeIconOut(i);});
}
Come potete notare dal codice, definiamo un array "markers" a livello globale che conterra tutti i marker creati nel ciclo, per semplicità di codice ho supposto anche che l'array degli ipotetici ristoranti contengano i valori di latitudine e longitudine necessari per creare il marker, ovviamente potete adattare facilmente il codice alle vostre esigenze. Infine assegno alla mappa due eventi associati ai marker, uno per il mouseover ed uno per il mouseout. Al verificarsi di questi eventi (cioè quando il mouse passa o si sposta da sopra un marker sulla mappa) verranno invocate le funzioni ChangeIconOver e ChangeIconOut per cambiare ad es. l'icona del marker.
Il problema rispetto all'articolo precedente: Cambiare l'icona di un marker in Google Maps è che qui abbiamo un numero indefinito di marcatori (segnaposto), come facciamo a capire quale di questi passare come parametro, ci viene così in aiuto l'array globale che contiene tutti i marker, e del quale teniamo l'indice tramite il contatore "i" (volendo i marker si potevano assegnare anche in modo associativo all'array), il codice delle due funzioni risulta pertanto:
function changeIconOver(index) {
if (markers[index] != null) {
markers[index].setIcon("/g/green.gif"); }
}
function changeIconOut(index) {
if (markers[index] != null) {
markers[index].setIcon("/g/red.gif"); }
}
le due funzioni ricevono entrambe l'indice come parametro, e facciamo riferimento al marker corretto accedendo all'elemento presente all'indice "index" dell'array markers, come sempre viene fatto un controllo per verificare se sia nullo o meno, dopodichè tramite la proprietà setIcon assegniamo le nuove icone green.png e red.png rispettivamente per il onmouseover e onmouseout, ma avremmo potuto effettuare qualsiasi altra operazione o definire funzioni per altri eventi. Una volta creato l'array globale ed assegnati gli elementi marker possiamo fare ciò che vogliamo poichè abbiamo un controllo completo su tutti i segnaposto creati sulla mappa.
Unica pecca di questa tecnica, è che stiamo usando un array Javascript globale, che non è proprio il massimo dal punto di vista di eleganza e pulizia del codice, chiunque voglia suggerire una soluzione diversa o più brillante di questa sarà il benvenuto. Per chi invece volesse approfondire l'uso delle classi di Google Maps il link ufficiale delle API alla versione 3 è:
Google Maps Javascript API V3 Reference
Chiunque voglia aggiungere qualcosa, chiedere chiarimenti, su "come aggiungere e gestire più marker su una google maps" può farlo tramite i commenti, ogni contributo alla discussione sarà ben accetto.