المكتبات

لتحميل رمز 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_HERE",
    // Add other bootstrap parameters as needed, using camel case.
    // Use the 'v' parameter to indicate the version to load (alpha, beta, weekly, etc.)
  });
</script>

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

يمكنك تحميل مكتبات إضافية في وقت التشغيل، باستخدام عامل التشغيل await لاستدعاء importLibrary() من داخل الدالة async. مثلاً:

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

يوضّح مثال الرمز التالي تحميل المكتبتَين Map وAdvancedMarkerView:

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 { AdvancedMarkerView } = 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 AdvancedMarkerView({
    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 { AdvancedMarkerView } = 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 AdvancedMarkerView({
    map: map,
    position: position,
    title: "Uluru",
  });
}

initMap();
index.js

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

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

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

تتوفّر المكتبات التالية للاستخدام مع علامة النص البرمجي للتشغيل القديم:
  • توفر 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&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>