I primi controlli e metodi nell’utilizzo delle Google Maps

Cominciamo a fare qualche modifica sul file dell’articolo precedente per rendere ancora piu’ utile il nostro lavoro.
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());

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”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<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”>

//<![CDATA[
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>

Annunci

3 Responses to “I primi controlli e metodi nell’utilizzo delle Google Maps”


  1. 1 Carlo 14 gennaio 2009 alle 7:45 am

    hai provato a inserire la mappa direttamente nel blog? forse blogger consente l’inserimento dello script (forse)

  2. 2 ddl 19 maggio 2009 alle 10:06 am

    ciao tutto interessante ma da ignorante di api di maps vorrei fare questo:permettere agli utenti di un sito di inserire un markerè facile?ci sono plugin per wordpress che fanno questo?ciaonico

  3. 3 Cirdan il Timoniere 19 maggio 2009 alle 11:00 am

    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.http://code.google.com/intl/it/apis/maps/articles/phpsqlinfo.htmlCiao e grazie


Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...




Creative Commons License
Questo/a opera è pubblicato sotto una Licenza Creative Commons.

Addthis

AddThis Social Bookmark Button

Flickr Photos

Moods of blue

High heels

Altre foto

%d blogger hanno fatto clic su Mi Piace per questo: