Oggi era una di quelle serate in cui pensi: "Cazzo, vorrei scrivere qualcosa sul mio blog ma non trovo niente!". Il buon Fabio mi viene in soccorso, e con una simpaticissima email mi chiede: "Come faccio ad usare un marker personalizzato su Google Maps?"
Gli ho promesso un post e a casa mia le promesse si mantengono. Anche se al momento non ho la più pallida idea di come fare.
Siccome i bravi programmatori devono essere pigri e stupidi, riciclo bellamente l'esempio relativo alla seconda parte del tutorial su Google Maps: in quell'esempio viene piazzato un marker dopo una ricerca indirizzo andata a buon fine.
Andremo ad utilizzare al posto del solito marker di Google Maps un'icona scelta dal sottoscritto.
L'icona prescelta è questa:
Non si accettano commenti riguardanti l'icona scelta. Il file che farà da icona deve essere in formato PNG, possibilmente con uno sfondo trasparente, in modo da essere visualizzato correttamente sulla mappa.
In teoria dovrebbe essere accoppiato ad un altro file PNG che ne disegni l'ombra, ma in questo momento non ci serve.
Questo è tutto il codice che ci serve, da incollare appena dopo la creazione della mappa:
// Crea l'icona personalizzata
icona = new GIcon();
icona.image = "marker.png";
icona.iconSize = new GSize(25, 34);
icona.iconAnchor = new GPoint(12, 34);
icona.infoWindowAnchor = new GPoint(21, 1);
// Dati relativi all'ombra, che in questo caso non usiamo.
//icona.shadow = "";
//icona.shadowSize = "";
Ecco fatto (Mi sento un pelo Muciaccia). Abbiamo creato un nuovo oggetto GIcon() che conterrà tutti i dati relativi all'icona. Gli attributi, nell'ordine in cui sono stati scritti contengono:
- L'indirizzo dell'immagine che farà da icona (anche su server diverso dal nostro)
- La dimensione in pixel
- Il punto dell'immagine che rappresenterà il punto esatto puntato dalla mappa
- Il punto dell'immagine da cui scaturirà il pop-up contenente le informazioni
Per maggiori dettagli fate riferimento alla documentazione della classe GIcon(). D'ora in poi ogni marker creato tramite la funzione:
new GMarker(point, icona);
avrà come immagine quella che abbiamo definito.
Come al solito ecco un bell'esempio. Sbirciare il codice per capire al meglio quanto scritto sopra.
Ringrazio 3 volte Fabio. Una volta perché legge il mio blog. Un'altra perché mi da l'occasione di imparare qualcosa. Un'altra ancora perché mi ha dato l'idea per questo post, dedicato a lui.
