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

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

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

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

গতিশীল লাইব্রেরি আমদানি রানটাইমে লাইব্রেরি লোড করার ক্ষমতা প্রদান করে। এটি আপনাকে প্রয়োজনীয় লাইব্রেরিগুলির প্রয়োজনের সময় অনুরোধ করতে দেয়, লোডের সময় একবারে না করে। এটি আপনার পৃষ্ঠাকে মানচিত্র জাভাস্ক্রিপ্ট API একাধিকবার লোড করা থেকেও রক্ষা করে৷

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

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

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

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

let map: google.maps.Map;
async function initMap(): Promise<void> {
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  map = new Map(document.getElementById("map") as HTMLElement, {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

initMap();
index.ts

দ্রষ্টব্য: TypeScript এবং Google Maps ব্যবহার করার নির্দেশিকা পড়ুন।

জাভাস্ক্রিপ্ট

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 উপাদান ব্যবহার করে একটি মানচিত্র যুক্ত করেন:

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

initMap();

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

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

ডায়নামিক লাইব্রেরি লোডিং API এ কীভাবে স্থানান্তর করতে হয় তা শিখুন।

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

• key : আপনার API কী । মানচিত্র জাভাস্ক্রিপ্ট API লোড হবে না যদি না একটি বৈধ API কী নির্দিষ্ট করা হয়।

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

• v : লোড করার জন্য মানচিত্র জাভাস্ক্রিপ্ট API-এর সংস্করণ ।

• libraries : লোড করার জন্য অতিরিক্ত মানচিত্র জাভাস্ক্রিপ্ট API লাইব্রেরিগুলির একটি কমা দ্বারা পৃথক করা তালিকা৷ লাইব্রেরিগুলির একটি নির্দিষ্ট সেট নির্দিষ্ট করা সাধারণত সুপারিশ করা হয় না, তবে বিকাশকারীদের জন্য উপলব্ধ যারা তাদের ওয়েবসাইটে ক্যাশিং আচরণকে সূক্ষ্মভাবে সুর করতে চান৷

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

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

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

• mapIds : মানচিত্রের আইডিগুলির একটি অ্যারে৷ নির্দিষ্ট মানচিত্র আইডি প্রিলোড করার জন্য কনফিগারেশন ঘটায়।

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

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

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

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

দ্রষ্টব্য: সরাসরি স্ক্রিপ্ট লোডিং ট্যাগ লোড করা শেষ হলে আপনি importLibrary কল করতে পারেন।

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

একটি 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 প্যারামিটার

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

নিম্নলিখিত উদাহরণ 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 মানচিত্র জাভাস্ক্রিপ্ট API লোড করে:

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

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

মানচিত্র জাভাস্ক্রিপ্ট API লোড করার সময় নিম্নলিখিত পরামিতিগুলির প্রয়োজন৷

• key : আপনার API কী । মানচিত্র জাভাস্ক্রিপ্ট API লোড হবে না যদি না একটি বৈধ API কী নির্দিষ্ট করা হয়।

ঐচ্ছিক পরামিতি (সরাসরি)

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

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

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

• v : ব্যবহার করার জন্য মানচিত্র জাভাস্ক্রিপ্ট API-এর সংস্করণ ।

• libraries : লোড করার জন্য অতিরিক্ত মানচিত্র জাভাস্ক্রিপ্ট API লাইব্রেরিগুলির একটি কমা দ্বারা পৃথক করা তালিকা৷

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

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

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

• mapIds : মানচিত্র আইডিগুলির একটি কমা দ্বারা পৃথক করা তালিকা৷ নির্দিষ্ট মানচিত্র আইডি প্রিলোড করার জন্য কনফিগারেশন ঘটায়।

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

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

  দ্রষ্টব্য: এই ক্যোয়ারী প্যারামিটারটি Google দ্বারা ব্যবহারের জন্য। আরও তথ্যের জন্য Google মানচিত্র প্ল্যাটফর্ম সমাধান প্যারামিটার দেখুন।

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

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

npm install @googlemaps/js-api-loader

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

import { Loader } from "@googlemaps/js-api-loader"

লোডার একটি প্রতিশ্রুতি এবং কলব্যাক ইন্টারফেস প্রকাশ করে। নিম্নলিখিত ডিফল্ট প্রতিশ্রুতি পদ্ধতি load() এর ব্যবহার প্রদর্শন করে।

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

const loader = new Loader({
  apiKey: "YOUR_API_KEY",
  version: "weekly",
  ...additionalOptions,
});

loader.load().then(async () => {
  const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
  map = new Map(document.getElementById("map") as HTMLElement, {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
});
index.ts

দ্রষ্টব্য: TypeScript এবং Google Maps ব্যবহার করার নির্দেশিকা পড়ুন।

জাভাস্ক্রিপ্ট

const loader = new Loader({
  apiKey: "YOUR_API_KEY",
  version: "weekly",
  ...additionalOptions,
});

loader.load().then(async () => {
  const { Map } = await google.maps.importLibrary("maps");

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

js-api-loader সমন্বিত একটি নমুনা দেখুন।

নিম্নলিখিত উদাহরণটি লাইব্রেরি লোড করতে loader.importLibrary() ব্যবহার করে দেখায়:

const loader = new Loader({
  apiKey: "YOUR_API_KEY",
  version: "weekly",
  ...additionalOptions,
});

loader
  .importLibrary('maps')
  .then(({Map}) => {
    new Map(document.getElementById("map"), mapOptions);
  })
  .catch((e) => {
    // do something
});

ডায়নামিক লাইব্রেরি আমদানি 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();