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

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

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

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

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

নিম্নলিখিত কোড স্নিপেটে দেখানো অনুযায়ী, আপনার অ্যাপ্লিকেশন কোডে ইনলাইন বুটস্ট্র্যাপ লোডার যোগ করে ম্যাপস জাভাস্ক্রিপ্ট এপিআই লোড করুন:

<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;
async function initMap() {
    const { Map, RenderingType } = (await google.maps.importLibrary('maps'));
    map = new Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
        renderingType: RenderingType.VECTOR,
    });
}
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>

ডাইনামিক লাইব্রেরি লোডিং এপিআই-তে কীভাবে মাইগ্রেট করতে হয় তা জানুন।

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

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

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

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

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

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

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

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

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

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

• internalUsageAttributionIds : ব্যবহারের অ্যাট্রিবিউশন আইডিগুলির একটি অ্যারে যা Google-কে বুঝতে সাহায্য করে কোন লাইব্রেরি এবং স্যাম্পলগুলি ডেভেলপারদের জন্য সহায়ক, যেমন একটি মার্কার ক্লাস্টারিং লাইব্রেরির ব্যবহার। ব্যবহারের অ্যাট্রিবিউশন আইডি পাঠানো বন্ধ করতে, এই প্রপার্টিটি ডিলিট করা বা এর ভ্যালু একটি খালি অ্যারে ( [] ) সেট করা নিরাপদ। শুধুমাত্র অনন্য ভ্যালুগুলিই পাঠানো হবে। আরও তথ্যের জন্য Google Maps Platform solutions প্যারামিটারটি দেখুন।

দ্রষ্টব্য: solutionChannel প্যারামিটারটি এখনও বৈধ, তবে এটি ব্যবহার করার পরামর্শ দেওয়া হয় না। এর পরিবর্তে internalUsageAttributionIds ব্যবহার করুন।

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

এই বিভাগে ডাইরেক্ট স্ক্রিপ্ট লোডিং ট্যাগ কীভাবে ব্যবহার করতে হয় তা দেখানো হয়েছে। যেহেতু ডাইরেক্ট স্ক্রিপ্ট ম্যাপ লোড হওয়ার সময় লাইব্রেরিগুলো লোড করে, তাই এটি রানটাইমে লাইব্রেরিগুলোকে স্পষ্টভাবে অনুরোধ করার প্রয়োজনীয়তা দূর করে 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-টিতে সমস্ত সম্ভাব্য প্যারামিটারের জন্য প্লেসহোল্ডার রয়েছে:

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 : আপনার এপিআই কী । একটি বৈধ এপিআই কী নির্দিষ্ট না করা হলে ম্যাপস জাভাস্ক্রিপ্ট এপিআই লোড হবে না।

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

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

• loading : এটি হলো সেই কোড লোডিং কৌশল যা ম্যাপস জাভাস্ক্রিপ্ট এপিআই ব্যবহার করতে পারে। ম্যাপস জাভাস্ক্রিপ্ট এপিআই সিনক্রোনাসভাবে লোড হয়নি এবং স্ক্রিপ্টের load ইভেন্টের মাধ্যমে কোনো জাভাস্ক্রিপ্ট কোড ট্রিগার হবে না, তা বোঝাতে এটিকে async এ সেট করুন। উন্নত পারফরম্যান্সের জন্য, যখনই সম্ভব এটিকে async এ সেট করার জন্য জোরালোভাবে সুপারিশ করা হয়। (ম্যাপস জাভাস্ক্রিপ্ট এপিআই উপলব্ধ হলে অ্যাকশন সম্পাদন করার জন্য এর পরিবর্তে callback ' প্যারামিটারটি ব্যবহার করুন।) সংস্করণ ৩.৫৫ থেকে উপলব্ধ।

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

• v : ম্যাপস জাভাস্ক্রিপ্ট এপিআই-এর যে সংস্করণটি ব্যবহার করতে হবে।

• libraries : লোড করার জন্য অতিরিক্ত ম্যাপস জাভাস্ক্রিপ্ট এপিআই লাইব্রেরিগুলোর একটি কমা-দ্বারা-বিভক্ত তালিকা।

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

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

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

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

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

• internal_usage_attribution_ids : ব্যবহারের অ্যাট্রিবিউশন আইডিগুলোর একটি কমা-দ্বারা-বিভক্ত তালিকা, যা গুগলকে বুঝতে সাহায্য করে কোন লাইব্রেরি এবং স্যাম্পলগুলো ডেভেলপারদের জন্য সহায়ক, যেমন একটি মার্কার ক্লাস্টারিং লাইব্রেরির ব্যবহার। ব্যবহারের অ্যাট্রিবিউশন আইডি পাঠানো বন্ধ করতে, এই প্রপার্টিটি ডিলিট করা বা এর মান একটি খালি স্ট্রিং দিয়ে প্রতিস্থাপন করা নিরাপদ। শুধুমাত্র অনন্য মানগুলোই পাঠানো হবে। আরও তথ্যের জন্য Google Maps Platform solutions প্যারামিটারটি দেখুন।

দ্রষ্টব্য: solution_channel প্যারামিটারটি এখনও বৈধ, তবে এটি ব্যবহার করার পরামর্শ দেওয়া হয় না। এর পরিবর্তে internal_usage_attribution_ids ব্যবহার করুন।

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

টিপ: v2.0.0 রিলিজটি একটি বড় ধরনের রিফ্যাক্টর, যা পুরোনো Loader ক্লাসটিকে setOptions() এবং importLibrary() —এই দুটি ফাংশন সম্বলিত একটি API দ্বারা প্রতিস্থাপন করেছে। এই পরিবর্তনের ফলে আপনি প্রয়োজন অনুযায়ী স্বতন্ত্র Maps API লাইব্রেরিগুলো ডাইনামিকভাবে লোড করার সুবিধা পাবেন, যা ফিচার ডাউনলোড স্থগিত রেখে পেজের প্রাথমিক পারফরম্যান্স উন্নত করে।

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

npm install @googlemaps/js-api-loader

এখানে দেখানো পদ্ধতি অনুযায়ী প্যাকেজটি ইম্পোর্ট করুন:

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

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

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

// Import the needed libraries.
import { setOptions, importLibrary } from '@googlemaps/js-api-loader';

const API_KEY = 'AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8';

async function initMap(): Promise<void> {
    // Set loader options.
    setOptions({
        key: API_KEY,
        v: 'weekly',
    });

    // Load the Maps library.
    const { Map } = (await importLibrary('maps'));

    // Set map options.
    const mapOptions = {
        center: { lat: 48.8566, lng: 2.3522 },
        zoom: 3,
    };

    // Declare the map.
    const map = new Map(
        document.getElementById('map') as HTMLElement,
        mapOptions
    );
}

initMap();
index.ts

দ্রষ্টব্য: টাইপস্ক্রিপ্ট এবং গুগল ম্যাপস ব্যবহারের নির্দেশিকাটি পড়ুন।

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

// Import the needed libraries.
import { setOptions, importLibrary } from '@googlemaps/js-api-loader';
const API_KEY = 'AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8';
async function initMap() {
    // Set loader options.
    setOptions({
        key: API_KEY,
        v: 'weekly',
    });
    // Load the Maps library.
    const { Map } = (await importLibrary('maps'));
    // Set map options.
    const mapOptions = {
        center: { lat: 48.8566, lng: 2.3522 },
        zoom: 3,
    };
    // Declare the map.
    const map = new Map(document.getElementById('map'), mapOptions);
}
initMap();
index.js

সম্পূর্ণ উদাহরণ কোডটি দেখুন।

ডাইনামিক লাইব্রেরি ইমপোর্ট এপিআই-তে স্থানান্তরিত করুন

এই বিভাগে আপনার ইন্টিগ্রেশনকে ডাইনামিক লাইব্রেরি ইমপোর্ট এপিআই ব্যবহার করার জন্য মাইগ্রেট করতে প্রয়োজনীয় ধাপগুলো আলোচনা করা হয়েছে।

অভিবাসনের পদক্ষেপ

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

আগে

<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();