WordPress: creazione, inserimento e debugging delle Google Maps

Includere le Google Maps in WordPress non richiede affatto l'uso di plugin complessi. È sufficiente infatti includere il file principale della libreria e quindi utilizzare un nostro file JavaScript per utilizzare le API delle Google Maps. In questo articolo vedremo come fare.

Creiamo la marcatura

Supponiamo di dover includere una mappa di Google nella pagina dei contatti. Apriamo quindi il template della pagina e aggiungiamo un semplicissimo wrapper HTML:

<div id="map"></div>

Gli stili CSS

Nel CSS dobbiamo sempre definire le dimensioni della mappa:

#map {
	width: 400px;
	height: 300px;
}

Includere gli script

Nel file functions.php dobbiamo includere il file remoto delle API e il file locale contenuto nel nostro tema. La funzione is_page() ci permetterà di includere questi file solo nella pagina voluta:

function add_gmaps() {

	if(is_page(17)) {
	
		wp_register_script('gmaps', 'http://maps.google.com/maps/api/js?sensor=false', false, '1.0', false);
		wp_enqueue_script('gmaps');
		wp_register_script('gmaps-loader', get_bloginfo('template_url') . '/js/gmaps-loader.js', false, '1.0', false);
		wp_enqueue_script('gmaps-loader');
	
	}

}

add_action('wp_head', 'add_gmaps');

Creare la mappa

Ora ci servono la latitudine e la longitudine del luogo da visualizzare, ossia le sue coordinate geografiche. Possiamo usare un servizio simile a Geo Tag Generator, tenendo però presente che quando si tratta di località italiane non sempre questi servizi sono accurati al 100%.

Nel file gmaps-loader.js inseriremo il seguente codice:

(function() { 

	var lat = 44.5732;
	var long = 10.6707;
	var map, gMap = google.maps;
	
	window.onload = function() {
	
		if(document.getElementById('map') !== null) {
		
		  var options = {  
          zoom: 10,
          center: new gMap.LatLng(lat, long),  
          mapTypeId: gMap.MapTypeId.ROADMAP  
        };  
    
        map = new gMap.Map(document.getElementById('map'), options);
        
        var marker = new gMap.Marker({
          position: new gMap.LatLng(lat, long),
          map: map,
          title: 'La mia località'
        });
		
		
		}
	
	
	};




})();

Abbiamo isolato il nostro codice creando una funzione self-executing che verrà eseguita immediatamente dal browser. Al suo interno usiamo l'evento load dell'oggetto globale window per visualizzare la mappa.

La latitudine e longitudine ci servono sia per centrare la mappa sia per visualizzare il puntatore sulla località scelta. Il puntatore non è altro che un oggetto Marker.

Debugging

Ci sono diverse cose che possono non funzionare:

1. File remoto non caricato: Come tutti i web services, anche le API delle mappe di Google possono avere dei problemi di downtime. Quello che possiamo fare è verificare se l'oggetto google.maps è stato effettivamente caricato:

   
   if(!window.google.maps) {
   
       //...
   
   }	
   

   In questo caso potremmo utilizzare l'iframe fornito da Google come alternativa al mancato caricamento.
2. Errori JavaScript: Per individuare questo problema è necessario disporre di una console JavaScript nel proprio browser. Firebug è un ottimo esempio in tal senso. Gli errori vengono mostrati con la riga di riferimento.
3. Errori di rendering: Le mappe di Google sono costituite da una miriade di elementi HTML sovrapposti dotati ciascuno di un'immagine di sfondo diversa. Non tutti i browser riescono a gestire queste strutture complesse al meglio, specie quando si interagisce con la mappa (per esempio con lo zoom). Purtroppo dato che gli stili CSS principali risiedono su server remoti (e sono generati tramite JavaScript), è molto difficile porre rimedio ai capricci dei browser.