ספריות

כדי לטעון את קוד ה-JavaScript עבור Maps JavaScript API, עליכם לכלול בדף סקריפט של טוען טעינה robotstrap בצורה הבאה:

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

ה-API של JavaScript במפות Google מורכב מספריות שלא נטענות עד שמבקשים אותן במפורש. פירוק רכיבים לספריות מאפשר ל-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 ב-Bootstrap (דור קודם)

אפשר להשתמש בספריות הבאות יחד עם תג הסקריפט הקודם מסוג bootrap:

בקשת האתחול הבאה מדגימה איך להוסיף בקשה לספריית google.maps.geometry של API JavaScript של מפות Google, לסקריפט של טוען האתחול מסוג Botstrap מדור קודם:

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