Maps JavaScript API için JavaScript kodunu yüklemek amacıyla sayfanıza aşağıdaki biçimde bir bootstrap yükleyici komut dosyası ekleyin:
<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, siz özel olarak istekte bulunana kadar yüklenmeyen kitaplıklardan oluşur. Bileşenleri kitaplıklara ayırmak, API'nin hızlı bir şekilde yüklenmesini (ve ayrıştırılmasını) sağlar. Kitaplıkları yalnızca ihtiyaç duyduğunuzda yüklemek ve ayrıştırmak için ek ücret ödersiniz.
Bir async
işlevi içinden importLibrary()
çağrısı yapmak için await
operatörünü kullanarak çalışma zamanında ek kitaplıklar yükleyin. Örneğin:
const { Map } = await google.maps.importLibrary("maps");
Aşağıdaki kod örneğinde hem Map
hem de AdvancedMarkerElement
kitaplıklarının yüklenmesi gösterilmektedir:
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();
Dinamik Kitaplık İçe Aktarma için Kitaplıklar
Aşağıdaki kitaplıklar Dinamik Kitaplık İçe Aktarma ile kullanılabilir:
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
)
Önyükleme URL'si için kitaplıklar (eski)
Aşağıdaki kitaplıkların eski önyükleme komut dosyası etiketiyle kullanılması desteklenir:drawing
, kullanıcılara haritada poligon, dikdörtgen, çoklu çizgi, daire ve işaretçi çizmek için bir grafik arayüz sunar. Daha fazla bilgi için Çizim kitaplığı dokümanlarına göz atın.geometry
, dünya yüzeyindeki skaler geometrik değerleri (mesafe ve alan gibi) hesaplamak için kullanılan yardımcı işlevleri içerir. Daha fazla bilgi için Geometri kitaplığı dokümanlarına göz atın.journeySharing
, Google Haritalar Platformu'nun Ulaşım ve Lojistik çözümleri için destek sağlar.localContext
, belirttiğiniz bir konumun yakınındaki önemli yerleri kullanıcılara gösterir. Daha fazla bilgi için Yerel Bağlam kitaplığı dokümanlarına bakın.marker
, haritalarınıza yüksek düzeyde özelleştirilebilir, etkili Gelişmiş İşaretçiler eklemenize olanak tanır. Daha fazla bilgi için Gelişmiş İşaretçiler belgelerine bakın.places
, uygulamanızın belirli bir alandaki tesis, coğrafi konum veya önemli önemli yer gibi yerleri aramasını sağlar. Daha fazla bilgi için Yer kitaplığı dokümanlarına göz atın.visualization
, verilerin görsel temsili için ısı haritaları sağlar. Daha fazla bilgi için Görselleştirme kitaplığı dokümanlarına göz atın.
Aşağıdaki önyükleme isteği, Maps JavaScript API'nin google.maps.geometry
kitaplığı için eski önyükleme yükleyicisi komut dosyasına nasıl istek ekleneceğini göstermektedir:
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry&callback=initMap">
</script>
Birden fazla kitaplık isteğinde bulunmak için kitaplıkları virgülle ayırın:
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry,places&callback=initMap">
</script>