Personalizzare il testo dell’Info Window

Come promesso, vediamo come rendere parametrico il testo dell’Info Window presente nel marker.

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?