Aggiungi una mappa di Google con un indicatore utilizzando JavaScript

Introduzione

Questo tutorial mostra come aggiungere una mappa Google semplice con un indicatore a un sito web . È adatto a persone con una conoscenza di livello principiante o intermedio di HTML e CSS, e una poca conoscenza di JavaScript.

Di seguito è riportata la mappa che creerai utilizzando questo tutorial. L'indicatore è posizionato in Uluru (noto anche come Ayers Rock) in Parco nazionale di Uluru-Kata Tjuta

Per iniziare

Per creare una mappa Google con un indicatore sulla tua pagina web sono previsti tre passaggi:

  1. Ottenere una chiave API
  2. Creare una pagina HTML
  3. Aggiungere una mappa con un indicatore

Hai bisogno di un browser web. Scegline una nota come Google Chrome (consigliato) Firefox, Safari o Edge, in base alla piattaforma utilizzata elenco dei browser supportati.

Passaggio 1: ottieni una chiave API

Questa sezione spiega come autenticare la tua app per API Maps JavaScript utilizzando la tua chiave API.

Per ottenere una chiave API:

  1. Vai alla sezione console Google Cloud.

  2. Crea o seleziona un progetto.

  3. Fai clic su Continua per abilitare l'API ed eventuali servizi correlati.

  4. Nella pagina Credenziali, recupera una chiave API (e impostala ). Nota: se disponi già di una chiave API senza restrizioni o di una chiave con le restrizioni del browser, puoi utilizzare quella chiave.

  5. Per evitare il furto di quota e proteggere la tua chiave API, consulta Utilizzo delle chiavi API.

  6. Abilitare la fatturazione. Consulta Utilizzo e fatturazione. per ulteriori informazioni.

  7. Una volta ottenuta una chiave API, aggiungila al seguente snippet facendo clic su "TUA_CHIAVE_API". Copia e incolla il tag dello script del bootloader per utilizzarlo in autonomia pagina web.

    <script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

Passaggio 2: crea una pagina HTML

Di seguito è riportato il codice per una pagina web HTML di base:

<!doctype html>
<!--
 @license
 Copyright 2019 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
-->
<html>
  <head>
    <title>Add Map</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
  </body>
</html>

index.html

Tieni presente che questa è una pagina molto basilare con un titolo di livello tre (h3) e un singolo elemento div. Puoi aggiungere alla pagina web qualsiasi contenuto tu voglia.

comprendi il codice

In questa fase dell'esempio, abbiamo:

  • Dichiarazione dell'applicazione come HTML5 mediante la dichiarazione !DOCTYPE html.
  • È stato creato un elemento div denominato "map" per contenere la mappa.
  • L'API Maps JavaScript è stata caricata utilizzando il bootstrap loader.

Dichiara l'applicazione come HTML5

Ti consigliamo di dichiarare un valore DOCTYPE true nella tua applicazione web. Negli esempi qui riportati abbiamo dichiarato le nostre applicazioni come HTML5 utilizzando HTML5 semplice DOCTYPE, come mostrato di seguito:

<!DOCTYPE html>

La maggior parte dei browser attuali mostrerà i contenuti dichiarati con questo DOCTYPE in "modalità standard" il che significa che la tua applicazione conforme a più browser. DOCTYPE è inoltre progettato per la degradazione corretta; i browser che non lo capiscono, la ignoreranno e usano la "modalità non standard" a mostrarne i contenuti.

Tieni presente che alcuni CSS che funzionano in modalità non standard non sono validi in modalità standard. Nello specifico, tutte le dimensioni basate su percentuale devono ereditare dagli elementi di blocco padre e se uno di questi predecessori non riesce specifica una dimensione, si presume che abbiano dimensioni pari a 0 x 0 pixel. Per per questo motivo, includiamo la seguente dichiarazione style:

<style>
  #map {
    height: 100%;
  }
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>

Creare un elemento div

Affinché la mappa venga visualizzata su una pagina web, dobbiamo prenotarla. In genere, crea un elemento div denominato e ottiene un riferimento a questo nel DOM (Document Object Model) del browser.

Il codice seguente definisce un'area della pagina per la tua mappa Google.

<!--The div element for the map -->
<div id="map"></div>

In questa fase del tutorial, div appare solo come un blocco grigio, non hai ancora aggiunto una mappa. Il codice seguente descrive il CSS che imposta il parametro dimensioni e colore di div.

/* Set the size of the div element that contains the map */
#map {
    height: 400px; /* The height is 400 pixels */
    width: 100%; /* The width is the width of the web page */
}

Nel codice riportato sopra, l'elemento style imposta la dimensione div per la mappa. Imposta il parametro div con larghezza e altezza superiori a 0 px affinché la mappa sia visibile. In questo case, div è impostata su un'altezza di 400 pixel e una larghezza del 100% per visualizzare in tutta la larghezza della pagina web. Tieni presente che i div in genere prendono la loro larghezza dall'elemento contenitore, mentre i div vuoti hanno di solito un'altezza pari a 0. Per questo devi sempre impostare esplicitamente l'altezza di div.

Carica l'API Maps JavaScript

Il bootloader prepara l'API Maps JavaScript per il caricamento (non viene caricata alcuna libreria finché non viene chiamato importLibrary()).

<script>
  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
    key: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

Consulta il Passaggio 3: ottieni una chiave API per le istruzioni su come ottenere il tuo la tua chiave API.

Passaggio 3: aggiungi una mappa con un indicatore

Questa sezione mostra come caricare l'API Maps JavaScript nel tuo pagina web e come scrivere codice JavaScript che utilizzi l'API per aggiungere una mappa con un indicatore.

TypeScript

// Initialize and add the map
let map;
async function initMap(): Promise<void> {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };

  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  // The map, centered at Uluru
  map = new Map(
    document.getElementById('map') as HTMLElement,
    {
      zoom: 4,
      center: position,
      mapId: 'DEMO_MAP_ID',
    }
  );

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: 'Uluru'
  });
}

initMap();
index.ts

JavaScript

// Initialize and add the map
let map;

async function initMap() {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };
  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

  // The map, centered at Uluru
  map = new Map(document.getElementById("map"), {
    zoom: 4,
    center: position,
    mapId: "DEMO_MAP_ID",
  });

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: "Uluru",
  });
}

initMap();
index.js

Nel codice riportato sopra, le librerie Map e AdvancedMarkerView vengono caricate quando viene chiamata la funzione initMap().

comprendi il codice

In questa fase del tutorial sono presenti:

  • È stata definita una funzione JavaScript che crea una mappa nel div.
  • È stato creato un AdvancedMarkerElement per aggiungere un indicatore alla mappa.

Aggiungi una mappa

Il codice riportato di seguito crea un nuovo oggetto di Google Maps e aggiunge proprietà al mappa tra cui centro e livello di zoom. Consulta la documentazione per altra proprietà opzioni.

TypeScript

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };

// Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

// The map, centered at Uluru
map = new Map(
  document.getElementById('map') as HTMLElement,
  {
    zoom: 4,
    center: position,
    mapId: 'DEMO_MAP_ID',
  }
);
index.ts

JavaScript

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };
// Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

// The map, centered at Uluru
map = new Map(document.getElementById("map"), {
  zoom: 4,
  center: position,
  mapId: "DEMO_MAP_ID",
});

index.js

Esistono due opzioni obbligatorie per ogni mappa: center e zoom. Nella sezione precedente , new Map() crea un nuovo oggetto Google Maps. La proprietà center indica l'API in cui centrare la mappa.

La proprietà zoom specifica il livello di zoom della mappa. Zoom: 0 è il valore più basso esegue lo zoom e visualizza l'intero pianeta. Imposta il valore di zoom più in alto per aumentare lo zoom sul Earth a risoluzioni più alte.

Offrire una mappa dell'intera Terra come singola immagine richiederebbe una una mappa immensa o una piccola mappa con una risoluzione molto bassa. Di conseguenza, le immagini mappa all'interno di Google Maps e dell'API Maps JavaScript sono suddivisi in "riquadri" di mappa e "livelli di zoom". A livelli di zoom bassi, un piccolo insieme di riquadri della mappa copre un'ampia area; a livelli di zoom più elevati, i riquadri hanno una risoluzione più alta e coprono una un'area più piccola. Nell'elenco che segue viene mostrato il livello approssimativo di dettaglio che puoi di vedere a ogni livello di zoom:

  • 1: Mondo
  • 5: massa continentale o continente
  • 10: Città
  • 15: Strade
  • 20: Edifici

Le tre immagini seguenti riflettono la stessa posizione di Tokyo a livelli di zoom 0: 7 e 18.

Aggiungi un marcatore

Il codice seguente consente di inserire un indicatore sulla mappa. La proprietà position imposta posizione dell'indicatore.

TypeScript

// The marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
  map: map,
  position: position,
  title: 'Uluru'
});
index.ts

JavaScript

// The marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
  map: map,
  position: position,
  title: "Uluru",
});
index.js

Codice di esempio completo

Guarda il codice di esempio completo qui:

TypeScript

// Initialize and add the map
let map;
async function initMap(): Promise<void> {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };

  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  // The map, centered at Uluru
  map = new Map(
    document.getElementById('map') as HTMLElement,
    {
      zoom: 4,
      center: position,
      mapId: 'DEMO_MAP_ID',
    }
  );

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: 'Uluru'
  });
}

initMap();
index.ts

JavaScript

// Initialize and add the map
let map;

async function initMap() {
  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };
  // Request needed libraries.
  //@ts-ignore
  const { Map } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

  // The map, centered at Uluru
  map = new Map(document.getElementById("map"), {
    zoom: 4,
    center: position,
    mapId: "DEMO_MAP_ID",
  });

  // The marker, positioned at Uluru
  const marker = new AdvancedMarkerElement({
    map: map,
    position: position,
    title: "Uluru",
  });
}

initMap();
index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

style.css

HTML

<html>
  <head>
    <title>Add Map</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
  </body>
</html>
index.html

Prova Sample

Scopri di più sugli indicatori:

Suggerimenti e risoluzione dei problemi

  • Scopri di più su come ottenere latitudine/longitudine o convertire un indirizzo in coordinate geografiche.
  • Puoi modificare opzioni come lo stile e le proprietà per personalizzare la mappa. Per ulteriori informazioni sulla personalizzazione delle mappe, leggi le guide per styling e disegnando sulla mappa.
  • Utilizza la Console Strumenti per sviluppatori nel browser web per testare ed eseguire leggere i report sugli errori e risolvere i problemi relativi al codice.
  • Utilizza le seguenti scorciatoie da tastiera per aprire la console in Chrome:
    Comando+Opzione+J (su Mac) o Ctrl+Maiusc+J (su Windows).

  • Segui questi passaggi per conoscere la latitudine e coordinate di longitudine di un luogo su Google Maps.

    1. Apri Google Maps in un browser.
    2. Fai clic con il pulsante destro del mouse sulla posizione esatta sulla mappa per la quale hai bisogno. coordinate.
    3. Seleziona Che cosa c'è qui dal menu contestuale visualizzato. La mappa mostra una scheda nella parte inferiore dello schermo. Trovare la latitudine e longitudine nell'ultima riga della scheda.

  • Puoi convertire un indirizzo in coordinate di latitudine e longitudine utilizzando il metodo Servizio di geocodifica. Le guide per gli sviluppatori forniscono informazioni dettagliate iniziare a utilizzare il servizio Geocoding.