Archivio per gennaio 2009

Caricare markers da un database con MySQL e PHP (seconda parte)

Con quanto svolto nel precedente articolo abbiamo di fatto concluso il nostro lavoro. Si tratterà infatti di includere in una pagina html il codice che legga il file XML prodotto dallo script PHP e valorizzi i parametri dei vari metodi javascript per la visualizzazione.
Nell’esempio viene utilizzato il metodo statico

GEvent.addListener
(marker, ‘mouseover’, function() {marker.openInfoWindowHtml(html)});

che attiva la visualizzazione, al passaggio del mouse, di una finestra di dialogo di una stringa (variabile html) contenente denominazione e descrizione del marker

Non credo ci siano ulteriori commenti da fare se non dare una occhiata al codice. Il risultato del progetto lo potete trovare qui.

<!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>Visualizzazione markers su Google Map tramite MySQL e PHP</title>
<script src=”http://maps.google.com/maps?file=api&v=2&key=LAVOSTRAAPIKEY&#8221;
type=”text/javascript”></script>
<script type=”text/javascript”>
//<![CDATA[

function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById(“map”));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(44.0750963, 10.700323), 8);

GDownloadUrl(“creaxml.php”, function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName(“marker”);
for (var i = 0; i < markers.length; i++) {
var denom = markers[i].getAttribute(“denom”);
var indirizzo = markers[i].getAttribute(“indirizzo”);
var tipomarker = markers[i].getAttribute(“tipomarker”);
var point = new GLatLng(parseFloat(markers[i].getAttribute(“lat”)),
parseFloat(markers[i].getAttribute(“long”)));
var marker = createMarker(point, denom, indirizzo, tipomarker);
map.addOverlay(marker);
}
});
}
}

function createMarker(point, denom, indirizzo, tipomarker) {
var marker = new GMarker(point);
var html = “(“+tipomarker+”)<br/><b>” + denom + “</b> <br/>” + indirizzo;
GEvent.addListener(marker, ‘mouseover’, function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
//]]>
</script>
</head>

<body onload=”load()” onunload=”GUnload()”>

</body>
</html>

Volendo raffinare l’applicazione, si potrebbe ad esempio visualizzare un marker di colore diverso per ogni tipologia di punto (nel nostro caso lavoro oppure studio). Il codice relativo non è molto più complicato di quanto abbiamo visto, potete fare rierimento alla già citata guida su Google Code. Oppure ci torneremo in uno dei prossimi articoli.

Annunci

Caricare markers da un database con MySQL e PHP (prima parte)

Una possibilità davvero interessante è quella di poter visualizzare su una Google Map dei markers le cui coordinate ed altri elementi siano caricati da un database esterno.
Questo ci consente di poter utilizzare insiemi molto grandi di coordinate lasciando sempre inalterato il codice javascript di richiamo della mappa.
In questo articolo non concluderemo il nostro lavoro, ci limiteremo a capire come costruire il nostro database, popolarlo e creare scripts Php per l’interrogazione dei dati e la realizzazione di un output XML. Ci ritroveremo dunque nella stessa situazione del precedente post: un file XML da dare “in pasto” al codice javascript affinchè i markers vengano visualizzati sulla mappa.

Questo post e il successivo fanno ampio riferimento al materiale, opportunamente semplificato e integrato nella parte divulgativa, contenuto nel bellissimo articolo (in inglese) che trovate su Google Code.

Definiamo il progetto da realizzare: una sorta di “curriculum geografico”, cioè una Google Map dove vengono visualizzati tutti i luoghi dove ho studiato o lavorato, le cui informazioni sono contenute in un database.

Essendo un progetto didattico, i dati in realtà sono molto pochi. Le potenzialità invece sono infinite, poichè potremmo inserire nel database grandi quantità di dati realizzate da terze parti e, con le opportune conoscenze tecniche, filtrarli nella maniera che più ci interessa.

Di cosa abbiamo bisogno:
1) Uno spazio web con supporto MySQL e PHP
2) Alcuni cenni su come si costruisce un database relazionale
3) Piccole conoscenze di PHP e Javascript

PUNTO 1
Ci sono due possibilità: la prima è quella di registrarsi su Internet ad un servizio di spazio web gratuito con le caratteristiche cui sopra. Vi ho già citato ilbello.com hosting, ma i servizi di questo tipo sono innumerevoli. Una selezione ai altri servizi gratuiti e ad free potete trovarla in questo post.

La seconda possibilità è lavorare in locale, cioè utilizzare il proprio PC come fosse un server web. A questo scopo potete utilizzare pacchetti software come XAMPP o EasyPHP. Per la corretta installazione potete far riferimento ai link in calce all’articolo.

PUNTO 2
Ci affideremo a un database relazionale, strutturato in tabelle (a noi ne serve solo una). Il nostro spazio web, sia esso reale o virtuale, ci consentirà di creare e popolare (inserire dati) un database attraverso il linguaggio di amministrazione PhpMyAdmin.

Per quanto riguarda il servizio ilbello.com si accederà all’interfaccia PhpMyAdmin all’indirizzo http://sql.ilbello.com/, inserendo username e password fornitici al momento della registrazione. Per gli altri servizi, cambierà ovviamente l’indirizzo di accesso ma le modalità saranno identiche.

Per creare e popolare la tabella del database si posono utilizzare diversi metodi:

1) Inserendo ciascun elemento attraverso l’interfaccia di PhpMyAdmin
2) Importando in PhpMyAdmin opportuni files sql come ad esempio questo:

CREATE TABLE `markers`(
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`denom` VARCHAR( 60 ) NOT NULL ,
`indirizzo` VARCHAR( 60 ) NOT NULL ,
`lat` FLOAT( 10, 6 ) NOT NULL ,
`long` FLOAT( 10, 6 ) NOT NULL,
`tipomarker` VARCHAR( 30 ) NOT NULL ,
) ENGINE = MYISAM ;

Cosa dico attraverso questo set di istruzioni?


crea una tabella con 6 campi: il campo id è un indice che si autoincremente; il secondo campo, denom, ha al massimo 60 caratteri; lo stesso dicasi per il campo indirizzo; lat e long sono campi numerici, al massimo di 10 cifre di cui 6 decimali; tipomarker ha al massimo 30 caratteri; MYISAM è il motore di indicizzazione del database.

3) Importando opportuni files in formato CSV (ottenuti da terze parti o dal nostro foglio elettronico).

PUNTO 3
Attingiamo adesso ad alcuni elementi di PHP per accedere ai dati del database ed elaborarli in modo da formare un documento XML. Per motivi di sicurezza si sceglie di creare due script distinti, uno con le credenziali di autenticazione e l’altro che riceve le credenziali, accede al database e forma il documento XML. Ecco i listati dei due file, credenziali.php e creaxml.php. Notate che cliccando su quest’ultimo link non viene visualizzato lo script bensì il suo risultato, cioè il file XML con i dati che visualizzeremo sulla mappa.

<?
//Ovviamente $username, $password e $database conterranno i valori comunicati dal
vostro fornitore del servizio di hosting o scelti a piacere se utilizzate un server
web in locale
$host=”localhost”;
$username=”vostrousername”;
$password=”vostrapassword”;
$database=”vostrodatabase”;
?>
<?php

// richiede i dati di accesso contenuti in credenziali.php
require(“credenziali.php”);

//Sostituisce alcuni caratteri speciali con il relativo codice entita’
function parseToXML($htmlStr)
{
$xmlStr=str_replace(‘<','<',$htmlStr);
$xmlStr=str_replace(‘>’,’>’,$xmlStr);
$xmlStr=str_replace(‘”‘,’"’,$xmlStr);
$xmlStr=str_replace(“‘”,’'’,$xmlStr);
$xmlStr=str_replace(“&”,’&’,$xmlStr);
return $xmlStr;
}

// Si connette al database
$connection=mysql_connect (localhost, $username, $password);
if (!$connection) {
die(‘Non connesso : ‘ . mysql_error());
}

$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
die (‘database non selezionato : ‘ . mysql_error());
}

// Seleziona tutte le righe della tabella con i markers
$query = “SELECT * FROM markers WHERE 1”;
$result = mysql_query($query);
if (!$result) {
die(‘Query invalida: ‘ . mysql_error());
}

header(“Content-type: text/xml”);

// Genera il nodo principale del file XML
echo ‘<markers>’;

// Ciclo che crea il resto del documento XML sulla base dei dati della tabella
while ($row = @mysql_fetch_assoc($result)){
// ADD TO XML DOCUMENT NODE
echo ‘<marker ‘;
echo ‘denom=”‘ . parseToXML($row[‘denom’]) . ‘” ‘;
echo ‘indirizzo=”‘ . parseToXML($row[‘indirizzo’]) . ‘” ‘;
echo ‘lat=”‘ . $row[‘lat’] . ‘” ‘;
echo ‘long=”‘ . $row[‘long’] . ‘” ‘;
echo ‘tipomarker=”‘ . $row[‘tipomarker’] . ‘” ‘;
echo ‘/>’;
}

// Genera il tag di chiusura del nodo principale
echo ‘</markers>’;

?>

Per adesso abbiamo finito, nel prossimo articolo vedremo come integrare il tutto all’interno nella Google Map, utilizzando istruzioni di cui ormai conosciamo il significato.

Linkografia per chi desidera installare un server in locale

Per installare XAMPP
@ Corso Joomla su Second Life (consultare le slide dalla 6 alla 22)
@ Slideshare (consultare le slide dalla 6 alla 22)
@ XAMPP step by step
@ Installare XAMPP su Windows

Per installare Easy PHP
@ Guida PHP su Windows
@ Installare e configurare Php e MySQL

Una directory delle aziende italiane 2.0

Desidero condividere con Voi l’ottimo lavoro di Claudio Ancillotti dell’agenzia 2.0TaskForceItaly, che sta conducendo un progetto di tipo tassonomico sulle attività delle aziende italiane in ambito Web 2.0. Un ottimo spunto per conoscere, riflettere, segnalare.

@ TOP List Aziende 2.0 – Social Media Marketing

In Europa Twitter è una perdita di tempo

Nel solco della tradizione secondo cui l’America sarebbe sempre una spanna avanti rispetto all’Europa, vi segnalo quest’articolo apparso su Forbes, ripreso da M.V. Principato su Downloadblog.it. Il tema: il sostanziale disinteresse delle grandi aziende europee nei confronti di Twitter. Secondo l’articolo pare che molte corporate del Vecchio Continente non abbiano mai sentito parlare di Twitter, e nei rari casi in cui ciò sia accaduto, questa applicazione di microblogging sia addirittura considerata una perdita di tempo. Certamente i casi citati nel pezzo di Forbes non costituiscono un campione rappresentativo. Inoltre, è abbastanza complicato condurre un’analisi di respiro europeo su questo scarso appeal verso Twitter. La lettura dell’articolo mi spinge tuttavia a fare qualche considerazione più “nostrana”.
A metà e a fine Agosto mi ero già occupato di Twitter in una sorta di “lettera aperta” alle piccole imprese, dove evidenziavo che l’utilizzo di piattaforme 2.0 può consentire, a costi praticamente nulli se non quelli legati al knowledge, di migliorare i profili di business. Più che in altri paesi, in casa nostra l’adozione delle tecnologie da parte delle piccole imprese è un grande problema. Ci sono barriere di tipo culturale: storicamente, la competitività delle piccole aziende italiane è sempre passata per la leadership nei costi, aiutata dalle svalutazioni della lira, piuttosto che alla creazione di un vero valore aggiunto. Vi sono poi barriere di tipo infrastrutturale: ancora oggi i costi di collegamento a Internet sono elevati. Twitter non è certo la panacea di tutti i mali nè un strumento universale che possa andare bene a tutte le aziende. Nonostante questo, se spostiamo l’analisi su aziende più grandi, confesso di avere problemi di comprensione. Non riesco a capire come una grossa azienda, che magari spende milioni di euro in R&S o in pubblicità, non tenti di analizzare l’impatto sul proprio business di uno strumento come Twitter, non fosse altro perchè si tratta di uno strumento completamente gratuito. Qui il fattore culturale secondo me diventa preponderante. Da tempo, discipline quali CRM o il marketing relazionale non rappresentano più l’avanguardia degli studi di marketing. In Italia, tuttavia, sembra che l’applicazione di tali concetti si sia fermata semplicemente nell’attivazione dei call center. La nota dolente è che questi, più che un mezzo di relazione con il cliente, sono diventati un’esternalizzazione: curare seriamente i rapporti con i clienti costa e allora ci si affida a personale esterno, precario, spesso mal pagato, che non aderisce ai valori dell’azienda. Il risultato lo conosciamo: ognuno di noi ha una storia di disservizio da raccontare. L’errore di fondo è spiegato benissimo dal paradigma del marketing relazionale:

la qualità viene prodotta localmente nei momenti di verità delle interazioni acquirente/venditore.

Le mie argomentazioni mi conducono dunque ai soliti problemi italiani: la gerontocrazia dei CEOs, il pensiero unico, l’applicazione con molto ritardo dei concetti della scienza del marketing che si evolve, la scarsa attitudine alla tecnologia. Molti bloggers su questo aspetto cavalcano l’onda dell’ottimismo: esiste una generazione di uomini e donne, i famosi nativi digitali, che respirano quotidianamente tecnologia e applicativi web 2.0. Su questo punto, almeno in Italia, io sono cauto. Tempo fa ho assistito a una lezione universitaria in un corso di laurea in Comunicazione Pubblicitaria. Si parlava di applicazioni Web 2.0 e di branding virtuale. Sono rimasto sorpreso dalla scarsa conoscenza degli studenti persino di strumenti come il blog! Se questi ragazzi saranno gli esperti di marketing di domani, non usciremo mai da questo circolo vizioso che vede gli altri Paesi correre mentre noi segnamo il passo.

 Lascio a voi ulteriori riflessioni, critiche su quanto ho detto e, perchè no, segnalazioni di case study di aziende italiane che abbiamo incluso con profitto Twitter nelle proprie strategie.

Linkografia
@ Come i grandi brand utilizzano Twitter
@ Twitter for business: un case study. Dell
@ Why Europe’s CEOs Should Twitter
@ Twitter in Europa non attacca
@ Di quando sono tornato a scuola
@ Declino economico italiano (voce Wikipedia)

Visualizzare markers contenuti in un file XML

Come anticipato nel post precedente, cominciamo a “raffinare” il procedimento per la visualizzazione sulla nostra mappa di particolari markers.
Il nostro obiettivo è di rendere dinamica la visualizzazione dei markers importandone le coordinate ed altre informazioni da un file esterno alla nostra pagina di visualizzazione della Google Map.
In particolare, i dati che andremo a visualizzare sono stati precedentemente inclusi in un file XML. Non è il luogo adatto per disquisire sull’utilizzo di questo metalinguaggio, ci basti sapere che in un file xml le informazioni sono contenute in particolari elementi detti tags.
Nel nostro esempio il file xml è costituito da un solo tag (marker) con tre attributi, la latitudine (lat), la longitudine (long) e una breve descrizione (descr). Il file si chiama scuole.xml ed è il seguente

<markers>
<marker lat=”44.111508″ long=”9.835831″ descriz=”Qui ho frequentato le scuole superiori”>
<marker lat=”44.113902″ long=”9.834570″ descriz=”Qui ho frequentato le scuole elementari”>
<marker lat=”44.113715″ long=”9.833441″ descriz=”Qui ho frequentato le scuole medie”>
<marker lat=”44.111206″ long=”9.834749″ descriz=”Qui abitavo molti anni fa”>
</markers>

Il vantaggio di questa soluzione diventa evidente nel momento in cui avessimo l’esigenza di aggiungere altri markers. In quel caso, basterebbe inserire i nuovi dati a partire dalla penultima riga, rispettando la medesima sintassi, senza necessità di modificare la pagina web di visualizzazione della mappa.
Per gestire il file XML e “passare” i dati alla nostra pagina web sono però necessari alcuni step:

1. Caricare in memoria il contenuto del file
Per fare ciò, utilizzeremo il metodo

GDownloadUrl(“scuole.xml”, function(data, responseCode));

Il file scuole.xml viene caricato nella variabile data; in responseCode viene caricato con un codice di elaborazione il cui valore ci permette di capire se ci sono stati problemi nel caricamento (es. un file xml non valido o con errori nei dati) e quindi di gestire la cosa senza che l’elaborazione si interrompa (argomento che tralasciamo per ora per semplicità).

N.B. E’ necessario che il documento XML sia contenuto nel medesimo server che ospita il codice javascript e quindi la pagina che richiede la Google Map.

2. Capire il tipo di documento contenuto nel file (XML)
Affinchè il codice javascript “capisca” che il file caricato sia xml viene utilizzato il namespace GXml, che fornisce metodi statici per gestire documenti XML. Il metodo

GXml.parse(data);

infatti, non è altro che un parser XML.

3. Gestire i dati in maniera corretta
I dati vengono caricati sotto forma di stringa mentre le coordinate geografiche devono essere in formato numerico. La funzione

parseFloat()

ha appunto come argomento la stringa corrispondente agli attributi lat e long e produce in uscita un numero in floating point.

Dopo tanto scrivere, passiamo alla visualizzazione del codice, opportunamente commentato per facilitarne la comprensione.

<!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>Visualizzazione markers da file XML</title>

<script src=”http://maps.google.com/maps?file=api&v=2 &key=LAVOSTRAGOOGLEAPIKEY” type=”text/javascript”>
</script>

<script type=”text/javascript”>

function initialize() {

if (GBrowserIsCompatible()) {

var map = new GMap2(document.getElementById(“map_canvas”));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());

//Aggiunge la scala
map.addControl(new GScaleControl());

//Centra la mappa in un punto particolare
map.setCenter(new GLatLng(44.112909 , 9.835415), 16);

GDownloadUrl(“scuole.xml”, function(data, responseCode) {

var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName(“marker”);

for (var i = 0; i < markers.length; i++) {

var punto = new GLatLng(parseFloat(markers[i].getAttribute(“lat”)), parseFloat(markers[i].getAttribute(“long”)));

var titolo = (markers[i].getAttribute(“descriz”));
map.addOverlay(new GMarker(punto, {title: titolo}));

}
});

}

}

</script>

</head>

<body onload=”initialize()” onunload=”GUnload()”>
<div id=”map_canvas” style=”width: 500px; height: 400px”></div>

</body>
</html>

Il risultato lo potete apprezzare qui.

Una volta capito questo meccanismo, nei prossimi post tenteremo di realizzare una applicazione ancora più raffinata. Invece di movimentare un file XML statico, potremmo infatti crearlo in maniera dinamica, prelevando ad esempio l’elenco delle coordinate e le descrizioni da un database.

Overlay e markers su una Google Map: un primo esempio

Abbiamo imparato finora come inserire una Google Map nel proprio sito, centrata su specifiche coordinate geografiche. Abbiamo imparato come inserire alcuni controlli (le frecce di direzione, lo zoom, la scala) e una finestra di dialogo nel punto ove la mappa è centrata.
L”esigenza successiva diventa quella di visualizzare sulla nostra mappa dei punti particolari.
Secondo il codice di Google Maps, tutto ciò che può essere identificato da coordinate geografiche é definito Overlay. Un particolare tipo di Overlay è il marker, cioè il singolo punto sistemato su una mappa. Altri tipi di overlay sono ad esempio le polylines (insiemi di punti che formano una linea) e i polygons (poligoni). L’elenco non si esaurisce qui ma in questo post ci concentreremo solo sui primi.

Nell’esempio che vi propongo, su una Google Map vengono visualizzati i markers relativi alle scuole che ho frequentato (elementari, medie, superiori). Al passaggio del mouse su ogni marker viene visualizzato il tipo di scuola.
Come nell’esempio precedente, prima di cominciare abbiamo bisogno delle coordinate dei punti che vorremmo visualizzare. Ci potremmo affidare di nuovo a MyGeoPosition.com oppure, giusto per segnalare altri siti di geocoding, una alternativa diversa come questa. L’importante, lo ricordo, è che le coordinate siano in formato decimale.

Le coordinate di una delle scuole mi serviranno anche per centrare la mappa, riutilizzo dunque il metodo

map.setCenter(new GLatLng(lat, long), livellozoom);

Per la visualizzazione del marker, invece, introduco il nuovo metodo

GMarker(coord, {title: “string“});

dove coord è il vettore bidimensionale delle coordinate, valorizzato attraverso la classe GLatLng. title è uno degli attributi opzionali di GMarker, e consente la visualizzazione di una stringa al passaggio del mouse sul marker.

A questo punto abbiamo tutti gli elementi per finire il nostro lavoro. Il risultato lo potete apprezzare qui e passiamo dunque a visualizzare il codice per intero:

<!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>Visualizzazione markers su una Google Map </title>

<script src=”http://maps.google.com/maps?file=api&v=2&amp;
key=APIKEYCHEMIHADATOGOOGLE”

type=”text/javascript”></script>

<script type=”text/javascript”>

function initialize() {

if (GBrowserIsCompatible()) {

//Visualizza mappa solo modalita’ stradale
var map = new GMap2(document.getElementById(“map_canvas”));

// ITIS G. Capellini
var center = new GLatLng(44.111508, 9.835831);

// Elementari Via Pascoli
var pin1 = new GLatLng(44.113902, 9.834570);

// Medie via Leopardi
var pin2 = new GLatLng(44.113715, 9.833441);

map.setCenter(center, 16);

// L’opzione title di Gmarker fa apparire una stringa al
passaggio sul marker

var marker = new GMarker(center, {title: “Qui ho frequentato le
superiori”});
map.addOverlay(marker);

var marker = new GMarker(pin1, {title: “Qui ho frequentato
le elementari”});
map.addOverlay(marker);

var marker = new GMarker(pin2, {title: “Qui ho frequentato
le medie”});
map.addOverlay(marker);

//Se voglio aggiungere altri markers basta dichiarare in alto
una nuova variabile (es. pin3) e copiare le due righe appena
sopra questo commento sostituendo il nome della variabile

//Aggiunge i controlli formato grande
map.addControl(new GLargeMapControl());

//Aggiunge la scala
map.addControl(new GScaleControl());
}
}

</script>
</head>

<body onload=”initialize()” onunload=”GUnload()”>
<div id=”map_canvas” style=”width: 550px; height: 450px”></div>

</body>
</html>

Nell’esempio che vi ho proposto esempio la visualizzazione dei markers è un po’ rozza. Se dovessimo infatti aggiungere nuovi markers dovremmo necessariamente modificare il codice di cui sopra, che diventerebbe tra l’altro poco leggibile se dovessimo porre su una mappa numerosi markers.
La visualizzazione statica dei markers è dunque un grosso limite, i cui rimedi saranno trattati nei post a venire.

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>


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

Addthis

AddThis Social Bookmark Button

Flickr Photos


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