Biblioteche

Per caricare il codice JavaScript per l'API Maps JavaScript, devi Includi nella tua pagina uno script di caricamento bootstrap con il seguente formato:

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

La L'API Maps JavaScript è costituita da librerie che vengono caricate solo quando richiederli in modo specifico. Suddividere i componenti in librerie consente API per caricarsi (e analizzare) rapidamente. Devi sostenere solo l'overhead aggiuntivo di caricamento e analisi librerie in base alle tue esigenze.

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

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

L'esempio di codice seguente mostra il caricamento di entrambe le librerie Map e 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'uso con Importazione della libreria dinamica:

Librerie per l'URL di bootstrap (legacy)

Le seguenti librerie sono supportate per l'utilizzo con tag script di bootstrap legacy:
    .
  • drawing offre un'interfaccia grafica che gli utenti possono disegnare poligoni, rettangoli, polilinee, cerchi e indicatori sulla mappa. Consulenza il Disegno documentazione della libreria per ulteriori informazioni.
  • geometry include funzioni di utilità per il calcolo valori geometrici scalari (come distanza e area) sulla superficie della Terra. Consulta il Geometria documentazione della libreria per ulteriori informazioni.
  • journeySharing fornisce assistenza per Google Maps Platform Trasporti e logistica.
  • localContext mostra i luoghi di interesse principali degli utenti nelle vicinanze di una località da te specificata. Consulta il Contesto locale documentazione della libreria per ulteriori informazioni.
  • marker ti consente di aggiungere indicatori avanzati con prestazioni elevate e personalizzabili ai tuoi mappe. Consulta la documentazione relativa agli indicatori avanzati per ulteriori informazioni.
  • places consente alla tua applicazione di cercare luoghi quali come stabilimenti, località geografiche o punti d'interesse di rilievo, all'interno di un'area definita. Consulta il Libreria di Places documentazione per ulteriori informazioni.
  • visualization fornisce mappe termiche per la rappresentazione visiva e i dati di Google Cloud. Consulta il Visualizzazione documentazione della libreria per ulteriori informazioni.

La seguente richiesta di bootstrap illustra come aggiungere una richiesta per il metodo Libreria google.maps.geometry dell'API Maps JavaScript alla versione precedente script del bootstrap:

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