Riepiloghiamo questa prima fase in cui abbiamo ottenuto una classe che ingloba tutto il codice JavaScript ed HTML in grado di visualizzare una mappa di Google in una pagina web.
L’unico parametro che possiamo specificare è, per ora, la chiave API ottenuta in base al dominio.
Nel codice della nostra pagina tutto quello che dobbiamo fare è:
- Includere la classe PhpGoogleMap
- Creare un nuovo oggetto di tipo PhpGoogleMap passandogli l’API KEY.
- Nell’intestazione della pagina richiamare il metodo renderJS.
- Nel tag body gestire gli eventi onload e onunload.
- Nel corpo della pagina richiamare il metodo renderHTML.
Di seguito il codice completo della classe sviluppata finora:
PhpGoogleMap.php
<?php
class PhpGoogleMap {
private $apikey;
function __construct($_apikey){
$this->apikey = $_apikey;
}
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>
";
}
function renderHTML(){
echo "<div id=\"map_canvas\" style=\"width: 500px; height: 300px\"></div>";
}
}
?>
E poi il codice della pagina (l’API KEY è quella ottenuta per il dominio localhost):
base.php
<?php
include("PhpGoogleMap.php");
$map = new PhpGoogleMap("ABQIAAAAaCXVeDXfpm7YlAwseZnnIRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxRftdtfVBwCVswj14F5-5imlhaaQg");
?>
<!DOCTYPE html "-//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"/>
<?php $map->renderJS(); ?>
</head>
<body onload="initialize()" onunload="Gunload()">
<?php $map->renderHTML(); ?>
</body>
</html>
Il prossimo obiettivo sarà quello di migliorare questo codice in modo da renderlo più funzionale e parametrico.
Complimenti, codice spiegato nei dettagli, comprensibile e completo.
Non lo trovo molto illuminante, sarebbe stato molto piu interessante se fosse stata sviluppata una classe che tramite chiamata ajax riuscisse ad aggiornare la mappa senza un refresh di pagina ne senza la riscrittura della mappa gia disegnata in precedenza.
Grazie comunque.
Giovanni.
Tutto molto bello e spiegato bene! Complimenti, molto bravo e grazie per la condivisione.