المكتبات

لتحميل رمز 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

مكتبات لاستيراد المكتبات الديناميكية

تتوفّر المكتبات التالية للاستخدام مع استيراد المكتبة الديناميكية:

المكتبات لعنوان URL لبدء التشغيل (قديم)

يمكن استخدام المكتبات التالية مع علامة نص Bootstrap البرمجي القديم:
  • drawing توفّر واجهة رسومية للمستخدمين لرسم المضلّعات والمستطيلات والخطوط المتعددة والدائرات والعلامات على الخريطة. يُرجى الرجوع إلى مستندات مكتبة الرسم للحصول على مزيد من المعلومات.
  • geometry تتضمّن دوالّ مساعدة لاحتساب القيم الهندسية المتجهة (مثل المسافة والمساحة) على سطح الأرض. يُرجى الرجوع إلى مستندات مكتبة الهندسة للحصول على مزيد من المعلومات.
  • تقدّم شركة journeySharing الدعم لحلول "منصة خرائط Google" المتعلّقة بالنقل والخدمات اللوجستية.
  • localContext تعرِض للمستخدمين الأماكن الرئيسية التي تهمّهم بالقرب من موقع جغرافي تحدّده. يمكنك الرجوع إلى مستندات مكتبة "السياق المحلي" للحصول على مزيد من المعلومات.
  • marker يتيح لك إضافة علامات متقدّمة عالية الأداء وقابلة للتخصيص إلى خرائطك. يُرجى الرجوع إلى مستندات العلامات المتقدّمة للحصول على مزيد من المعلومات.
  • تتيح لك الدالة places البحث في تطبيقك عن أماكن، مثل المؤسسات أو المواقع الجغرافية أو نقاط الاهتمام البارزة، ضمن منطقة محدّدة. يمكنك الرجوع إلى مستندات مكتبة "الأماكن" للحصول على مزيد من المعلومات.
  • visualization يوفّر خرائط حرارية للتمثيل المرئي للبيانات. يمكنك الرجوع إلى مستندات مكتبة العرض للحصول على مزيد من المعلومات.

يوضّح طلب Bootstrap التالي كيفية إضافة طلب مكتبة google.maps.geometry لواجهة برمجة التطبيقات JavaScript API في "خرائط Google" إلى النص البرمجي لتحميل Bootstrap القديم:

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