[ajax]Legenda x Mappa

**fuxio82** · 22-07-2010, 12:51

salve a tutti, stavo cercando di creare una legenda da inserire dentro la mia mappa fatta con google maps, ma ho un po' le idee confuse.

mi sapreste dare qualche dritta???

**fuxio82** · 23-07-2010, 11:45

pensavo di costruire un panel con dentro dei contenuti prestabiliti (simbolino a sx e a destra la descrizione). ma non so dove metter mano...

ora dovrebbe essere più potabile la spiegazione, spero!

**cavicchiandrea** · 23-07-2010, 13:50

Prova cosi: tu hai un div poniamo mappa a questo aggiungi due altri div al suo interno legenda e cartina, il primo lo imposterai con i css display:none e absolute con z-index alto (cosi che stia in primo piano) nel secondo caricherai i dati di google al richiamo o nella funzione di google o sapratamente imposti il div legenda su display:block (document.getElementById('legenda').style.display= 'block')

**fuxio82** · 26-07-2010, 11:40

pardon, mi sta che sto facendo un po' di confusione...

io ho il codice che mi crea la mappa nell'head:

codice:

function initialize()
{ 	var latlgn = new google.maps.LatLng(45.5204572, 10.2145679); 
	var myOptions = 
	{
		zoom : 5,
		center : latlgn,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		mapTypeControlOptions: 
		{  
		style: google.maps.MapTypeControlStyle.DROPDOWN_MENU  
		}
	}	
	map = new google.maps.Map (document.getElementById("map_canvas"), myOptions);

poi nel body faccio questo:

codice:

<body onload="initialize()">
	<div id="map_canvas" style="width: 100%; height:100%;"></div>
		<div class="legenda">
			<div class="riga">
			 </img>
			<legend id="descrizioneVerde">verde</legend>
		</div>
		<div class="riga">
			 </img>
			<legend id="descrizioneBianco">bianco</legend>
		</div>

		<div class="riga">
			 </img>
			<legend id="descrizioneGiallo">giallo</legend>
		</div>
		<div class="riga">
			 </img>
			<legend id="descrizioneRosso">rosso</legend>
		</div>
	</div>

però la legenda non me la visualizza dentro la cartina, ma sotto!

il css è questo:

codice:

body,div {
	font-family: Trebuchet MS, sans-serif;
}

.legenda{
width:300px;
height:165px;
border:2px solid grey;
font-size: 13px;
display:none;
z-Index:999;
}

.legenda.riga{

}

#simboloGiallo{
no-repeat center;
}

.marker .titolo {
	font-weight: bold;
}

.marker .corpo{
	margin-left: 1em;
}

sono nelle vostre mani!

**fuxio82** · 28-07-2010, 17:38

dopo aver risolto in questo modo:

codice:

var legenda = document.createElement("CLASS");
legenda.style.width='300px';
legenda.style.height='165px';
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);

ora ho un altro problema: vorrei creare un bottone (delle stesse dimensioni di quelle del tipo di mappa) e al suo click vorrei che mi visualizzasse la legenda come una lista con un'ultima riga dove mettere "legenda on/off" dove:
se la checkbox è spuntata, mi lascia in sovraimpressione la legenda, se invece non è selezionata, la legenda quando rifaccio click sul bottone, scompare.

una manina?

Discussione: [ajax]Legenda x Mappa

Strumenti discussione

Ricerca discussione

Visualizza

[ajax]Legenda x Mappa

Permessi di invio