Articoli Consigliati

Funzione per avere le coordinate x ed y delle scrolbar - JavascriptFunzione per avere le coordinate x ed y delle scrolbar - Javascript

Oggi vi mostrerò un'altra funzione in javascript molto utile. Questa funzione vi restituisce un array con le coordinate x ed y delle barre di scorrimento. Leggete...

Leggi l'articolo

Funzione per le dimensioni della pagina reale e della finestra visualizzata - JavascriptFunzione per le dimensioni della pagina reale e della finestra visualizzata - Javascript

Salve cari lettori di good2know.it, oggi vorrei fornirvi un'utile funzione javascript che vi restituisce le dimensioni reali della pagina e della finestra visualizzata. Leggete...

Leggi l'articolo

Flip! - Plugin jQuery per ruotare e flippare elementiFlip! - Plugin jQuery per ruotare e flippare elementi

Oggi vorrei parlarvi di Flip! un plugin per jQuery che fa ruotare o "flippare"  contenuti ed elementi. L'installazione è semplice, di seguito un mini-tutorial su...

Leggi l'articolo

jQuery Magnifier - Plugin jQuery per lo zoom di immaginijQuery Magnifier - Plugin jQuery per lo zoom di immagini

Oggi vorrei presentarvi questo plugin, jQuery Magnifier. Questo plugin permette lo zoom dell'immagine con un semplice effetto lente. Di seguito una mini-guida all'installazione...

Leggi l'articolo

jQZoom Evolution - Plugin jQuery per lo zoom di immaginijQZoom Evolution - Plugin jQuery per lo zoom di immagini

Oggi vorrei parlarvi di jQZoom Evolution, un plugin jquery che permette lo zoom di un immagine piĂą grande attraverso una sorta di "lente" su un immagine di anteprima. Qui...

Leggi l'articolo

5 applicazioni per lavorare meglio con il multitasking - I ferri del mestiere #25 applicazioni per lavorare meglio con il multitasking - I ferri del mestiere #2

Per il secondo numero della rubrica "I ferri del mestiere" presentiamo 5 freeware per aumentare le prestazioni del vostro computer quando lavorate con piĂą applicazioni,...

Leggi l'articolo

YouTube in stile piuma con Feather BetaYouTube in stile piuma con Feather Beta

Il famoso portale di video lancia una nuova funzionalitĂ  Feather, per ora in versione Beta, riduce notevolmente i tempi di caricamento del buffer eliminando alcune funzioni...

Leggi l'articolo

8 inviti per Google Wave direttamente da Good2know!8 inviti per Google Wave direttamente da Good2know!

Buongiorno cari lettori di Good2know, oggi sono disponibili 8 inviti per Google Wave ai primi 8 commentatori. Scrivete nel commento il vostro indirizzo email, e vi...

Leggi l'articolo

Google Image Swirl, motore di ricerca per visualizzare le immagini similiGoogle Image Swirl, motore di ricerca per visualizzare le immagini simili

Proprio ieri sul blog ufficiale di google è uscito l'articolo riguardante una nuova applicazione per la ricerca di immagini, Google Image Swirl. Google Image Swirl...

Leggi l'articolo

Favicon Generator Tool : generatore di faviconFavicon Generator Tool : generatore di favicon

Favicon Generator Tool è un generatore di favicon gratuito, bisogna solo caricare un immagine di massimo 100 Kb nei formati jpg,png o gif. In pochi secondi verrà...

Leggi l'articolo

New blog post: Funzione per avere le coordinate x ed y delle scrolbar - Javascript

Guida alle API di Google Maps, iniziamo a creare le mappe

2

logo-google-code1
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&amp;v=2&amp;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.

mappa-palo-alto
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&amp;v=2&amp;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 :D !

Di seguito il pdf scaricabile di questo capitolo.

Guida alle API di Google Maps – Capitolo 2 – Iniziamo a creare le mappe

icona-pdf12 Creare la mappa
RSS Feed Subscribe to our RSS Feed

Posted on : 13-05-2009 | By : admin | In : Guida API di Google

Tags: , , , ,

Comments (2)

please send me html

maps roma

via della tre fontane, roma

only html thank

ok :D i sent you and email

Write a comment