La risposta migliore vince 10 €

Creare Mappa + Legenda per WordPress

da m4lcu in CMS - mercoledì 25 gennaio 2012

Potete spiegarmi come realizzare una mappa come da immagine per poi integrarla su WordPress???

Sta leggendo questa pagina: 1 Ospite

    La Risposta Migliore è

  1. aspire81 ha risposto:
    26 gennaio 2012 alle 10:12
    Punteggio: 1

    Mi sa che devi agire direttamente sul codice della pagina:

    Funzione che crea la mappa

    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);

    Nel corpo metti questo:

    <body onload="initialize()">
	<div id="map_canvas" style="width: 100%; height:100%;"></div>
		<div class="legenda">
			<div class="riga">
			<img id="simboloVerde" src="http://www.google.com/mapfiles/marker_green.png"> </img>
			<legend id="descrizioneVerde">verde</legend>
		</div>
		<div class="riga">
			<img id="simboloBianco" src="http://www.google.com/mapfiles/marker_white.png"> </img>
			<legend id="descrizioneBianco">bianco</legend>
		</div>

		<div class="riga">
			<img id="simboloGiallo" src="http://www.google.com/mapfiles/marker_yellow.png"> </img>
			<legend id="descrizioneGiallo">giallo</legend>
		</div>
		<div class="riga">
			<img id="simboloRosso" src="http://www.google.com/mapfiles/marker.png"> </img>
			<legend id="descrizioneRosso">rosso</legend>
		</div>
	</div>

    e poi con i css posizioni il blocco dove preferisci

    .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;
}

Risposte 6

  1. ramspeed22 ha risposto:
    25 gennaio 2012 alle 19:43
    Punteggio: 1

    Basta che vai su http://maps.google.it/maps e metti le tue informazioni sulla mappa.
    Poi a sinistra della mappa trovi un tastino con scritto link vai li e prendi il codice html e lo incolli nell’editor di wordpress.
    Se hai problemi contattami :)

    m4lcu ha risposto:
    mercoledì 25 gennaio 2012 19:47

    Questo lo so fare :-) vorrei creare la legenda della mappa come da foto,vedi quel quadratino che ho evidenziato sulla freccia ??? spuntando il menù appaiono le icone che indicano determinate posizioni.

    ramspeed22 ha risposto:
    mercoledì 25 gennaio 2012 19:52

    prova un po questi plugin:

    http://wordpress.org/extend/plugins/mappress-google-maps-for-wordpress/

    ramspeed22 ha risposto:
    mercoledì 25 gennaio 2012 19:53

    http://wordpress.org/extend/plugins/google-maps-for-wordpress/

    m4lcu ha risposto:
    mercoledì 25 gennaio 2012 20:31

    Provati ma mi serve un menù come quello in foto…….ti ringrazio per le tue risposte

  2. aspire81 ha risposto:
    26 gennaio 2012 alle 10:12
    Punteggio: 1

    Mi sa che devi agire direttamente sul codice della pagina:

    Funzione che crea la mappa

    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);

    Nel corpo metti questo:

    <body onload="initialize()">
	<div id="map_canvas" style="width: 100%; height:100%;"></div>
		<div class="legenda">
			<div class="riga">
			<img id="simboloVerde" src="http://www.google.com/mapfiles/marker_green.png"> </img>
			<legend id="descrizioneVerde">verde</legend>
		</div>
		<div class="riga">
			<img id="simboloBianco" src="http://www.google.com/mapfiles/marker_white.png"> </img>
			<legend id="descrizioneBianco">bianco</legend>
		</div>

		<div class="riga">
			<img id="simboloGiallo" src="http://www.google.com/mapfiles/marker_yellow.png"> </img>
			<legend id="descrizioneGiallo">giallo</legend>
		</div>
		<div class="riga">
			<img id="simboloRosso" src="http://www.google.com/mapfiles/marker.png"> </img>
			<legend id="descrizioneRosso">rosso</legend>
		</div>
	</div>

    e poi con i css posizioni il blocco dove preferisci

    .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;
}