Latest web development tutorials

base di Google Maps

Creare un semplice Google Maps

Ora creiamo un semplice Google Maps.

Il seguente è un grafico che mostra la Google Maps Londra:

Esempi

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</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 »

Esempi di analitica

Nell'esempio di cui sopra creiamo un processo per risolvere la mappa di Google.

Perché dovrebbe dichiarare il HTML5 applicazione?

<!DOCTYPE html>

La maggior parte dei browser usano il "modello standard" di HTML5 rendere il documento di più pagine, il che significa che l'applicazione è compatibile con tutti i principali browser.

Inoltre, se non ci sono tag DOCTYPE, il browser si utilizza la modalità promiscua (quirks mode) per rendere il contenuto della pagina.

Suggerimento: Va notato che alcuni "modalità promiscua" nel CSS e non è possibile utilizzare la modalità standard.In una particolare applicazione, tutti devono ereditare da elementi di blocco madri basate su una percentuale delle dimensioni. Se non si specifica la dimensione del modulo nel genitore, il valore di default 0 x 0 pixel. Se si desidera utilizzare percentuali, può essere dichiarato nel tag <style>, come segue:

<style type="text/css">
html {height:100%}
body {height:100%;margin:0;padding:0}
#googleMap {height:100%}
</style>

Questo modulo dichiarazione di stile mappa mostra (GoogleMap) deve essere all'altezza HTML del 100%.

Aggiungere Google Maps API Key

Nell'esempio seguente il primo tag <script> deve essere incluso in Google Maps API:

<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>

La chiave API di Google generati posto in parametrichiave(key= YOUR_API_KEY).

È necessarioil parametro sensore, il parametro viene utilizzato per indicare se l'applicazione utilizza un sensore (simile alla navigazione GPS) per individuare la posizione dell'utente.I valori dei parametri possono essere impostati su vero o falso.

HTTPS

Se l'applicazione è sicuro HTTP: applicazione (HTTPS Secure HTTP), è possibile utilizzare HTTPS per caricare l'API di Google Maps:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>

caricamento asincrono

Allo stesso modo, possiamo anche caricare l'API di Google Maps dopo che la pagina è completamente caricato.

L'esempio seguente utilizza window.onload per implementare a pieno carico quando la pagina viene caricata Google Maps. CaricaScript () funzione crea caricare l'API di Google Maps tag <script>. Anche alla fine dell'etichetta al callback = inizializzare i parametri, inizializzare () viene eseguita dopo la API è completamente caricato come funzione callback:

Esempi

function loadScript()
{
var script = document.createElement("script");
script.src = "http://maps.googleapis.com/maps/api/js? key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false&callback=initialize"; document.body.appendChild(script);
}

window.onload = loadScript;

Prova »

Proprietà personalizzate Mappa

Prima di inizializzare la mappa, abbiamo bisogno di creare un oggetto della mappa per definire Programma proprietà:

var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

Centro (centro)

attributo Centro specifica il centro della mappa, che per coordinate (latitudine, longitudine) per creare un punto centrale sulla mappa.

Zoom (zoom Series)

proprietà zoom zoom della mappa specifica il numero di stadi. zoom: 0 mostrare il fondo scala l'intera mappa della Terra.

MapTypeId (tipo di mappa iniziale)

attributo type mapTypeId specifica mappa iniziale.

mapTypeId comprende i seguenti quattro tipi:

  • google.maps.MapTypeId.HYBRID: immagini satellitari mostrano la via principale dello strato trasparente
  • google.maps.MapTypeId.ROADMAP: la visualizzazione della mappa normale strada
  • google.maps.MapTypeId.SATELLITE: Immagine satellitare Visualizza
  • google.maps.MapTypeId.TERRAIN: visualizza mappe con caratteristiche fisiche (come la topografia e la vegetazione) di

Dove per visualizzare su Google Maps

Tipicamente utilizzata in Google Maps elemento <div>:

<div id="googleMap" style="width:500px;height:380px;"></div>

Nota: La dimensione dellamappa sarà div impostato per mostrare la dimensione della mappa, in modo che possiamo impostare la dimensione della mappa nella <div> elemento.

Creare un oggetto mappa

var map=new google.maps.Map(document.getElementById("googleMap")
,mapProp);

Il codice precedente utilizza il parametro (mapProp) nell'elemento <div> (id è googleMap) crea una nuova mappa.

Suggerimento: Se sidesidera creare più pagine della mappa, è sufficiente aggiungere nuovi oggetti mappa può essere.

Il seguente esempio definisce quattro mappe grado (mappe utilizzando quattro diversi tipi di mappa):

Esempi

var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
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 »

Loading Map

finestra di mappa per inizializzare l'oggetto dopo il caricamento eseguendo la funzione initialize (), che assicura che la pagina è stata completamente caricata prima di caricare le Google Maps:

google.maps.event.addDomListener(window, 'load', initialize);