Per verificare che tutto funzioni, direi di rendere funzionante questo esempio visualizzando la mappa di Palo Alto (California) come nell’esempio proposto da Google. Successivamente andremo a personalizzarlo completamente per visualizzare degli indirizzi inseriti da noi decidendo anche le dimensioni della mappa.
Ora che abbiamo importato l’API nella nostra pagina dobbiamo aggiungere un altro blocco JavaScript che si occupa di inizializzare la mappa precisando latitudine e longitudine. Il blocco in questione è il seguente:
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.setUIToDefault();
}
}
</script>
Anzitutto si effettua un controllo di compatibilità del Browser attraverso la funzione GBrowserIsCompatible.
Viene creato in secondo luogo l’oggetto JavaScript map di tipo GMap2. Notate che al costruttore viene passato un id, map_canvas, che deve essere il nome di un elemento presente nella pagina che andremo ad aggiungere dopo.
Viene centrata la mappa sulle coordinate di Palo Alto, California, con un livello di zoom 13.
Viene impostata l’interfaccia utente ad un valore predefinito.
Questo codice verrà ovviamente inserito dalla nostra classe, per cui modifichiamo la funzione renderJS nel seguente modo:
function renderJS(){
echo "
<script src=\"http://maps.google.com/maps?file=api&v=2&key=". $this->apikey ."&sensor=false\" type=\"text/javascript\">
</script>
";
echo "
<script type=\"text/javascript\">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById(\"map_canvas\"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.setUIToDefault();
}
}
</script>
";
}
In questo modo, con una sola funzione includiamo tutto il JavaScript necessario, sia all’inclusione delle API sia per quanto riguarda l’inizializzazione.
Abbiamo così dichiarato una funzione initialize in JavaScript, che dovrà essere richiamata al caricamento della pagina che la contiene. Il modo per farlo è il seguente:
<body onload="initialize()" onunload="Gunload()">
Ovvero, nel tag body della pagina base.php dobbiamo aggiungere le due risposte agli eventi onload (che attiva la nostra funzione ed inizializza perciò la mappa) e onunload, quest’ultima indispensabile per liberare la memoria ogni volta che la pagina viene chiusa.
In una fase successiva andremo a gestire gli eventi onload e onunload direttamente nel JavaScript scritto dalla nostra classe PHP, in modo da non dover modificare manualmente il codice HTML della pagina come stiamo facendo ora.
Come ultimo passaggio, andiamo a creare l’elemento della pagina in cui verrà renderizzata la mappa, ovvero il famoso map_canvas citato nel JavaScript in precedenza.
Ovviamente, includiamo tutto nella classe creando la funzione renderHTML:
function renderHTML(){
echo "<div id=\"map_canvas\" style=\"width: 500px; height: 300px\"></div>";
}
anche qui abbiamo impostato arbitrariamente le dimensioni della mappa. Più avanti le renderemo parametriche, in modo da poter decidere di volta in volta le dimensioni desiderate.
Manca solo un passaggio: richiamiamo la renderHTML nel codice php della pagina base ed il gioco è fatto!
<body onload="initialize()" onunload="Gunload()"> <?php $map->renderHTML(); ?> </body>
Ciao innanzitutto mi complimento con l’autore, in quanto questo tutorial mi sembra ottimo!
Secondo me, in questa lezione, nell’ultimo spezzone di codice va inserita la definizione dell’oggetto $map della classe PhpGoogleMap
$map = new PhpGoogleMap();
Ciao
Oras
Ciao! Grazie per aver commentato.
Quello che dici sarebbe esatto, ma in questa pagina non viene spiegato che la definizione dell’oggetto $map viene fatta subito dopo l’inclusione della libreria come vedi qui (in fondo) http://phpgooglemap.wordpress.com/2009/12/19/memorizzare-api-key-nella-classe/
passando al costruttore l’API KEY!