Sappiamo che il nuovo Google Maps ha escluso il codice per l’integrazione delle mappe sui siti web col semplice «copia e incolla», obbligando a utilizzare le Application Programming Interface (API) v3 del servizio. Fortunatamente, l’operazione richiesta è molto più semplice di quanto immaginassi: non prevede un’iscrizione al programma dedicato agli sviluppatori, né – di conseguenza – l’applicazione dei limiti sulle query effettuabili. Se vogliamo, è un embedding alla portata di chiunque possa modificare i sorgenti delle pagine.

Il codice prevede tre componenti: due script nella <head> della pagina e una semplice <div> nel <body>. Il primo script è richiamato dai server di Google ed è uguale per tutti, mentre il secondo può essere adattato a seconda delle esigenze e la terza avere un identificativo personalizzato. Procediamo con ordine, imparando a integrare correttamente lo script di partenza. Potete aprire un editor qualsiasi e inserire quanto segue tra <head> e </head>, nei sorgenti della pagina web sulla quale mostrare la mappa che volete integrare.

<script src="//maps.google.com/maps/api/js?sensor=false&language=it"></script>

Un paio d’osservazioni. Ho escluso il protocollo – ovvero, non ho inserito http o https – dall’indirizzo dello script, perché dipenda dalla connessione dell’utente: se la pagina è accessibile in HTTPS, lo script sarà richiamato via HTTPS e viceversa. Lo Unified Resource Locator (URL) è leggermente diverso da quello indicato nella documentazione, “puntando” all’ultimo rilascio stabile delle API. Un problema in meno, qualora uscisse una nuova versione e doveste eseguire un debug del sito. Passiamo allo script che genera la mappa.

<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(45.51742, 9.21841),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

Prestate attenzione alle parti in grassetto: le prime due cifre corrispondono a latitudine e longitudine del punto centrale della mappa da generare. Potete trovarle utilizzando uno dei tanti servizi online di terze parti, recuperandole da Google Maps. Il secondo termine, invece, riguarda l’identificativo della <div> che ospiterà la mappa. Potete cambiarlo a piacimento. Questo script è molto “elementare” e non considera elementi aggiuntivi, quali i marcatori o i livelli personalizzati. Trovate le ulteriori indicazioni su Google.

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

Quest’ultima parte dev’essere obbligatoriamente inserita fra <body> e </body>, mentre la seconda potrebbe essere spostata dalla <head> purché sia comunque posizionata sopra la terza. Se avete cambiato map-canvas, dovete sostituire l’identificativo pure nella <div>. Il procedimento è completo: la dimensione della mappa può essere controllata coi Cascading Style Sheet (CSS), impostando lo stile dell’elemento distinto dall’identificativo scelto. Gli esperti possono andare oltre, aggiungendo al secondo script dei dettagli avanzati.

Noterete subito delle differenze, rispetto al passato. Se non aggiungete dei marcatori – descritti nella documentazione ufficiale – la mappa non evidenzia i punti d’interesse: aggiungendo un esercizio commerciale a Google Places for Business, potete recuperare la reference per introdurre degli elementi complessi in corrispondenza del luogo selezionato. Esistono molti altri componenti, come l’attivazione di Street View, ma ho preferito indicare soltanto il procedimento più semplice. Potete tornare ad avere le mappe sui siti web.