کتابخانه ها

برای بارگیری کد جاوا اسکریپت برای 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 از کتابخانه هایی تشکیل شده است که تا زمانی که شما به طور خاص آنها را درخواست نکنید بارگیری نمی شوند. تجزیه اجزا به کتابخانه ها به 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

جاوا اسکریپت

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

کتابخانه ها برای واردات پویا کتابخانه

کتابخانه های زیر برای استفاده با Dynamic Library Import در دسترس هستند:

کتابخانه ها برای URL بوت استرپ (قدیمی)

کتابخانه های زیر برای استفاده با برچسب اسکریپت بوت استرپ قدیمی پشتیبانی می شوند:
  • drawing یک رابط گرافیکی برای کاربران فراهم می کند تا چند ضلعی ها، مستطیل ها، چند خط ها، دایره ها و نشانگرها را روی نقشه بکشند. برای اطلاعات بیشتر به مستندات کتابخانه Drawing مراجعه کنید.
  • geometry شامل توابع کاربردی برای محاسبه مقادیر هندسی اسکالر (مانند مسافت و مساحت) روی سطح زمین است. برای اطلاعات بیشتر به مستندات کتابخانه هندسه مراجعه کنید.
  • journeySharing از راه‌حل‌های حمل و نقل و لجستیک پلتفرم Google Maps پشتیبانی می‌کند.
  • localContext مکان های کلیدی مورد علاقه را در نزدیکی مکانی که شما مشخص کرده اید به کاربران نشان می دهد. برای اطلاعات بیشتر به اسناد کتابخانه زمینه محلی مراجعه کنید.
  • marker به شما امکان می دهد نشانگرهای پیشرفته بسیار قابل تنظیم و عملکرد را به نقشه های خود اضافه کنید. برای اطلاعات بیشتر به مستندات نشانگرهای پیشرفته مراجعه کنید.
  • places به برنامه شما امکان می دهد مکان هایی مانند موسسات، مکان های جغرافیایی یا نقاط دیدنی برجسته را در یک منطقه مشخص جستجو کند. برای اطلاعات بیشتر به اسناد کتابخانه Places مراجعه کنید.
  • visualization نقشه های حرارتی را برای نمایش بصری داده ها فراهم می کند. برای اطلاعات بیشتر به مستندات کتابخانه Visualization مراجعه کنید.

درخواست بوت استرپ زیر نحوه افزودن درخواست برای کتابخانه google.maps.geometry از Maps JavaScript API را به اسکریپت لودر بوت استرپ قدیمی نشان می دهد:

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