bottone a tendina in google maps

[fuxio82]

Salve a tutti, sto programmando con le api di google una mappa che mi permetta di visualizzare dei dati pescati da un database.

finora tutto bene: inizializzo la cartina, visualizzo i marker etc.

ora sto creando la legenda per dare un significato a ogni marker colorato e qui arrivano le rogne: vorrei creare un bottone che, premendolo, mi faccia visualizzare la legenda.

il codice che ho dovuto inserire per la creazione della legenda è:

var legenda = document.createElement("CLASS");
legenda.style.width='300px';
legenda.style.height='165px';
//legenda.style.padding = '50px';
legenda.style.fontSize = '13px';
legenda.style.backgroundColor = 'white';
legenda.style.borderStyle = 'solid';
legenda.style.borderWidth = '2px';
legenda.style.borderColor='grey';


var rigaVerde = document.createElement("DIV");
var simboloVerde = document.createElement("IMG");
simboloVerde.setAttribute("src","http://www.google.com/mapfiles/marker_green.png");
var descrizioneVerde = document.createElement("TEXT");
descrizioneVerde.innerHTML = 'verde';

rigaVerde.appendChild(simboloVerde);
rigaVerde.appendChild(descrizioneVerde);
legenda.appendChild(rigaVerde);

var rigaBianca = document.createElement("DIV");
var simboloBianco = document.createElement("IMG");
simboloBianco.setAttribute("src","http://www.google.com/mapfiles/marker_white.png");
var descrizioneBianco = document.createElement("TEXT");
descrizioneBianco.innerHTML = 'bianco';

rigaBianca.appendChild(simboloBianco);
rigaBianca.appendChild(descrizioneBianco);
legenda.appendChild(rigaBianca);

var rigaGialla = document.createElement("DIV");
var simboloGiallo = document.createElement("IMG");
simboloGiallo.setAttribute("src","http://www.google.com/mapfiles/marker_yellow.png");
var descrizioneGiallo = document.createElement("TEXT");
descrizioneGiallo.innerHTML = 'giallo';

rigaGialla.appendChild(simboloGiallo);
rigaGialla.appendChild(descrizioneGiallo);
legenda.appendChild(rigaGialla);

var rigaRossa = document.createElement("DIV");
var simboloRosso = document.createElement("IMG");
simboloRosso.setAttribute("src","http://www.google.com/mapfiles/marker.png");
var descrizioneRosso = document.createElement("TEXT");
descrizioneRosso.innerHTML = 'rosso';

rigaRossa.appendChild(simboloRosso);
rigaRossa.appendChild(descrizioneRosso);
legenda.appendChild(rigaRossa);

legenda.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(legenda);

ho letto un po' in giro e gli amicici di google dicono che son tutti problemi di html e niente più.
me la date una manina???

[furbostandby]

Trattandosi di codice javascript, ti basta inserirlo in una funzione che verrà poi chiamata dall'evento onClick del bottone creato.
Ciao

[fuxio82]

un esempietto, por favor???

[fuxio82]

Originariamente inviato da furbostandby
Trattandosi di codice javascript, ti basta inserirlo in una funzione che verrà poi chiamata dall'evento onClick del bottone creato.
Ciao

essendo dei DOM, l'evento è 'click", ma ogni volta che clicco, mi aggiunge la legenda! come faccio per dirgli "guarda che quando clicco la prima volta, devi metter la legenda, la seconda volta devi deselezionarla"?????