المكتبات

لتحميل رمز JavaScript لواجهة برمجة تطبيقات JavaScript للخرائط، يمكنك تضمين نص برمجي لبرنامج التحميل 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>

تتألّف واجهة برمجة تطبيقات JavaScript للخرائط من مكتبات لا يتم تحميلها حتى تطلبها على وجه التحديد. يؤدي تقسيم المكوّنات إلى مكتبات إلى السماح لواجهة برمجة التطبيقات بتحميل (وتحليل) بسرعة. لن تتحمّل سوى أعباء إضافية لتحميل المكتبات وتحليلها حسب حاجتك إليها.

يمكنك تحميل مكتبات إضافية في وقت التشغيل باستخدام عامل التشغيل 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();

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

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

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

مكتبات عنوان URL لتمهيد التوجيه (الإصدار القديم)

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

يوضِّح طلب بدء التشغيل التالي كيفية إضافة طلب لمكتبة google.maps.geometry لواجهة برمجة تطبيقات JavaScript للخرائط إلى النص البرمجي القديم لأداة تحميل التمهيد:

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