La mappa del post precedente non ci consentiva nè di muoverci nella mappa nè di zoomare attravero i classici comandi di Google Maps. Supponiamo di avere la necessità di inserire tali controlli. Supponiamo inoltre di avere l'esigenza di inserire nel nostro sito una mappa centrata su un particolare punto, inserendo in quello stesso punto una descrizione.
Per quanto riguarda la centratura della mappa, si ricorre al metodo
map.setCenter(new GLatLng(lat, long), livellozoom);
Per fare ciò abbiamo bisogno di conoscere sia la latitudine che la longitudine (N.B. in formato decimale, non in gradi) del punto ove andremo a centrare la mappa. A tale scopo o annotiamo i dati del nostro gps oppure utilizziamo applicazioni come http://mygeoposition.com/ .
Per quanto riguarda i controlli, sarà sufficiente utilizzare i metodi
map.addControl(new GMapTypeControl());
map.addControl(new GSmallMapControl());
map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl());
map.addControl(new GSmallMapControl());
map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl());
il primo controllo permette di selezionare il tipo di mappa (Mappa, Satellite, Ibrida); il secondo e il terzo consentono di attivare la barra di navigazione (le frecce per spostarsi) e i pulsanti per lo zoom, nelle due versioni piccola e grande; il quarto permette di visualizzare la scala della nostra mappa.
Infine, per quanto riguarda la finestra di dialogo, si utilizza il metodo
map.openInfoWindow(map.getCenter(), document.createTextNode("testodavisualizzare"));
Il lavoro svolto finora lo potete trovare qui; segue il documento html completo.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Esempio 2</title>
<script src="http://maps.google.com/maps?file=api&v=2
&key=ABQIAAAAynaMdsZYAs5aITp8oGFoixTaBdm2rMFwTfjoALLN-mPT1dOPXBTTmmyWoK3
otqrSo4SXBqg8UMWHOA" type="text/javascript"></script>
<script type="text/javascript">
// function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
// ***** Centro la mappa su Spezia livello di zoom 16
map.setCenter(new GLatLng(44.111206, 9.834749), 16);
// ***** Visualizza controllo - Zoom Piccolo
map.addControl(new GSmallMapControl());
// ***** Visualizza controllo Tipo Mappa
map.addControl(new GMapTypeControl());
// ***** Visualizza la scala della mappa
map.addControl(new GScaleControl());
// ***** Apre finestra informativa
map.openInfoWindow(map.getCenter(),document.createTextNode("La casa dove sono
nato: Viale Italia 40, La Spezia"));
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width:600px;height:400px"></div>
</body>
</html>
Post
hai provato a inserire la mappa direttamente nel blog? forse blogger consente l'inserimento dello script (forse)
RispondiEliminaciao tutto interessante ma da ignorante di api di maps vorrei fare questo:
RispondiEliminapermettere agli utenti di un sito di inserire un marker
è facile?
ci sono plugin per wordpress che fanno questo?
ciao
nico
Grazie per avere letto il mio articolo. Di plugin per Wordpress non ne sono a conoscenza, anche perchè un'applicazione come quella che descrivi tu abbisogna di un database (almeno per come l'ho pensata io). Secondo questo approccio un ottimo tutorial per creare l'applicazione lo puoi trovare qui.
RispondiEliminahttp://code.google.com/intl/it/apis/maps/articles/phpsqlinfo.html
Ciao e grazie