Per prima cosa, dichiariamo la variabile membro $infoText nella classe e assegnamole un valore predefinito nel costruttore.

class PhpGoogleMap {
	// variabili membro della classe
	private $apikey;
	private $dimX;
	private $dimY;
	private $latitude;
	private $longitude;
	private $address;
	private $zoom;
	private $infoText;
	
	function __construct($_apikey){
		$this->apikey = $_apikey;
		$this->dimX = 500;
		$this->dimY = 300;
		$this->latitude = 0;
		$this->longitude = 0;
		$this->address = "";
		$this->zoom = 13;
		$this->infoText = "Centro della mappa.";
	}

Scriviamo anche il metodo setInfoText in modo da poter impostare il testo da fuori:

	function setInfoText($HTML){
		$this->infoText = str_replace("'", "\'", $HTML);
	}

Ho introdotto una chiamata a str_replace di php in modo da aggiungere davanti ai caratteri apice singolo ” ‘ ” il carattere di escape ” \ ” poichè se il testo dovesse contenere apici, questi andrebbero a creare conflitto con l’apertura e la chiusura delle stringhe nel codice JavaScript.

L’ultimo passaggio è quello di andare ad inserire nel codice JavaScript la nostra variabile di classe $infoText:

		// assegna alla variabile $JScenterMap il codice necessario a centrare la mappa
		if($this->address!=""){
			$JScenterMap = "
				var geocoder = new GClientGeocoder();
				geocoder.getLatLng(
					'".$this->address."',
					function(point) {
						if (!point) {
							alert('".$this->address."' + \" not found\");
						} else {
							point;
							map.setCenter(point, ".$this->zoom.");
							
							var marker = createMarker(point, '".$this->infoText."');
							map.addOverlay(marker);							
						}
					});
			";
		} else {
			$JScenterMap = "
				map.setCenter(new GLatLng(".$this->latitude.", ".$this->longitude."), ".$this->zoom.");
					
				var marker = createMarker(new GLatLng(".$this->latitude.", ".$this->longitude."), '".$this->infoText."');
				map.addOverlay(marker);
			";
		}

Provate la pagina. C’è bisogno che vi dica come impostare un testo HTML dalla vostra pagina base?

I markers, nell’API di Google Maps, sono oggetti di tipo GMarker.

Associato ad un marker vi è solitamente un fumetto contenente alcune informazioni sulla località che viene visualizzato una volta cliccato il marker. Si tratta di un Info Window, identificato nell’API da un oggetto di tipo GInfoWindow.

Sia i markers che l’Info Window sono derivati da un’interfaccia comune, GOverlay. Gli overlay sono semplicemente degli elementi che appaiono sopra la mappa, associati a certe coordinate della stessa per cui scorrono con essa. I metodi addOverlay e removeOverlay servono ad aggiungere/rimuovere un overlay sulla mappa, sia esso un marker o un’info window o altro.

Aggiungiamo nel codice Javascript una funzione che, dato un punto ed un testo HTML, crea l’oggetto marker e l’info window associata. Il codice JS è il seguente:

      function createMarker(point,html) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        return marker;
      }

Come vedete è stato inserito un listener (ascoltatore) di eventi, ovvero una funzione che viene attivata al click sul marker. La funzione si occupa di aprire l’infowindow. L’oggetto GInfoWindow non viene creato esplicitamente poichè si tratta di un particolare oggetto che viene creato automaticamente insieme alla mappa stessa. In una mappa esiste una sola info window, il cui contenuto può cambiare di volta in volta.

Vediamo ora come inserire questo codice nella nostra classe. Direi che è sensato posizionarlo all’inizio del pezzo di codice che si occupa di inizializzare la mappa:

		// inizializza la mappa
		echo "
			<script type=\"text/javascript\">
				function createMarker(point,html) {
					var marker = new GMarker(point);
					GEvent.addListener(marker, \"click\", function() {
						marker.openInfoWindowHtml(html);
					});
					return marker;
				}

				window.onload = initialize;
				window.onunload = GUnload;

				function initialize() {
					if (GBrowserIsCompatible()) {
						var map = new GMap2(document.getElementById(\"map_canvas\"));
						$JScenterMap
						map.setUIToDefault();
					}
				}
			</script>
		";

Ora dobbiamo richiamare la funzione. In questo caso dobbiamo aprire una parentesi, poichè ci dobbiamo ricordare che la nostra classe PHP ha a disposizione le coordinate del punto solamente nel caso in cui non utilizziamo la geolocalizzazione. Infatti passando alla mappa un indirizzo, latitudine e longitudine sono ricavate direttamente dal codice Javascript.

La creazione del marker è quindi da inserire in due punti differenti del codice. Il primo, riguarda proprio il caso della geolocalizzazione, in cui abbiamo a disposizione il punto all’interno della funzione che viene attivata dal geocoder:

		// assegna alla variabile $JScenterMap il codice necessario a centrare la mappa
		if($this->address!=""){
			$JScenterMap = "
				var geocoder = new GClientGeocoder();
				geocoder.getLatLng(
					'".$this->address."',
					function(point) {
						if (!point) {
							alert('".$this->address."' + \" not found\");
						} else {
							point;
							map.setCenter(point, 13);

							var marker = createMarker(point, 'Hello World!');
							map.addOverlay(marker);
						}
					});
			";
...

di seguito invece occupiamoci del caso in cui abbiamo le coordinate memorizzate nella classe, avendole passate dal PHP:

...
		} else {
			$JScenterMap = "
				map.setCenter(new GLatLng(".$this->latitude.", ".$this->longitude."), 13);

				var marker = createMarker(new GLatLng(".$this->latitude.", ".$this->longitude."), 'Hello World');
				map.addOverlay(marker);
			";
		}

Abbiamo creato in questo modo un marker impostato al centro della mappa, capace di aprire una Info Window contenente un messaggio. Il prossimo passo sarà quello di permetterci di personalizzare il messaggio, rendendolo parametrico attraverso una procedura che ormai dovrebbe essere nota.

Proseguiamo!

C’è davvero bisogno che vi dica in dettaglio come fare? Suvvia, abbiamo fatto cose ben più difficili in questo capitolo. Si tratta solo di aggiungere una variabile $zoom ed un metodo setZoom alla classe.

Ho inserito un controllo nel caso in cui si imposti lo zoom fuori dal range dei valori 0-19.

Ecco il codice completo della classe, in cui evidenzio le righe di codice aggiunte o modificate per lo zoom:

<?php

class PhpGoogleMap {
	// variabili membro della classe
	private $apikey;
	private $dimX;
	private $dimY;
	private $latitude;
	private $longitude;
	private $address;
	private $zoom;

	function __construct($_apikey){
		$this->apikey = $_apikey;
		$this->dimX = 500;
		$this->dimY = 300;
		$this->latitude = 0;
		$this->longitude = 0;
		$this->address = "";
		$this->zoom = 13;
	}

	function renderJS(){
		echo "
			<script src=\"http://maps.google.com/maps?file=api&v=2&key=". $this->apikey ."&sensor=false\" type=\"text/javascript\">
			</script>
		";

		// assegna alla variabile $JScenterMap il codice necessario a centrare la mappa
		if($this->address!=""){
			$JScenterMap = "
				var geocoder = new GClientGeocoder();
				geocoder.getLatLng(
					'".$this->address."',
					function(point) {
						if (!point) {
							alert('".$this->address."' + \" not found\");
						} else {
							map.setCenter(point, ".$this->zoom.");
						}
					});
			";
		} else {
			$JScenterMap = "map.setCenter(new GLatLng(".$this->latitude.", ".$this->longitude."), ".$this->zoom.");";
		}

		// inizializza la mappa
		echo "
			<script type=\"text/javascript\">
				window.onload = initialize;
				window.onunload = GUnload;

				function initialize() {
					if (GBrowserIsCompatible()) {
						var map = new GMap2(document.getElementById(\"map_canvas\"));
						$JScenterMap
						map.setUIToDefault();
					}
				}
			</script>
		";

	}

	function renderHTML(){
		echo "<div id=\"map_canvas\" style=\"width: ".$this->dimX."px; height: ".$this->dimY."px\"></div>";
	}

	function setDimensions($x, $y){
		$this->dimX = $x;
		$this->dimY = $y;
	}

	function setCoordinates($lat, $long){
		$this->latitude = $lat;
		$this->longitude = $long;
		$this->address = "";

	}

	function setAddress($address){
		$this->address = $address;
	}

	function setZoom($zoom){
		if($zoom>19){
			$zoom = 19;
		}
		if($zoom<0){
			$zoom = 0;
		}
		$this->zoom = $zoom;
	}
}

?>

Evito di riproporvi il codice del file base.php, ormai avreste aver capito il funzionamento. Provate ad includere una mappa in una vostra pagina internet, se avete un sito personale.

La classe è ora completamente parametrizzata nelle sue funzioni base ed è già utilizzabile. I prossimi passi consisteranno nell’aggiunta di nuove funzionalità e caratteristiche. A presto!

• Piazza Duomo Milano
• Trieste
• Innsbruck
• Colosseo

e di vederci restituita la mappa posizionata esattamente nel punto specificato.

Questa “Magia” è possibile grazie al servizio Geocoding di Google Maps, che consente di ottenere le coordinate geografiche (latitudine e longitudine) di un punto descritto in modo testuale.

Inizieremo quindi a dichiarare una variabile membro della classe chiamata $address, in modo da poter memorizzare l’indirizzo. Nel costruttore lo inizializzeremo a stringa vuota.

class PhpGoogleMap {
	// variabili membro della classe
	private $apikey;
	private $dimX;
	private $dimY;
	private $latitude;
	private $longitude;
	private $address;

	function __construct($_apikey){
		$this->apikey = $_apikey;
		$this->dimX = 500;
		$this->dimY = 300;
		$this->latitude = 0;
		$this->longitude = 0;
		$this->address = "";
	}

Scriviamo la funzione setAddress, in modo da poter impostare l’indirizzo da codice PHP:

	function setAddress($address){
		$this->address = $address;
	}

Siccome vogliamo comunque mantenere l’impostazione manuale di latitudine e longitudine, dobbiamo pero’ decidere se centrare la mappa in base alle coordinate inserite manualmente oppure in base all’indirizzo.

L’idea è quella di centrare la mappa in base all’indirizzo solo quando questo è impostato ad un valore diverso dalla stringa vuota. Se l’indirizzo invece è vuoto, la mappa verrà centrata in base alle coordinate.

Per mettere in pratica questa idea è pero’ necessario effettuare un controllo al fine di non avere un indirizzo impostato quando non lo desideriamo: tradotto, se impostiamo le coordinate manuali vogliamo che l’indirizzo sia effettivamente vuoto. Aggiungiamo perciò una riga a setCoordinates:

	function setCoordinates($lat, $long){
		$this->latitude = $lat;
		$this->longitude = $long;
		$this->address = "";
	}

Ora viene il bello. Dobbiamo complicare un po’ la funzione renderJS, poichè si dovrà comportare in modo diverso a seconda che la centratura della mappa avvenga attraverso l’indirizzo oppure attraverso le coordinate.

Introduciamo perciò la variabile $JScenterMap che, come dive il nome, conterrà il codice JS necessario a centrare la mappa o in base all’indirizzo o in base alle coordinate.

Il pezzo di codice che si occupa di inizializzare la mappa diventerà:

		// inizializza la mappa
		echo "
			<script type=\"text/javascript\">
				window.onload = initialize;
				window.onunload = GUnload;

				function initialize() {
					if (GBrowserIsCompatible()) {
						var map = new GMap2(document.getElementById(\"map_canvas\"));
						$JScenterMap
						map.setUIToDefault();
					}
				}
			</script>
		";

Dove al comando map.setCenter è stata sostituita la variabile $JScenterMap, che dovrà essere già stata “riempita”. Il seguente codice va perciò inserito prima del precedente:

		// assegna alla variabile $JScenterMap il codice necessario a centrare la mappa
		if($this->address!=""){
			$JScenterMap = "
				var geocoder = new GClientGeocoder();
				geocoder.getLatLng(
					'".$this->address."',
					function(point) {
						if (!point) {
							alert('".$this->address."' + \" not found\");
						} else {
							map.setCenter(point, 13);
						}
					});
			";
		} else {
			$JScenterMap = "map.setCenter(new GLatLng(".$this->latitude.", ".$this->longitude."), 13);";
		}

La spiegazione del funzionamento è semplice.

Viene effettuato un controllo sulla stringa address; se l’indirizzo è vuoto, allora il codice da inserire sarà uguale a quello che avevamo in precedenza: ovvero, conterrà un map.setCenter con le coordinate prese dalle variabili membro della classe.

Se l’indirizzo invece è “diverso dalla stringa vuota”, allora occorre creare (tramite codice JavaScript) un nuovo oggetto GClientGeocoder, che grazie al metodo getLatLng può ricavare le coordinate del luogo desiderato.

Se l’indirizzo non riesce ad essere convertito in coordinate, verrà visualizzato un alert.

La sintassi è un po’ criptica, poichè alla funzione getLatLng passiamo sia la stringa dell’indirizzo sia una funzione, che scriviamo inline “al volo”, a cui viene passato un punto “point” che è il risultato della localizzazione.

Provate ora, nella pagina base.php a richiamare la setAddress con l’indirizzo di casa vostra…

<?php
	include("PhpGoogleMap.php");
	$map = new PhpGoogleMap("ABQIAAAAaCXVeDXfpm7YlAwseZnnIRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxRftdtfVBwCVswj14F5-5imlhaaQg");
	$map->setDimensions(800, 600);
	$map->setAddress("Piazza Duomo Milano");

Bello vero?

Il procedimento è del tutto simile a quello utilizzato per parametrizzare le dimensioni; vediamo comunque in dettaglio come fare.

Dichiariamo due nuove variabili membro, $latitude e $longitude ed inizializzamole nel costruttore.

class PhpGoogleMap {
	// variabili membro della classe
	private $apikey;
	private $dimX;
	private $dimY;
	private $latitude;
	private $longitude;

	function __construct($_apikey){
		$this->apikey = $_apikey;
		$this->dimX = 500;
		$this->dimY = 300;
		$this->latitude = 0;
		$this->longitude = 0;
	}

Scriviamo la funzione setCoordinates che si occupa di impostare le variabili appena dichiarate:

	function setCoordinates($lat, $long){
		$this->latitude = $lat;
		$this->longitude = $long;
	}

Modifichiamo il metodo renderJS in modo che prenda in considerazione le nuove variabili:

	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\">
				window.onload = initialize;
				window.onunload = GUnload;

				function initialize() {
					if (GBrowserIsCompatible()) {
						var map = new GMap2(document.getElementById(\"map_canvas\"));
						map.setCenter(new GLatLng(".$this->latitude.", ".$this->longitude."), 13);
						map.setUIToDefault();
					}
				}
			</script>
		";
	}

Aggiungiamo alla pagina base.php una chiamata a setCoordinates con le coordinate (che ormai conosciamo) di Palo Alto:

	$map->setCoordinates(37.4419, -122.1419);

Et Voilà.

Naturalmente potete cambiare le coordinate in modo da poter centrare la vostra mappa in qualunque parte del mondo. Ma non è così facile sapere le coordinate di… casa vostra vero?

Per questo sfrutteremo, nel prossimo post, il servizio GeoCoding che permette di trasformare un indirizzo (Piazza Duomo 4, Milano ad esempio) in coordinate da dare in pasto alla nostra mappa. Andiamo!

Rendiamo ora parametriche queste dimensioni, in modo da poterle impostare attraverso una funzione della nostra classe setDimensions(x, y) a cui passeremo appunto le dimensioni desiderate.

Iniziamo con dichiarare due nuove variabili membro per la nostra classe che serviranno a memorizzare i valori delle dimensioni della mappa. Ho aggiunto per chiarezza dei commenti visto che la nostra classe sta iniziando a espandersi:

class PhpGoogleMap {
	// variabili membro della classe
	private $apikey;
	private $dimX;
	private $dimY;
...

Nel costruttore definiamo delle dimensioni di default nel caso in cui l’utilizzatore della classe non imposti esplicitamente le dimensioni della mappa. Direi che il 500×300 proposto da Google potrebbe essere una buona scelta:

	function __construct($_apikey){
		$this->apikey = $_apikey;
		$this->dimX = 500;
		$this->dimY = 300;
	}

A questo punto modifichiamo la funzione renderHTML in modo che includa le variabili della classe invece delle costanti precedenti:

	function renderHTML(){
		echo "<div id=\"map_canvas\" style=\"width: ".$this->dimX."px; height: ".$this->dimY."px\"></div>";
	}

Visualizziamo la pagina. La mappa ha le stesse dimensioni di prima, ma ora possiamo averne il controllo. Ci basta scrivere il metodo setDimensions che imposta le variabili dimX e dimY nella classe:

	function setDimensions($x, $y){
		$this->dimX = $x;
		$this->dimY = $y;
	}

Ora possiamo richiamare dal codice PHP della pagina base.php il metodo setDimensions con le dimensioni desiderate da noi:

<?php
	include("PhpGoogleMap.php");
	$map = new PhpGoogleMap("ABQIAAAAaCXVeDXfpm7YlAwseZnnIRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxRftdtfVBwCVswj14F5-5imlhaaQg");
	$map->setDimensions(800, 600);
?>

Nel prossimo post parametrizzeremo le coordinate geografiche. Avanti!

<body onload="initialize()" onunload="GUnload()">

Per evitare di dover sporcare il tag body con il codice delle mappe, possiamo in modo del tutto equivalente definire nella funzione renderJS del codice JavaScript che va ad assegnare all’evento window.onload il nome della nostra funzione.

Basterà inserire nella funzione che già abbiamo scritto le due righe evidenziate:

	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\">
				window.onload = initialize;
				window.onunload = GUnload;
				
				function initialize() {
					if (GBrowserIsCompatible()) {
						var map = new GMap2(document.getElementById(\"map_canvas\"));
						map.setCenter(new GLatLng(37.4419, -122.1419), 13);
						map.setUIToDefault();
					}
				}
			</script>
		";
	}

Ovviamente ricordatevi di togliere gli eventi dal tag body.
Verifichiamone il funzionamento e andiamo avanti.

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 è:

1. Includere la classe PhpGoogleMap
2. Creare un nuovo oggetto di tipo PhpGoogleMap passandogli l’API KEY.
3. Nell’intestazione della pagina richiamare il metodo renderJS.
4. Nel tag body gestire gli eventi onload e onunload.
5. 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.

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>

<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg&sensor=false"
        type="text/javascript">
</script>

Dove dobbiamo specificare alcuni parametri, tra cui l’API KEY che abbiamo ormai memorizzato nella nostra classe.

A questo scopo, scriviamo una funzione della nostra classe che automaticamente include la chiave:

	function renderJS(){
		echo "
			<script src=\"http://maps.google.com/maps?file=api&v=2&key=". $this->apikey ."&sensor=false\" type=\"text/javascript\">
			</script>
		";
	}

L’unica cosa che ci rimane da fare ora è richiamare la renderJS nella nostra pagina base.php; facciamolo nell’head (intestazione) in modo da seguire diligentemente l’hello world proposto dalla documentazione ufficiale di Google Maps.

<head>
	...
	<?php $map->renderJS(); ?>
</head>

salviamo il tutto e continuiamo!