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();
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();
Librerie per l'importazione di librerie dinamiche
Le seguenti librerie sono disponibili per l'uso con Importazione della libreria dinamica:
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)
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>