মানচিত্র জাভাস্ক্রিপ্ট API লোড করুন

এই নির্দেশিকাটি আপনাকে দেখাবে কিভাবে Maps JavaScript API লোড করবেন। এটি করার তিনটি উপায় রয়েছে:

• গতিশীল লাইব্রেরি আমদানি ব্যবহার করুন
• ডাইরেক্ট স্ক্রিপ্ট লোডিং ট্যাগ ব্যবহার করুন
• NPM js-api-loader প্যাকেজটি ব্যবহার করুন

ডায়নামিক লাইব্রেরি ইমপোর্ট ব্যবহার করুন

ডাইনামিক লাইব্রেরি ইম্পোর্ট রানটাইমে লাইব্রেরি লোড করার ক্ষমতা প্রদান করে। এটি আপনাকে লোডের সময় একসাথে সব লাইব্রেরি লোড করার পরিবর্তে, যখন আপনার প্রয়োজন হয় তখনই প্রয়োজনীয় লাইব্রেরি অনুরোধ করতে দেয়। এটি আপনার পৃষ্ঠাকে Maps JavaScript API একাধিকবার লোড হওয়া থেকেও রক্ষা করে।

আপনার অ্যাপ্লিকেশন কোডে ইনলাইন বুটস্ট্র্যাপ লোডার যোগ করে 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>

আপনি সরাসরি আপনার জাভাস্ক্রিপ্ট কোডে বুটস্ট্র্যাপ লোডার কোড যোগ করতে পারেন।

রানটাইমে লাইব্রেরি লোড করতে, await অপারেটর ব্যবহার করে একটি async ফাংশনের মধ্যে থেকে importLibrary() কল করুন। প্রয়োজনীয় ক্লাসের জন্য ভেরিয়েবল ঘোষণা করলে আপনি একটি যোগ্য পাথ (যেমন google.maps.Map ) ব্যবহার করে এড়িয়ে যেতে পারবেন, যেমনটি নিম্নলিখিত কোড উদাহরণে দেখানো হয়েছে:

let map;

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

  map = new Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

initMap();
index.js

আপনার ফাংশনটি প্রয়োজনীয় ক্লাসের জন্য কোনও ভেরিয়েবল ঘোষণা না করেও লাইব্রেরি লোড করতে পারে, যা বিশেষ করে যদি আপনি gmp-map উপাদান ব্যবহার করে একটি ম্যাপ যোগ করেন তবে কার্যকর। ভেরিয়েবল ছাড়া আপনাকে অবশ্যই যোগ্য পাথ ব্যবহার করতে হবে, উদাহরণস্বরূপ google.maps.Map :

let map;
let center =  { lat: -34.397, lng: 150.644 };

async function initMap() {
  await google.maps.importLibrary("maps");
  await google.maps.importLibrary("marker");

  map = new google.maps.Map(document.getElementById("map"), {
    center,
    zoom: 8,
    mapId: "DEMO_MAP_ID",
  });

  addMarker();
}

async function addMarker() {
  const marker = new google.maps.marker.AdvancedMarkerElement({
    map,
    position: center,
  });
}

initMap();

বিকল্পভাবে, আপনি এখানে দেখানো হিসাবে সরাসরি HTML এ লাইব্রেরিগুলি লোড করতে পারেন:

<script>
google.maps.importLibrary("maps");
google.maps.importLibrary("marker");
</script>

ডাইনামিক লাইব্রেরি লোডিং API-তে কীভাবে মাইগ্রেট করবেন তা শিখুন।

প্রয়োজনীয় পরামিতি

• key : আপনার API কী । একটি বৈধ API কী নির্দিষ্ট না করা পর্যন্ত Maps JavaScript API লোড হবে না।

ঐচ্ছিক পরামিতি

• v : লোড করার জন্য Maps JavaScript API এর সংস্করণ ।

• libraries : প্রিলোডিং শুরু করার জন্য অতিরিক্ত ম্যাপস জাভাস্ক্রিপ্ট এপিআই লাইব্রেরির একটি অ্যারে। সাধারণত নির্দিষ্ট লাইব্রেরি সেট নির্দিষ্ট করার পরামর্শ দেওয়া হয় না, তবে যারা তাদের ওয়েবসাইটে ক্যাশিং আচরণটি সূক্ষ্মভাবে টিউন করতে চান তাদের জন্য এটি উপলব্ধ। ব্যবহারের আগে প্রতিটি নির্বাচিত লাইব্রেরির জন্য google.maps.importLibrary() কল করা এখনও গুরুত্বপূর্ণ।

• language : ব্যবহারের ভাষা । এটি নিয়ন্ত্রণের নাম, কপিরাইট বিজ্ঞপ্তি, ড্রাইভিং দিকনির্দেশনা এবং নিয়ন্ত্রণ লেবেল এবং পরিষেবা অনুরোধের প্রতিক্রিয়াগুলিকে প্রভাবিত করে। সমর্থিত ভাষার তালিকা দেখুন।

• region : ব্যবহার করার জন্য অঞ্চল কোড। এটি একটি প্রদত্ত দেশ বা অঞ্চলের উপর ভিত্তি করে API এর আচরণ পরিবর্তন করে।

• authReferrerPolicy : Maps JS গ্রাহকরা ক্লাউড কনসোলে HTTP রেফারার বিধিনিষেধ কনফিগার করতে পারেন যাতে কোন URL গুলিকে একটি নির্দিষ্ট API কী ব্যবহার করার অনুমতি দেওয়া হবে তা সীমাবদ্ধ করা যায়। ডিফল্টরূপে, এই বিধিনিষেধগুলি কেবলমাত্র নির্দিষ্ট পাথগুলিকে API কী ব্যবহার করার অনুমতি দেওয়ার জন্য কনফিগার করা যেতে পারে। যদি একই ডোমেন বা অরিজিনের কোনও URL API কী ব্যবহার করতে পারে, তাহলে আপনি Maps JavaScript API থেকে অনুরোধ অনুমোদন করার সময় প্রেরিত ডেটার পরিমাণ সীমিত করার জন্য authReferrerPolicy: "origin" সেট করতে পারেন। যখন এই প্যারামিটারটি নির্দিষ্ট করা থাকে এবং Cloud Console-এ HTTP রেফারার বিধিনিষেধ সক্ষম করা থাকে, তখন Maps JavaScript API কেবল তখনই লোড করতে সক্ষম হবে যদি কোনও HTTP রেফারার বিধিনিষেধ থাকে যা বর্তমান ওয়েবসাইটের ডোমেনের সাথে মেলে এবং কোনও পাথ নির্দিষ্ট করা থাকে না।

• mapIds : মানচিত্র আইডির একটি অ্যারে। নির্দিষ্ট মানচিত্র আইডিগুলির কনফিগারেশন প্রিলোড করে। মানচিত্র আইডি ব্যবহারের জন্য এখানে মানচিত্র আইডি নির্দিষ্ট করার প্রয়োজন নেই, তবে যারা নেটওয়ার্ক কর্মক্ষমতা সূক্ষ্মভাবে সামঞ্জস্য করতে চান তাদের জন্য এটি উপলব্ধ।

• channel : প্রতি চ্যানেলের ব্যবহার ট্র্যাকিং দেখুন।

• solutionChannel : গুগল ম্যাপস প্ল্যাটফর্ম আপনাকে দ্রুত কাজ শুরু করতে সাহায্য করার জন্য বিভিন্ন ধরণের নমুনা কোড সরবরাহ করে। আমাদের আরও জটিল কোড নমুনা গ্রহণ ট্র্যাক করতে এবং সমাধানের মান উন্নত করতে, গুগল আমাদের নমুনা কোডে API কলগুলিতে solutionChannel কোয়েরি প্যারামিটার অন্তর্ভুক্ত করে।

ডাইরেক্ট স্ক্রিপ্ট লোডিং ট্যাগ ব্যবহার করুন

এই বিভাগে দেখানো হয়েছে কিভাবে ডাইরেক্ট স্ক্রিপ্ট লোডিং ট্যাগ ব্যবহার করতে হয়। যেহেতু ডাইরেক্ট স্ক্রিপ্ট ম্যাপ লোড হওয়ার সময় লাইব্রেরি লোড করে, তাই রানটাইমে স্পষ্টভাবে লাইব্রেরি অনুরোধ করার প্রয়োজনীয়তা দূর করে gmp-map উপাদান ব্যবহার করে তৈরি ম্যাপগুলিকে সহজ করে তুলতে পারে। যেহেতু স্ক্রিপ্ট লোড হওয়ার সময় ডাইরেক্ট স্ক্রিপ্ট লোডিং ট্যাগ সমস্ত অনুরোধ করা লাইব্রেরি একসাথে লোড করে, তাই কিছু অ্যাপ্লিকেশনের কর্মক্ষমতা প্রভাবিত হতে পারে। প্রতি পৃষ্ঠা লোডে শুধুমাত্র একবার ডাইরেক্ট স্ক্রিপ্ট লোডিং ট্যাগ অন্তর্ভুক্ত করুন।

একটি স্ক্রিপ্ট ট্যাগ যোগ করুন

একটি HTML ফাইলে Maps JavaScript API ইনলাইন লোড করতে, নীচে দেখানো একটি script ট্যাগ যোগ করুন।

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&callback=initMap">
</script>

সরাসরি স্ক্রিপ্ট লোডিং URL প্যারামিটার

এই বিভাগে Maps JavaScript API লোড করার সময় স্ক্রিপ্ট লোডিং URL-এর কোয়েরি স্ট্রিং-এ আপনি যে সমস্ত প্যারামিটার নির্দিষ্ট করতে পারেন সেগুলি নিয়ে আলোচনা করা হয়েছে। কিছু প্যারামিটার প্রয়োজন এবং অন্যগুলি ঐচ্ছিক। URL-এর স্ট্যান্ডার্ড অনুসারে, সমস্ত প্যারামিটার অ্যাম্পারস্যান্ড ( & ) অক্ষর ব্যবহার করে পৃথক করা হয়।

নিম্নলিখিত উদাহরণ URL-এ সমস্ত সম্ভাব্য প্যারামিটারের জন্য স্থানধারক রয়েছে:

https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY
&loading=async
&callback=FUNCTION_NAME
&v=VERSION
&libraries="LIBRARIES"
&language="LANGUAGE"
&region="REGION"
&auth_referrer_policy="AUTH_REFERRER_POLICY"
&map_ids="MAP_IDS"
&channel="CHANNEL"
&solution_channel="SOLUTION_IDENTIFIER"

নিম্নলিখিত উদাহরণ script ট্যাগের URLটি Maps JavaScript API লোড করে:

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&callback=initMap">
</script>

প্রয়োজনীয় প্যারামিটার (সরাসরি) {:.hide-from-toc}

Maps JavaScript API লোড করার সময় নিম্নলিখিত প্যারামিটারগুলি প্রয়োজন।

• key : আপনার API কী । একটি বৈধ API কী নির্দিষ্ট না করা পর্যন্ত Maps JavaScript API লোড হবে না।

ঐচ্ছিক পরামিতি (সরাসরি) {:.hide-from-toc}

Maps JavaScript API-এর একটি নির্দিষ্ট সংস্করণের অনুরোধ করতে, অতিরিক্ত লাইব্রেরি লোড করতে, আপনার মানচিত্র স্থানীয়করণ করতে বা HTTP রেফারার চেক নীতি নির্দিষ্ট করতে এই প্যারামিটারগুলি ব্যবহার করুন।

• loading : কোড লোডিং কৌশল যা Maps JavaScript API ব্যবহার করতে পারে। Maps JavaScript API সিঙ্ক্রোনাসভাবে লোড করা হয়নি এবং স্ক্রিপ্টের load ইভেন্ট দ্বারা কোনও JavaScript কোড ট্রিগার করা হয়নি তা বোঝাতে async এ সেট করুন। উন্নত কর্মক্ষমতা অর্জনের জন্য, যখনই সম্ভব এটি async এ সেট করার পরামর্শ দেওয়া হচ্ছে। (Maps JavaScript API উপলব্ধ থাকলে ক্রিয়া সম্পাদনের জন্য callback প্যারামিটার ব্যবহার করুন।) সংস্করণ 3.55 থেকে উপলব্ধ।

• callback : ম্যাপস জাভাস্ক্রিপ্ট এপিআই সম্পূর্ণরূপে লোড হওয়ার পরে কল করা একটি গ্লোবাল ফাংশনের নাম।

• v : ব্যবহারের জন্য Maps JavaScript API এর সংস্করণ ।

• libraries : লোড করার জন্য অতিরিক্ত Maps JavaScript API লাইব্রেরির একটি কমা দ্বারা পৃথক তালিকা।

• language : ব্যবহারের ভাষা । এটি নিয়ন্ত্রণের নাম, কপিরাইট বিজ্ঞপ্তি, ড্রাইভিং দিকনির্দেশনা এবং নিয়ন্ত্রণ লেবেলগুলির পাশাপাশি পরিষেবা অনুরোধের প্রতিক্রিয়াগুলিকেও প্রভাবিত করে। সমর্থিত ভাষার তালিকা দেখুন।

• region : ব্যবহার করার জন্য অঞ্চল কোড। এটি একটি প্রদত্ত দেশ বা অঞ্চলের উপর ভিত্তি করে API এর আচরণ পরিবর্তন করে।

• auth_referrer_policy : গ্রাহকরা ক্লাউড কনসোলে HTTP রেফারার বিধিনিষেধ কনফিগার করতে পারেন যাতে কোন URL গুলিকে একটি নির্দিষ্ট API কী ব্যবহার করার অনুমতি দেওয়া হবে তা সীমাবদ্ধ করা যায়। ডিফল্টরূপে, এই বিধিনিষেধগুলি কেবলমাত্র নির্দিষ্ট পাথগুলিকে একটি API কী ব্যবহার করার অনুমতি দেওয়ার জন্য কনফিগার করা যেতে পারে। যদি একই ডোমেন বা অরিজিনের কোনও URL API কী ব্যবহার করতে পারে, তাহলে আপনি Maps JavaScript API থেকে অনুরোধ অনুমোদন করার সময় প্রেরিত ডেটার পরিমাণ সীমিত করার জন্য auth_referrer_policy=origin সেট করতে পারেন। এটি 3.46 সংস্করণ থেকে শুরু করে উপলব্ধ। যখন এই প্যারামিটারটি নির্দিষ্ট করা থাকে এবং ক্লাউড কনসোলে HTTP রেফারার বিধিনিষেধ সক্ষম করা থাকে, তখন Maps JavaScript API কেবল তখনই লোড করতে সক্ষম হবে যদি কোনও HTTP রেফারার বিধিনিষেধ থাকে যা নির্দিষ্ট পাথ ছাড়াই বর্তমান ওয়েবসাইটের ডোমেনের সাথে মেলে।

• mapIds : কমা দ্বারা পৃথক করা মানচিত্র আইডিগুলির একটি তালিকা। নির্দিষ্ট মানচিত্র আইডিগুলির কনফিগারেশন প্রিলোড করার কারণ হয়। মানচিত্র আইডি ব্যবহারের জন্য এখানে মানচিত্র আইডি নির্দিষ্ট করার প্রয়োজন নেই, তবে নেটওয়ার্ক কর্মক্ষমতা সূক্ষ্মভাবে সামঞ্জস্য করতে চান এমন ডেভেলপারদের জন্য এটি উপলব্ধ।

• channel : প্রতি চ্যানেলের ব্যবহার ট্র্যাকিং দেখুন।

• solution_channel : গুগল ম্যাপস প্ল্যাটফর্ম আপনাকে দ্রুত কাজ শুরু করতে সাহায্য করার জন্য বিভিন্ন ধরণের নমুনা কোড সরবরাহ করে। আমাদের আরও জটিল কোড নমুনা গ্রহণ ট্র্যাক করতে এবং সমাধানের মান উন্নত করতে, গুগল আমাদের নমুনা কোডে API কলগুলিতে solution_channel কোয়েরি প্যারামিটার অন্তর্ভুক্ত করে।

NPM js-api-loader প্যাকেজটি ব্যবহার করুন

@googlemaps/js-api-loader প্যাকেজটি NPM প্যাকেজ ম্যানেজার ব্যবহার করে লোড করার জন্য উপলব্ধ। নিম্নলিখিত কমান্ড ব্যবহার করে এটি ইনস্টল করুন:

npm install @googlemaps/js-api-loader

এই প্যাকেজটি অ্যাপ্লিকেশনটিতে আমদানি করা যেতে পারে:

import { setOptions, importLibrary } from "@googlemaps/js-api-loader"

লোডারটি লাইব্রেরিগুলি উপলব্ধ করার জন্য প্রতিশ্রুতি ব্যবহার করে। লাইব্রেরিগুলি importLibrary() পদ্ধতিতে লোড করা হয়। নিম্নলিখিত উদাহরণটি Map ক্লাস লোড করে:

import { setOptions, importLibrary } from "@googlemaps/js-api-loader";

setOptions({
  apiKey: "YOUR_API_KEY",
  version: "weekly",
});

importLibrary("maps").then(({ Map }) => {
  new Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}).catch(e => {
  // do something
});

আপনি একটি async ফাংশনে async / await ব্যবহার করতে পারেন। এই উদাহরণে অতিরিক্ত লাইব্রেরি লোড করা হয়েছে:

import { setOptions, importLibrary } from "@googlemaps/js-api-loader";

setOptions({
  apiKey: "YOUR_API_KEY",
  version: "weekly",
});

const { Map } = await importLibrary("maps");
const { AdvancedMarkerElement } = await importLibrary("marker");
const map = new Map(document.getElementById("map"), {
  center: { lat: -34.397, lng: 150.644 },
  zoom: 8,
});
const marker = new AdvancedMarkerElement({
  map,
  position: { lat: -34.397, lng: 150.644 },
});
const { PlaceAutocompleteElement } = await importLibrary("places");
await google.maps.importLibrary("places");
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
document.body.append(placeAutocomplete);

js-api-loader বৈশিষ্ট্যযুক্ত একটি নমুনা দেখুন।

ডায়নামিক লাইব্রেরি ইমপোর্ট API-তে মাইগ্রেট করুন

এই বিভাগে আপনার ইন্টিগ্রেশনকে ডাইনামিক লাইব্রেরি ইমপোর্ট API ব্যবহারে স্থানান্তরিত করার জন্য প্রয়োজনীয় পদক্ষেপগুলি অন্তর্ভুক্ত করা হয়েছে।

মাইগ্রেশনের ধাপগুলি

প্রথমে, ডাইরেক্ট স্ক্রিপ্ট লোডিং ট্যাগটি ইনলাইন বুটস্ট্র্যাপ লোডার ট্যাগ দিয়ে প্রতিস্থাপন করুন।

আগে

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=maps&callback=initMap">
</script>

পরে

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

এরপর, আপনার অ্যাপ্লিকেশন কোড আপডেট করুন:

• তোমার initMap() ফাংশনটিকে অ্যাসিঙ্ক্রোনাস করে দাও।
• আপনার প্রয়োজনীয় লাইব্রেরিগুলি লোড এবং অ্যাক্সেস করতে importLibrary() এ কল করুন।

আগে

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

window.initMap = initMap;

পরে

let map;
// initMap is now async
async function initMap() {
    // Request libraries when needed, not in the script tag.
    const { Map } = await google.maps.importLibrary("maps");
    // Short namespaces can be used.
    map = new Map(document.getElementById("map"), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
    });
}

initMap();