حزمة أدوات Places UI Kit: هي مكتبة جاهزة للاستخدام تتيح للمطوّرين إمكانية التخصيص والتحكّم. ننصحك بتجربتها ومشاركة ملاحظاتك حول تجربتك مع حزمة واجهة المستخدم.

تستخدم Google تكنولوجيا الذكاء الاصطناعي لترجمة المحتوى إلى لغتك المفضّلة، وقد تتضمّن بعض الأخطاء.

المكتبات

لتحميل رمز JavaScript الخاص بـ Maps JavaScript API، عليك تضمين نص برمجي لبرنامج التحميل في صفحتك، ويكون على النحو التالي:

<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 من مكتبات لا يتم تحميلها إلا عند طلبها تحديدًا. ويتيح تقسيم المكوّنات إلى مكتبات تحميل واجهة برمجة التطبيقات وتحليلها بسرعة، وبالتالي لن تتحمّل سوى التكاليف الإضافية لتحميل المكتبات وتحليلها حسب الحاجة. عند استخدام استيراد المكتبة الديناميكي، لا يحمّل عامل التحميل التمهيدي المضمّن أي مكتبات تلقائيًا (ولا حتى core أو maps)؛ قبل طلب google.maps.importLibrary()، لا يتم تحميل أي جزء من Maps JavaScript API.

لتحميل مكتبة في وقت التشغيل، استخدِم عامل التشغيل await لاستدعاء google.maps.importLibrary() من داخل دالة async. افترض أنّه يتم تحميل المكتبة المطلوبة فقط، واستدعِ google.maps.importLibrary() لكل مكتبة يستخدمها الرمز البرمجي. على سبيل المثال:

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

يوضّح مثال الرمز البرمجي التالي كيفية تحميل مكتبتَي maps و marker للوصول إلى فئتَي Map و AdvancedMarkerElement:

TypeScript

async function init(): Promise<void> {
    // Request the needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);
    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map')!;

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    // Set map options.
    innerMap.setOptions({
        mapTypeControl: false,
    });

    // Add a marker positioned at the map center (Uluru).
    new AdvancedMarkerElement({
        map: innerMap,
        position: mapElement.center,
        title: 'Uluru/Ayers Rock',
    });
}
void init();index.ts

JavaScript

async function init() {
    // Request the needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('maps'),
    ]);
    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map');

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    // Set map options.
    innerMap.setOptions({
        mapTypeControl: false,
    });

    // Add a marker positioned at the map center (Uluru).
    new AdvancedMarkerElement({
        map: innerMap,
        position: mapElement.center,
        title: 'Uluru/Ayers Rock',
    });
}
void init();index.js