المكتبات

لتحميل رمز JavaScript لواجهة برمجة تطبيقات JavaScript للخرائط، يمكنك ضمِّن نصًا برمجيًا لأداة تحميل تمهيد في صفحتك بالنموذج التالي:

<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 من مكتبات لا يتم تحميلها حتى تطلبها على وجه التحديد. يسمح تقسيم المكونات إلى مكتبات واجهة برمجة التطبيقات (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 لتمهيد التشغيل (قديم)

يمكن استخدام المكتبات التالية مع علامة النص البرمجي القديمة للتمهيد:
  • توفّر خدمة drawing واجهة رسومية للمستخدمين لرسمها المضلّعات والمستطيلات والخطوط المتعددة والدوائر والعلامات على الخريطة. استشارة الـ الرسم المكتبة لمزيد من المعلومات.
  • تتضمن geometry دوال المنفعة لحساب القيم الهندسية العددية (مثل المسافة والمساحة) على السطح من الأرض. الرجوع إلى هندسة المكتبة لمزيد من المعلومات.
  • يوفِّر journeySharing الدعم لـ "منصة خرائط Google". النقل والخدمات اللوجستية.
  • تعرض "localContext" للمستخدمين الأماكن الرئيسية التي تهمّهم بالقرب من الموقع الذي تحدده. الرجوع إلى السياق المحلي المكتبة لمزيد من المعلومات.
  • تتيح لك marker إضافة "علامات متقدمة" قابلة للتخصيص وذات أداء عالٍ إلى خرائط Google. الرجوع إلى مستندات العلامات المتقدّمة لمزيد من المعلومات.
  • يسمح places لتطبيقك بالبحث عن أماكن مثل كمؤسسات أو مواقع جغرافية أو نقاط اهتمام بارزة، داخل منطقة محددة. الرجوع إلى مكتبة الأماكن Google لمزيد من المعلومات.
  • توفر 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>