লাইব্রেরি

মানচিত্র জাভাস্ক্রিপ্ট 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 দ্রুত লোড (এবং পার্স) হতে পারে। আপনার প্রয়োজন অনুসারে লাইব্রেরিগুলিকে লোড করা এবং পার্স করার অতিরিক্ত ওভারহেড আপনি বহন করবেন।

একটি async ফাংশন থেকে importLibrary() কল করতে await অপারেটর ব্যবহার করে রানটাইমে অতিরিক্ত লাইব্রেরি লোড করুন। যেমন:

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

নিম্নলিখিত কোড উদাহরণ Map এবং AdvancedMarkerElement লাইব্রেরি উভয় লোডিং দেখায়:

টাইপস্ক্রিপ্ট

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

ডায়নামিক লাইব্রেরি আমদানির জন্য লাইব্রেরি

নিম্নলিখিত লাইব্রেরিগুলি ডায়নামিক লাইব্রেরি আমদানির সাথে ব্যবহারের জন্য উপলব্ধ:

বুটস্ট্র্যাপ URL এর জন্য লাইব্রেরি (উত্তরাধিকার)

নিম্নলিখিত লাইব্রেরিগুলি লিগ্যাসি বুটস্ট্র্যাপ স্ক্রিপ্ট ট্যাগের সাথে ব্যবহারের জন্য সমর্থিত:

নিম্নলিখিত বুটস্ট্র্যাপ অনুরোধটি ব্যাখ্যা করে কিভাবে ম্যাপ জাভাস্ক্রিপ্ট এপিআই-এর google.maps.geometry লাইব্রেরির জন্য লিগ্যাসি বুটস্ট্র্যাপ লোডার স্ক্রিপ্টে একটি অনুরোধ যুক্ত করতে হয়:

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