Untuk memuat kode JavaScript untuk Maps JavaScript API, Anda harus menyertakan skrip loader bootstrap di halaman Anda, dalam bentuk berikut:
<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>
Maps JavaScript API terdiri dari library yang tidak dimuat hingga Anda memintanya secara khusus. Memecah komponen menjadi library memungkinkan API dimuat (dan diuraikan) dengan cepat. Anda hanya dikenai overhead tambahan saat memuat dan mengurai library saat Anda membutuhkannya.
Muat library tambahan saat runtime, dengan menggunakan operator await
untuk memanggil
importLibrary()
dari dalam fungsi async
. Contoh:
const { Map } = await google.maps.importLibrary("maps");
Contoh kode berikut menunjukkan pemuatan library Map
dan 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();
Pustaka yang Tersedia
Library berikut tersedia untuk digunakan dengan impor library dinamis dan tag pemuatan skrip langsung:
core
(google.maps.CoreLibrary
)maps
(google.maps.MapsLibrary
)maps3d
(google.maps.Maps3DLibrary
)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
)airQuality
(google.maps.AirQualityLibrary
)
Permintaan bootstrap berikut mengilustrasikan cara menambahkan permintaan untuk
library google.maps.geometry
dari Maps JavaScript API, ke tag pemuatan
skrip langsung:
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=geometry&callback=initMap">
</script>
Untuk meminta beberapa pustaka sekaligus, pisahkan dengan koma:
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=geometry,places&callback=initMap">
</script>