Dopo il primo appuntamento con l’ introduzione alle Google Maps, eccovi il secondo capitolo sulle API di Google Maps in cui parleremo di come creare una mappa.
Come sempre in fondo alla pagina trovate il pdf scaricabile.
Iniziamo!
Per avere una visione migliore facciamo un esempio.
<!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=abcdefg&sensor=true_or_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>
Questa è una pagina html che contiene la mappa di Palo Alto in California ed è grande 500 pixel per 300 pixel.
Per prima cosa abbiamo incluso un file javascript esterno che ci fornirĂ tutte le funzioni che potremo utilizzare.
Nell’URL (l’indirizzo a cui si riferisce il file) dovremo inserire la nostra API Key in questa parte qui : key=abcdefg , dove al posto di abcdefg inseriremo la API Key ottenuta in precedenza.
<script src=”http://maps.google.com/maps?file=api&v=2&key=abcdefg&sensor=true_or_false” type=”text/javascript”></script>
Poi bisogna creare la funzione initialize() . Successivamente, nel tag body inseriremo gli eventi onLoad=”initialize()” e onUnload=”GUnload()”.
Function initialize(){
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById(“map_canvas”));
var ll = new GLatLng(37.4419, -122.1419);
map.setCenter(ll, 13);
map.setUIToDefault();
}}
La funzione GBrowserIsCompatible() restituisce true se il browser del client(colui che visita il sito) è compatibile con le API di Google Maps perché trattandosi di javascript potrebbe avere problemi di visualizzazione con i browser meno recenti o di chi ha javascript disattivato.
La variabile map istanzia una nuova classe GMap2(), creando una nuova mappa all’interno del tag div specificato attraverso l’attributo id.
La variabile ll istanzia una nuova classe GLatLng(latitudine,longitudine), a cui dovremo passare la variabile di latitudine e longitudine; questa nuova classe contiene tutti i metodi e le proprietĂ relativi alle coordinate terrestri.
Adesso entra la programmazione orientata agli oggetti, chiamando la funzione associata all’oggetto, in questo caso la variabile map.
Attraverso la funzione set Center(ll,zoom) è possibile centrare la mappa sulle coordinate e zoomare quanto si vuole, scegliendo un valore tra 1 e 20.
L’ultima funzione setUIToDefault() associa alla tua Google Map l’interfaccia grafica standard, quella che si visualizza anche sul sito di Google Maps.
Finisce qui il capitolo su come creare la mappa.
Tutti vi chiederete, si ho la mappa, e le coordinate come le trovo? Questo sarĂ l’argomento del prossimo capitolo. Alla prossima 
!
Di seguito il pdf scaricabile di questo capitolo.
Guida alle API di Google Maps – Capitolo 2 – Iniziamo a creare le mappe
 |
Creare la mappa |
Iscriviti al feed di Good2know
please send me html
maps roma
via della tre fontane, roma
only html thank
ok
i sent you and email
Ciao, io ho una domanda importante perchè non trovo risposte in rete..mi serve per la tesi..
E’possibile con le API e java script creare una applicazione che effettui il layer di due mappe(come si fa manualmente in google earth), ossia che mi restituisca una mappa georeferenziata con un’altra sovrapposta…che può rappresentare un percorso georeferenziato in formato KMZ..
Ringrazio chi mi potrà aiutare, e se mi contatta cercherò di sdebitarmi..grazie
Ciao Mauro, allora creare un layer sovrapposto a quello di maps è possibile e mantiene la georeferenziazione.
Per il formato KMZ però non saprei come aiutarti. Consiglio mio è studiarsi approfonditamente la documentazione di Maps.
Ciao
Filippo
Ciao, ti ringrazio
Ho sbagliato a scrivere, era KML e non KMZ, ho trovato che c’è un API che rende possibile. Ti ringrazio..
Un’ultima cosa, è possibile con qualche script o codice, convertire la mappa visualizzata, o il risultato del layer, in un formato immagine..Perchè sarebbe utile per poter richiamare l’immagine..Ho citato i tuoi articoli come fonte nella mia tesi..grazie
Ciao Mauro, ti consiglio di guardare le static maps (http://code.google.com/intl/it/apis/maps/documentation/staticmaps/) da qui potrai ricavare un immagine della mappa renderizzata. In teoria dovrebbe funzionare anche dopo che tu hai applicato il layer sulla mappa.
Fammi sapere se funziona!
Per la tesi, grazie mille, non ho parole! Se hai una copia in formato digitale mi piacerebbe darle un’occhiata!