Librerie

Per caricare il codice JavaScript per l'API Maps JavaScript, includi nella pagina uno script di caricamento bootstrap del seguente tipo:

<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>

L'API Maps JavaScript è composta da librerie che non vengono caricate finché non le richiedi specificamente. La suddivisione dei componenti in librerie consente all'API di caricarsi (e analizzarsi) rapidamente. Devi sostenere solo il sovraccarico aggiuntivo del caricamento e dell'analisi delle librerie in base alle tue esigenze.

Carica librerie aggiuntive in fase di esecuzione utilizzando l'operatore await per chiamare importLibrary() da una funzione async. Ad esempio:

const { Map } = await google.maps.importLibrary("maps");

Il seguente esempio di codice mostra il caricamento sia delle librerie Map sia di AdvancedMarkerElement:

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

Librerie per l'importazione di librerie dinamiche

Le seguenti librerie sono disponibili per l'utilizzo con Importazione librerie dinamiche:

Librerie per l'URL di bootstrap (legacy)

Le seguenti librerie sono supportate per l'utilizzo con il tag script di bootstrap precedente:
  • drawing fornisce un'interfaccia grafica che consente agli utenti di disegnare poligoni, rettangoli, polilinee, cerchi e indicatori sulla mappa. Per ulteriori informazioni, consulta la documentazione della libreria di disegni.
  • geometry include funzioni di utilità per il calcolo di valori geometrici scalari (ad esempio distanza e area) sulla superficie della Terra. Per ulteriori informazioni, consulta la documentazione della libreria Geometry.
  • journeySharing fornisce assistenza per le soluzioni di trasporti e logistica di Google Maps Platform.
  • localContext mostra agli utenti i principali luoghi di interesse nelle vicinanze di una località specificata. Per ulteriori informazioni, consulta la documentazione della libreria Contesto locale.
  • marker ti consente di aggiungere indicatori avanzati altamente personalizzabili e performanti alle tue mappe. Per ulteriori informazioni, consulta la documentazione degli indicatori avanzati.
  • places consente alla tua applicazione di cercare luoghi come attività, località geografiche o punti di interesse importanti all'interno di un'area definita. Per ulteriori informazioni, consulta la documentazione della libreria Luoghi.
  • visualization fornisce mappe termiche per la rappresentazione visiva dei dati. Per ulteriori informazioni, consulta la documentazione della libreria di visualizzazione.

La seguente richiesta di bootstrap illustra come aggiungere una richiesta per la biblioteca google.maps.geometry dell'API Maps JavaScript allo script di caricamento del bootstrap precedente:

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=geometry&callback=initMap">
</script>

Per richiedere più librerie, separale con una virgola:

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=geometry,places&callback=initMap">
</script>