Librerie

Per caricare il codice JavaScript per l'API Maps JavaScript, devi includere nella pagina uno script di caricamento bootstrap nel 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_HERE",
    // Add other bootstrap parameters as needed, using camel case.
    // Use the 'v' parameter to indicate the version to load (alpha, beta, weekly, etc.)
  });
</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 caricare (e analizzare) rapidamente. Il costo aggiuntivo del caricamento e dell'analisi delle librerie è limitato solo se necessario.

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

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

Il seguente esempio di codice mostra il caricamento di entrambe le librerie Map e AdvancedMarkerView:

// 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 { AdvancedMarkerView } = 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 AdvancedMarkerView({
    map: map,
    position: position,
    title: 'Uluru'
  });
}

initMap();
index.ts

// 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 { AdvancedMarkerView } = 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 AdvancedMarkerView({
    map: map,
    position: position,
    title: "Uluru",
  });
}

initMap();
index.js

Librerie per l'importazione delle librerie dinamiche

Per l'utilizzo con Importazione libreria dinamica sono disponibili le seguenti librerie:

• core (google.maps.CoreLibrary)
• maps (google.maps.MapsLibrary)
• places (google.maps.PlacesLibrary)
• geocoding (google.maps.GeocodingLibrary)
• routes (google.maps.RoutesLibrary)
• marker (google.maps.MarkerLibrary)
• geometry (google.maps.GeometryLibrary)
• elevation (google.maps.ElevationLibrary)
• streetView (google.maps.StreetViewLibrary)
• journeySharing (google.maps.JourneySharingLibrary)
• drawing (google.maps.DrawingLibrary)
• visualization (google.maps.VisualizationLibrary)

Librerie per l'URL di bootstrap (legacy)

• drawing offre agli utenti un'interfaccia grafica per disegnare poligoni, rettangoli, polilinee, cerchi e indicatori sulla mappa. Consulta la documentazione relativa alla libreria di disegno per ulteriori informazioni.
• geometry include funzioni di utilità per calcolare valori geometrici scalari (come distanza e area) sulla superficie della terra. Per saperne di più, consulta la documentazione relativa alla libreria di geometria.
• journeySharing offre assistenza per le soluzioni di trasporti e logistica di Google Maps Platform.
• localContext mostra agli utenti i luoghi di interesse principali vicino a una località da te specificata. Per saperne di più, consulta la documentazione della libreria di contesto locale.
• marker ti consente di aggiungere indicatori avanzati altamente personalizzabili alle tue mappe. Per saperne di più, consultate la documentazione relativa agli indicatori avanzati.
• places consente alla tua applicazione di cercare luoghi come luoghi, località geografiche o punti d'interesse di rilievo in un'area definita. Per saperne di più, consultate la documentazione relativa alla raccolta di Places.
• visualization fornisce mappe termiche per la rappresentazione visiva dei dati. Per saperne di più, consulta la documentazione relativa alla libreria di visualizzazione.

La seguente richiesta di bootstrap mostra come aggiungere una richiesta per la libreria google.maps.geometry dell'API Maps JavaScript all'API legacy di bootstrap:

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

Per richiedere più raccolte, separale con una virgola:

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