Informaticando.NET un intorno web sull'informatica di Giorgio Borelli

Continuiamo a parlare di Google Maps, un'altra esigenza molto sentita dagli sviluappatori nella implementazione della mappa, è quella di gestire l'evento onmouseover quando si passa sopra ad un segnaposto (marker) presente  sulla mappa. L'effetto del cambio di colore o dell'icona del marker quando il mouse vi passa di sopra, amplifica e migliora la visibilità e la user experience nella navigazione della mappa di google.

Implementare tale funzionalità non è difficile, basta conoscere il funzionamento degli eventi nelle mappe di google ed un pò di Javascript, andiamo a scoprire come fare.

Per cambiare l'icona del marker in google maps al passaggio del mouse dobbiamo gestire l'evento onmouseover all'interno della mappa, supponiamo pertanto che il nostro marker sia assegnata un'icona red.png e che questa cambi in green.png al mouseover su di esso, la prima parte del codice è:

map = new google.maps.Map(document.getElementById("map"), mapOptions);

var marker = new google.maps.Marker( {
map: map,
icon: 'red.png',
flat: true }

google.maps.event.addListener(marker, 'mouseover', function () { changeIconOver(marker);});
google.maps.event.addListener(marker, 'mouseout', function () { changeIconOut(marker);});

Come potete notare dal codice, definiamo un marker specificando un'immagine red.png per esso, una volta creato aggiungiamo alla mappa due eventi, onmouseover e onmouseout, a detti eventi verranno invocate le funzioni Javascript: ChangeIconOver e ChangeIconOut, all'interno delle quali cambieremo l'icona del marker che abbiamo passato come parametro, il codice delle due funzioni risulta davvero semplice:

function changeIconOver(marker) {
    if (marker != null)
        marker.setIcon("green.png");
}
 
function changeIconOut(marker) {
    if (marker != null)
        marker.setIcon("red.png");
}

le due funzioni ricevono entrambe il marker come parametro, viene fatto un controllo per verificare se sia nullo o meno, dopodichè tramite la proprietà nativa setIcon dell'oggetto marker delle API di Google Maps assegniamo la nuova icona green.png e red.png rispettivamente per il onmouseover e onmouseout, di modo che quando il mouse passa sopra il segnaposto l'icona diventa verde per ritornare rossa (quella assegnata di partenza) quando esce fuori dal segnaposto.

Identico, o anche superiore risultato possiamo ottenerlo agendo tramite l'oggetto Image delle API di Google che possiamo assegnare direttamente alla creazione del marker e del quale possiamo gestire anche l'ombra (shape) ed altre caratteristiche, approfondendo l'uso dei marker e degli eventi in Google Maps possiamo personalizzare e volendo migliorare lo script come meglio crediamo, per chi fosse interessato il link ufficiale delle API è:

Google Maps Javascript API V3 Reference 

Chiunque voglia aggiungere qualcosa, chiedere chiarimenti, su "come cambiare l'icona del marker in google maps al mouseover e al mouseout" può farlo tramite i commenti, ogni contributo alla discussione sarà ben accetto.