مكتبات

لتحميل رمز JavaScript لواجهة برمجة التطبيقات 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_HERE",
    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();
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 إضافة علامات متقدّمة قابلة للتخصيص بدرجة عالية إلى خرائطك. للاطّلاع على مزيد من المعلومات، يمكنك الرجوع إلى مستندات "محدّدات المواقع المتقدّمة".
  • تتيح لك السمة places طلبك البحث عن أماكن، مثل مؤسسات أو مواقع جغرافية أو نقاط اهتمام بارزة ضمن منطقة معيّنة. للاطّلاع على مزيد من المعلومات، يمكنك مراجعة المستندات المتعلّقة بمكتبة الأماكن.
  • توفّر السمة visualization خرائط التمثيل اللوني لتمثيل البيانات بشكل مرئي. للاطّلاع على مزيد من المعلومات، يمكنك مراجعة المستندات الخاصة بمكتبة العناصر المرئية.

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

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

لطلب مكتبات متعددة، يُرجى فصلها بفاصلة:

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