Creazione di una mappa di base di Google
Questo esempio crea una mappa di Google centrato a Londra, Inghilterra:
Esempio
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
Prova tu stesso " Il resto di questa pagina si descrivono l'esempio precedente, passo dopo passo.
1. Caricare l'API di Google
L'API di Google Maps è una libreria JavaScript. Si può essere aggiunto a una pagina web con un <script> tag:
<script src="http://maps.googleapis.com/maps/api/js"></script>2. Impostare la mappa delle proprietà
Creare una funzione per inizializzare la mappa:
function initialize() {
}Nella funzione di inizializzazione, creare un oggetto (mapProp) per definire le proprietà per il programma:
var mapProp = {
center:new google.maps.LatLng(51.508742, -0.120850),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};La struttura centrale specifica dove per centrare la mappa. Creare un oggetto LatLng per centrare la mappa su un punto specifico. Passare le coordinate nell'ordine: latitudine, longitudine.
La proprietà zoom specifica il livello di zoom per la mappa. zoom: 0 mostra una mappa della Terra completamente ingrandito. livelli di zoom elevati ingrandire a una risoluzione maggiore.
La proprietà mapTypeId specifica il tipo di mappa da visualizzare. I seguenti tipi di mappa sono supportati:
- TABELLA DI MARCIA (normal, default 2D map)
- SATELLITE (photographic map)
- HYBRID (photographic map + roads and city names)
- TERRAIN (map with mountains, rivers, etc.)
3. Creare una mappa Container
Creare un <div> elemento per tenere la carta. Usare CSS per dimensione l'elemento:
<div id="googleMap" style="width:500px;height:380px;"></div>La mappa sarà sempre "inherit" le sue dimensioni dal suo elemento contenitore.
4. Creare un oggetto mappa
var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);Il codice precedente crea una nuova mappa all'interno del <div> elemento con id = "googleMap", utilizzando i parametri passati (mapProp) .
5. Aggiungere un ascoltatore di eventi per caricare la mappa
Aggiungere un ascoltatore DOM che eseguirà l' initialize() funzione del carico della finestra (when the page is loaded) :
google.maps.event.addDomListener(window, 'load', initialize);
asincrono Caricamento
È anche possibile caricare l'API Google Maps su richiesta.
L'esempio che segue utilizza window.onload per caricare l'API di Google Maps dopo che la pagina è completamente caricato.
Il loadScript() funzione crea l'API di Google Maps <script> tag. Inoltre, il callback = inizializzare parametro viene aggiunto alla fine dell'URL per eseguire l' initialize() funzione dopo l'API è completamente caricato:
Esempio
function loadScript()
{
var script = document.createElement("script");
script.src = "http://maps.googleapis.com/maps/api/js?callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
Prova tu stesso " Mappe multipli
L'esempio che segue definisce quattro mappe in un'unica pagina web (quattro mappe con diversi tipi di mappa):
Esempio
var map1 = new google.maps.Map(document.getElementById("googleMap1"), mapProp1);
var map2 = new google.maps.Map(document.getElementById("googleMap2"), mapProp2);
var map3 = new google.maps.Map(document.getElementById("googleMap3"), mapProp3);
var map4 = new google.maps.Map(document.getElementById("googleMap4"), mapProp4);
Prova tu stesso " Google API Key
Google permette al vostro sito web per chiamare qualsiasi API di Google, molte migliaia di volte al giorno.
Se si prevede per il traffico pesante, si dovrebbe ottenere una chiave API libera da Google.
Vai a https://console.developers.google.com per ottenere una chiave gratuito.
Google Maps si aspetta di trovare la chiave API nel parametro chiave durante il caricamento di una API:
<script src="http://maps.googleapis.com/maps/api/js? key=YOUR_KEY "></script>