Marker ed Info Window al centro della Google Map

I markers identificano un punto preciso sulla mappa, servendosi della classica icona rossa a punta che probabilmente vi sarà famigliare.

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!