API การนําเข้าไลบรารีแบบไดนามิก

Dynamic Library Import API เป็นวิธีใหม่ในการโหลด Maps JavaScript API และไลบรารีทั้งหมดที่รองรับ ความสามารถในการโหลดไลบรารีแบบไดนามิกที่รันไทม์จะทําให้คุณไม่ต้องกังวลเรื่องทรัพยากร Dependency แบบข้ามคอมโพเนนต์ และโหลดข้อมูลแบบอิงตามสัญญา นอกจากนี้ยังช่วยให้คุณหลีกเลี่ยงการใช้เนมสเปซแบบยาวเมื่อใช้ Maps JavaScript API ได้ด้วย (เนมสเปซแบบยาวจะยังคงสร้างขึ้นและจะยังคงใช้ได้)

ใช้การนําเข้าไลบรารีแบบไดนามิก

หากต้องการใช้ Dynamic Library Import API ให้เพิ่มแท็กสคริปต์สําหรับ Bootsrap แบบอินไลน์ในหน้า HTML และโค้ดรันไทม์เพื่อเรียก importLibrary() (นอกจากนี้ คุณสามารถใช้ตัวโหลดสคริปต์ง่ายๆ เพื่อดําเนินการได้ ในกรณีนี้ โค้ดของแอปพลิเคชันต้องรอให้โค้ดเรียกกลับก่อนใช้ importLibrary) คัดลอกโค้ดต่อไปนี้ เพิ่มคีย์ API และพารามิเตอร์ Boottrap ที่แอปพลิเคชันของคุณต้องใช้

<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>

หากต้องการโหลดไลบรารีขณะรันไทม์ ให้ใช้โอเปอเรเตอร์ await เพื่อเรียกใช้ importLibrary() จากภายในฟังก์ชัน async ตามที่แสดงไว้ที่นี่

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();

พารามิเตอร์ที่จำเป็น

• key: คีย์ API ของคุณ Maps API จะไม่โหลด เว้นแต่จะระบุคีย์ API ที่ถูกต้อง

• v: "beta" คุณต้องระบุเวอร์ชันเบต้าเพื่อดูตัวอย่าง

พารามิเตอร์ที่ไม่บังคับ

• libraries: รายการไลบรารีไลบรารีเพิ่มเติมของJavaScript API ที่คั่นด้วยคอมมา โดยทั่วไปเราไม่แนะนําให้ระบุชุดไลบรารีแบบคงที่ แต่นักพัฒนาซอฟต์แวร์ที่ต้องการปรับแต่งลักษณะการแคชอย่างละเอียดในเว็บไซต์ของตน โปรดทราบว่ากรณีนี้อาจทําให้การโหลดช้าลงหากไม่ได้ระบุไลบรารีที่ไม่ได้ระบุ

• language: ภาษาที่จะใช้ การดําเนินการนี้จะมีผลต่อชื่อการควบคุม ประกาศเกี่ยวกับลิขสิทธิ์ เส้นทางการขับขี่ และป้ายกํากับการควบคุม รวมถึงการตอบกลับคําขอบริการ ดูรายการภาษาที่รองรับ

• region: รหัสภูมิภาคที่จะใช้ ซึ่งจะเปลี่ยนการทํางานของแผนที่ตามประเทศหรือเขตแดนที่ระบุ

• solutionChannel: Google Maps Platform มีโค้ดตัวอย่างหลายประเภท ที่จะช่วยให้คุณเริ่มต้นใช้งานได้อย่างรวดเร็ว หากต้องการติดตามการใช้ตัวอย่างโค้ดที่ซับซ้อนขึ้นและปรับปรุงคุณภาพโซลูชัน Google จะรวมพารามิเตอร์การค้นหา solution_channel ในการเรียก API ในโค้ดตัวอย่าง

• authReferrerPolicy: ลูกค้า Maps JS สามารถกําหนดค่าข้อจํากัดผู้อ้างอิง HTTP ใน Cloud Console เพื่อจํากัด URL ที่อนุญาตให้ใช้คีย์ API ได้ โดยค่าเริ่มต้น คุณสามารถกําหนดค่าข้อจํากัดเหล่านี้เพื่ออนุญาตให้ใช้บางเส้นทางเพื่อใช้คีย์ API ได้เท่านั้น หาก URL ในโดเมนหรือต้นทางเดียวกันอาจใช้คีย์ API คุณจะตั้งค่า authReferrerPolicy: "origin" เพื่อจํากัดปริมาณข้อมูลที่ส่งเมื่อให้สิทธิ์คําขอจาก Maps JavaScript API ได้ เมื่อระบุพารามิเตอร์นี้และเปิดใช้ข้อจํากัดการอ้างอิง HTTP ใน Cloud Console แล้ว Maps JavaScript API จะโหลดได้เมื่อมีข้อจํากัดการอ้างอิง HTTP ที่ตรงกับโดเมนของเว็บไซต์ปัจจุบันโดยไม่มีเส้นทางที่ระบุ