Proseguendo il cammino iniziato con le API di Googlemaps, volevo approfondire il discorso della personalizzazione delle icone.
Come già visto nei post Inserire icone personalizzate assegnandole ad un marker e Caricare dei marker su Google Maps tramite XML, è possibile personalizzare i marker ed in particolare le loro icone.
Sono 4 i parametri che potrete impostare in un’icona. Il modo piu semplice per farlo è definire una variabile (nel nostro caso iconaPersonale) con cui imposteremo i nostri parametri personali. Ecco le righe di codice con la spiegazione dei parametri:

	// Definisce la variabile iconaPersonale come un'icona di Googlemaps
	var iconaPersonale = new GIcon();
	//Imposta la dimensione dell'icona (32x32pixel)
	iconaPersonale.iconSize=new GSize(32,32);
	//Imposta la dimensione dell'ombra (56x32pixel)
	iconaPersonale.shadowSize=new GSize(56,32);
	//Imposta il punto di ancoragio dell'icona alle coordinate 16, 32 (dell'icona)
	iconaPersonale.iconAnchor=new GPoint(16,32);
	// Imposta il punto di ancoraggio della finestra dell'icona al punto 16,0
	iconaPersonale.infoWindowAnchor=new GPoint(16,0);

Ora abbiamo creato una nostra icona base (possiamo crearne quante vogliamo, semplicemente cambiando il nome alla variabile o utilizando un vettore) che potremo utilizzare a nostro piacimento.
Ecco come creare il nostro marker:

	// Creiamo una nuova icona personale (miaIcona) importando i parameri definiti nella nostra icona di base (iconaPersonale) e immettendo i link dell'immagine dell'icona e della sua ombra
	var miaIcona = new GIcon(iconaPersonale, "mettete l'indirizzo dell'immagine dell'icona", null, "mettete l'indirizzo dell'ombra dell’icona");
	// Creiamo il marker al punto "point" con l'icona "miaIcona"
	var marker = new GMarker(point,miaIcona);

Come visto in precedenza nel post Caricare dei marker su Google Maps tramite XML è possibile impostare i parametri di un marker tramite XML. Nel caso specifico ci eravamo limitati a definire la posizione e le informazioni nella finestra. Però, semplicemente aggiungendo la voce:

<icona sizeiconx="32" sizeicony="32" sizeshadowx="56" sizeshadowy="32" urlicon=”URL immagine icona" urlshadow="URL ombra icona" />

al nostro file XML ed andando a leggere questi parametri nella funzione javascript “leggiXML(nomeXML)” che è definita nella pagina HTML della mappa.
Le righe da aggiungere saranno:

//Da mettere prima della riga “//ciclo per ogni marker trovato”
//sia nella parte Mozilla che Explorer
var icona = xmlDoc.documentElement.getElementsByTagName("icona");

//Da mettere all’interno del for sia nella parte Mozilla che Explorer
var sizeiconx = icona[i].getAttribute("sizeiconx");
var sizeicony = icona[i].getAttribute("sizeicony");
var sizeshadowx = icona[i].getAttribute("sizeshadowx");
var sizeshadowy = icona[i].getAttribute("sizeshadowy");
var urlicon = icona[i].getAttribute("urlicon");
var urlshadow = icona[i].getAttribute("urlshadow ");

Così facendo avrete caricato 6 variabili con cui potrete definire le dimensioni dell’icona:

iconaPersonale.iconSize=new GSize(sizeiconx,sizeicony);

della sua ombra:

iconaPersonale.shadowSize=new GSize(sizeshadowx, sizeshadowy);

e le immagini dell’icona e della sua ombra:

var miaIcona = new GIcon(iconaPersonale, urlicon, null, urlshadow);

Ovviamente possono essere passati anche gli altri parametri dell’icona semplicemente aggiungendo nell’XML una variabile in più per ogni parametro.

Popularity: 20% [?]