/https://www.ilsoftware.it/app/uploads/2023/05/img_5521.jpg "Introduzione all'utilizzo delle API di Google Maps")
La pagina web di partenza per iniziare a lavorare con le API di Google Maps è questa. All’interno di questa sezione del sito “Google Code”, si potranno trovare tutte le informazioni utili per sviluppare applicazioni in grado di interagire con le mappe mondiali di Google.
Le API Google Maps e i “mashup”
API è l’acronimo di Application Programming Interface. Le API di Google Maps forniscono a qualunque utente registrato tutta una serie di strumenti per manipolare le mappe del globo terrestre messe a disposizione dal colosso di Mountain View con la possibilità di integrare nuovi servizi, sviluppati in proprio, per arricchire le funzionalità di base offerte da Google Maps.
Il termine inglese “mashup” è spesso utilizzato per indicare la miscela di contenuti che è possibile realizzare ricorrendo alle API di Google Maps. Un bravo programmatore può “amalgamare” le mappe di Google con i contenuti prodotti in proprio per produrre qualunque genere di applicazione web. Non c’è limite alla fantasia.
Generazione di una chiave Google Maps API
Google conferisce a qualunque utente ne faccia richiesta, il diritto di utilizzare il codice Google Maps nelle proprie pagine web. Non ci sono limitazioni per quanto riguarda il traffico generato (la società richiede tuttavia di essere avvisata nel caso in cui si preveda di produrre più di 500.000 pagine viste giornaliere). Per quanto concerne il servizio di “geocoding” ossia la trasformazione di un indirizzo in coordinate geografiche, Google accetta un numero di richieste giornaliere, provenienti da un medesimo indirizzo IP, non superiore alle 15.000 unità.
Per impiegare Google Maps sulle proprie pagine web, è indispensabile richiedere uno speciale codice: si tratta di una “chiave” univoca legata all’indirizzo Internet specificato. Il suggerimento è quello di indicare l’URL del proprio sito, all’interno del quale si prevede di usare le API di Google Maps, nella forma http://dominio.xx senza anteporre l’indicazione www. Con questo espediente, il codice API di Google Maps sarà sfruttabile su qualunque sottodominio (i.e. dominio principale e domini di terzo livello).
La richiesta di una chiave Google Maps API si concretizza accedendo a questa pagina previa effettuazione del login al proprio account Google (nel caso in cui non si sia in possesso di un accout utente è necessario attivarne uno).
Si provi a creare una pagina html denominandola, per esempio, maps.html ed incollando al suo interno il codice che segue:
<!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"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=CHIAVE_DI_ESEMPIO&sensor=false" type="text/javascript"></script>
<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>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>
Il primo codice JavaScript consente di caricare le API di Google Maps dai server dell’azienda di Mountain View. Affinché l’esempio funzioni, è indispensabile sostituire l’indicazione CHIAVE_DI_ESEMPIO con il codice ottenuto in fase di registrazione al servizio Google Maps API.
Il parametro sensor, inoltre, deve essere obbligatoriamente impostato a true oppure a false a seconda che si intenda tracciare la locazione dell’utente (sistema client).
La tag div denominata map_canvas funge da una sorta di “segnaposto” all’interno del quale sarà caricato e visualizzato il riquadro di Google Maps. Le proprietà width e height consentono di specificare le dimensioni da assegnare alle mappe (in questo caso, 500×300 pixel).
All’atto del caricamento della pagina web, come si vede, viene invocata la funzione initialize() (evento onLoad sulla tag body). Tale funzione JavaScript si occupa di creare un oggetto denominato map appartenente alla classe GMap2. Gli oggetti di tale classe rappresentano una singola mappa Google Maps sulla pagina.
I successivi metodi setCenter() e setUIToDefault() consentono, rispettivamente, di impostare il punto centrale della mappa in termini di coordinate geografiche (il secondo valore specifica il livello di zoom) e di attivare, sull’interfaccia grafica, i controlli predefiniti per la “navigazione”.
E’ attualmente in fase di completamento lo sviluppo della terza versione (v3) delle API Google Maps. Pur restando invariato l’approccio generale da seguire per l’inserimento di una mappa Google all’interno di una qualsiasi pagina web, la sintassi cambia. Tra le varie modifiche, la terza versione delle API non richiede più l’utilizzo di alcuna chiave.
Qualche esempio pratico
Il metodo openInfoWindow consente di visualizzare un “fumetto” contenente qualunque genere di informazioni in qualsiasi punto del “planisfero” di Google Maps. Incollando quanto segue dopo la riga map.setCenter, Google Maps mostrerà il testo HTML specificato sotto forma di “fumetto”:
Interessante anche la possibilità di intercettare gli eventi che si verificano sulla mappa. Utilizzando il namespace GEvent si può ad esempio rilevare quando l’utente clicca in un punto della mappa:
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(43.9137,12.4076),4);
map.setUIToDefault();
GEvent.addListener(map, "click", function(overlay, point){
map.clearOverlays();
if (point) {
map.addOverlay(new GMarker(point));
map.panTo(point);
map.openInfoWindowHtml(point,"Latitudine: "+point.lat()
+"<br />"+"Longitudine: "+point.lng());
}
});
}
}
L’esempio fa in modo che allorquando l’utente clicchi in un qualsiasi punto del globo terrestre, Google Maps visualizzi immediatamente le coordinate del punto selezionato (latitudine e longitudine).
Facendo riferimento a questa pagina, è possibile trovare un esempio di “mashup” che si occupa di calcolare la distanza tra due punti in chilometri e miglia. Il servizio fa uso anche del JavaScript epoly.js, non sviluppato direttamente da Google ma che permette di fruire di alcuni metodi aggiuntivi per GPolyline e GPolygon. Il primo consente di disegnare linee aperte e percorsi sulla mappa Google mentre il secondo di tracciare veri e propri poligoni chiusi (è possibile specificare i colori del contorno e del riempimento).
Con poco sforzo è quindi possibile disegnare qualunque tipo di forma su Google Maps con lo scopo, ad esempio, di evidenziare un’area: è sufficiente specificare i vari vertici indicando, ad esempio, le coordinate geografiche di tutti i punti.
In questa pagina un esempio di ciò che è possibile realizzare ricorrendo alle API Google Maps ed al JavaScript epoly.js.
/https://www.ilsoftware.it/app/uploads/2024/11/Qwen2.5-Coder-migliora-sviluppo-codice.jpg "Qwen2.5-Coder, l'AI che sviluppa software e funziona anche in locale")
/https://www.ilsoftware.it/app/uploads/2024/11/ironcalc-motore-foglio-di-calcolo.jpg "Arriva il foglio di calcolo open source che rompe tutti gli schemi: IronCalc")
/https://www.ilsoftware.it/app/uploads/2024/10/formazione-tech-develhope.jpg "L'importanza della formazione tech e le nuove opportunità Develhope")
/https://www.ilsoftware.it/app/uploads/2024/11/wordpress-studio.jpg "Sviluppare e caricare siti WordPress in locale con Studio: cos'è e come funziona")