Dynamic Library Import API

Dynamic Library Import API, Maps JavaScript API'yi ve ona eşlik eden tüm kitaplıkları yüklemenin yeni bir yoludur. Çalışma zamanında kitaplıkları dinamik olarak yükleme özelliği sizi bileşenler arası bağımlılıklar hakkında endişelenmeden kurtarır ve kitaplıkların vadeye dayalı yüklenmesine olanak tanır. Ayrıca, Maps JavaScript API'yi kullanırken uzun ad alanları kullanmaktan kaçınmanızı sağlar (uzun ad alanları yine de doldurulur ve hâlâ kullanılabilir).

Dinamik Kitaplığı İçe Aktarma özelliğini kullanma

Dynamic Library Import API'yi kullanmak için satır içi bootstrap yükleyicisi için HTML sayfanıza komut dosyası etiketi ve importLibrary() işlevini çağırmak için çalışma zamanı kodu ekleyin (bunu yapmak için basit komut dosyası yükleyiciyi de kullanabilirsiniz; bu durumda, uygulama kodunuz importLibrary özelliğini kullanmadan önce geri çağırmayı beklemelidir). API kodunuzu ve uygulamanızın ihtiyaç duyduğu önyükleme parametrelerini 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_HERE",
  v: "beta",
  // Add other bootstrap parameters as needed, using camel case.
});
</script>

Çalışma zamanında kitaplıkları yüklemek için aşağıdaki gibi bir eşzamansız işlev içinden importLibrary() işlevini çağırmak üzere await operatörünü kullanın:

let map;

async function initMap() {
    // Create the map.
    const { Map, InfoWindow } = await google.maps.importLibrary("maps");
    map = new Map(document.getElementById("map"),{
        center: { lat: 37.4239163, lng: -122.0947209 },
        zoom: 14,
        mapId: 'DEMO_MAP_ID',
    });

    // Add an info window.
    const infoWindow = new InfoWindow({
        ariaLabel: "Googleplex",
    });

    // Add a marker.
    const {AdvancedMarkerView} = await google.maps.importLibrary("marker");
    const markerView = new AdvancedMarkerView({
        map,
        position: { lat: 37.4239163, lng: -122.0947209 },
        title: 'Googleplex, Mountain View CA'
    });

    markerView.addListener('click', () => {
        infoWindow.close();
        infoWindow.setContent('<b>Googleplex</b>, Mountain View CA');
        infoWindow.open(markerView.map, markerView);
    });
}

initMap();

Gerekli parametreler

• key: API anahtarınız. Geçerli bir API anahtarı belirtilmediği sürece Maps JavaScript API yüklenmez.

• v: "beta" Önizleme için beta kanalını belirtmeniz gerekir.

İsteğe bağlı parametreler

• libraries: Yüklenecek ek Maps JavaScript API kitaplıklarının virgülle ayrılmış listesi. Sabit bir kitaplık setinin belirtilmesi genellikle önerilmez ancak web sitelerindeki önbelleğe alma davranışını ayrıntılı şekilde ayarlamak isteyen geliştiriciler tarafından kullanılabilir. Bununla birlikte, belirtilmeyen bir kitaplık gerekiyorsa bu işlemin daha yavaş yüklenmesine neden olabileceği unutulmamalıdır.

• language: Kullanılacak dil. Bu durum kontrollerin, telif hakkı bildirimlerinin, arabayla yol tariflerinin ve denetim etiketlerinin adlarını ve hizmet isteklerine verilen yanıtları etkiler. Desteklenen dillerin listesini inceleyin.

• region: Kullanılacak bölge kodu. Bu, belirli bir ülke veya bölgeye bağlı olarak harita davranışını değiştirir.

• solutionChannel: Google Haritalar Platformu'nun hızlıca çalışmaya başlamanıza yardımcı olacak birçok örnek kod türü vardır. Google, daha karmaşık kod örneklerimizin benimsenmesini izlemek ve çözüm kalitesini iyileştirmek için örnek kodumuzdaki API çağrılarına solution_channel sorgu parametresini ekler.

• authReferrerPolicy: Maps JS müşterileri, belirli URL'lerin belirli bir API Anahtarı kullanmasına izin verilen URL'leri sınırlamak için Cloud Console'da HTTP Yönlendiren Kısıtlamaları'nı yapılandırabilir. Bu kısıtlamalar varsayılan olarak, yalnızca belirli yolların API Anahtarı kullanmasına izin verilecek şekilde yapılandırılabilir. Aynı alan veya kaynaktaki herhangi bir URL, API Anahtarını kullanabilirse Maps JavaScript API'den gelen istekler yetkilendirilirken gönderilen veri miktarını sınırlamak için authReferrerPolicy: "origin" değerini ayarlayabilirsiniz. Bu parametre belirtildiğinde ve Cloud Console'da HTTP Yönlendiren Kısıtlamaları etkinleştirildiğinde, Maps JavaScript API yalnızca, yol belirtilmemişse mevcut web sitesinin alanıyla eşleşen bir HTTP Yönlendiren Kısıtlaması olduğunda yüklenebilir.