ห้องสมุด

หากต้องการโหลดโค้ด JavaScript สำหรับ Maps JavaScript API ให้ใส่สคริปต์ตัวโหลด bootstrap ในหน้าเว็บในรูปแบบต่อไปนี้

<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 ประกอบด้วย ไลบรารีที่จะ ไม่โหลดจนกว่าคุณจะขอโดยเฉพาะ การแยกคอมโพเนนต์ ออกเป็นไลบรารีจะช่วยให้ API โหลดและแยกวิเคราะห์ได้อย่างรวดเร็ว คุณจึงจะมีค่าใช้จ่ายเพิ่มเติมในการโหลดและแยกวิเคราะห์ไลบรารี เฉพาะเมื่อจำเป็นเท่านั้น เมื่อ ใช้ การนำเข้าไลบรารีแบบไดนามิก ตัวโหลด Bootstrap แบบอินไลน์จะไม่โหลดไลบรารีใดๆ โดยค่าเริ่มต้น (แม้แต่ core หรือ maps) โดยจะไม่มีการโหลดส่วนใดส่วนหนึ่งของ Maps JavaScript API ก่อนที่จะเรียก google.maps.importLibrary()

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

const { Map } = await google.maps.importLibrary("maps");

ตัวอย่างโค้ดต่อไปนี้แสดงการโหลดทั้งไลบรารี maps และ marker เพื่อเข้าถึงคลาส Map และ AdvancedMarkerElement:

TypeScript

async function init(): Promise<void> {
    // Request the needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);
    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map')!;

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    // Set map options.
    innerMap.setOptions({
        mapTypeControl: false,
    });

    // Add a marker positioned at the map center (Uluru).
    new AdvancedMarkerElement({
        map: innerMap,
        position: mapElement.center,
        title: 'Uluru/Ayers Rock',
    });
}
void init();

JavaScript

async function init() {
    // Request the needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);
    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map');

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    // Set map options.
    innerMap.setOptions({
        mapTypeControl: false,
    });

    // Add a marker positioned at the map center (Uluru).
    new AdvancedMarkerElement({
        map: innerMap,
        position: mapElement.center,
        title: 'Uluru/Ayers Rock',
    });
}
void init();

ไลบรารีที่ใช้ได้

ไลบรารีต่อไปนี้พร้อมใช้งานสำหรับการใช้งานกับ การนำเข้าไลบรารีแบบไดนามิก และ แท็กการโหลดสคริปต์โดยตรง:

คำขอ Bootstrap ต่อไปนี้แสดงวิธีเพิ่มคำขอไลบรารี google.maps.geometry ของ Maps JavaScript API ลงในแท็กการโหลดสคริปต์โดยตรง 

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=geometry&callback=initMap">
</script>

หากต้องการขอไลบรารีหลายรายการ ให้คั่นด้วยคอมมา

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=geometry,places&callback=initMap">
</script>