المكتبات

لتحميل رمز JavaScript لواجهة برمجة التطبيقات JavaScript لخرائط Google، عليك تضمين نص برمجي لتحميل 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 من مكتبات لا يتم تحميلها إلى أن تتم طلبها على وجه التحديد. من خلال تقسيم المكوّنات إلى مكتبات، يمكن تحميل (وتحليل) واجهة برمجة التطبيقات بسرعة. ولا تتحمل سوى النفقات الإضافية المترتبة على تحميل المكتبات وتحليلها عند الحاجة إليها.

تحميل مكتبات إضافية أثناء التشغيل، باستخدام المشغِّل await للاتّصال importLibrary() من داخل دالة async على سبيل المثال:

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

يوضّح مثال الرمز البرمجي التالي تحميل مكتبتَي Map و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();
index.ts

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();
index.js

المكتبات المتاحة

تتوفّر المكتبات التالية للاستخدام مع استيراد المكتبة الديناميكية وعلامة تحميل النص البرمجي مباشرةً:

يوضّح طلب Bootstrap التالي كيفية إضافة طلب مكتبة google.maps.geometry لواجهة برمجة التطبيقات JavaScript لخرائط Google إلى علامة تحميل الرمز البرمجي المباشرة:

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