মাইগ্রেশন: google.load এ ম্যাপ মডিউল

২০২১ সালের ১৩ই অক্টোবর, আমরা google.load এর জন্য "Maps" মডিউল সরবরাহকারী পরিষেবাটি বন্ধ করে দেব। এর মানে হলো, ২০২১ সালের ১৩ই অক্টোবরের পর, আপনি যদি google.load এ "Maps" মডিউলটি ব্যবহার করার চেষ্টা করেন, তাহলে আপনি একটি ত্রুটি বার্তা ( মডিউল "maps" সমর্থিত নয় ) পাবেন এবং কোনো মানচিত্র লোড হবে না। এই সম্ভাব্য সমস্যা এড়াতে, আপনাকে অবশ্যই এর বিকল্পগুলোর মধ্যে একটি ব্যবহার করতে হবে।

আমাকে কী করতে হবে?

প্রথমে, google.load লোডার লোড করে এমন <script> ট্যাগটি সরিয়ে ফেলুন, তারপর google.load এর সমস্ত কল মুছে দিন। আপনি যদি অন্য কোনো কাজে গুগল লোডার ব্যবহার করেন, তাহলে লোডার <script> ট্যাগটি রেখে দিলেও চলবে।

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

• <script> ট্যাগ ব্যবহার করে ইনলাইন লোডিং
• অন্য একটি জাভাস্ক্রিপ্ট ফাইল থেকে ডাইনামিক লোডিং

গুগল লোডার ব্যবহার করে বর্তমান উদাহরণ

নিম্নলিখিত উদাহরণটি দেখায় কিভাবে গুগল লোডার বর্তমানে ম্যাপস জাভাস্ক্রিপ্ট এপিআই লোড করতে ব্যবহৃত হয় (এখানে দুটি <script> ব্লক রয়েছে):

আগে

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load("maps", "3.exp", {
    "callback": initMap,
    "key": "YOUR_KEY",
    "libraries": "places,visualization"
});
function initMap() {
  // Google Maps JS API is loaded and available
}
</script>

<script> ট্যাগ ব্যবহার করে ইনলাইন লোডিং (প্রস্তাবিত)

এই পদ্ধতি ব্যবহার করা হলে, পেজ লোড হওয়ার সাথে সাথেই ম্যাপস জাভাস্ক্রিপ্ট এপিআই লোড হয়। ইনলাইন লোডিং প্রয়োগ করতে, প্রথমে www.google.com/jsapi লোড করা <script> ট্যাগটিকে ( "before" ) ​​নিম্নলিখিত উদাহরণে দেখানো <script> ট্যাগ দিয়ে প্রতিস্থাপন করুন:

<script async src="https://maps.googleapis.com/maps/api/js?libraries=places,visualization&key=YOUR_API_KEY&v=weekly&callback=initMap">
</script>

এরপর আপনার জাভাস্ক্রিপ্ট কোড থেকে google.load ফাংশন কলটি সরিয়ে দিন, কারণ এটির আর প্রয়োজন নেই। নিচের উদাহরণটিতে একটি খালি initMap() ফাংশন দেখানো হয়েছে, যেটি Maps লাইব্রেরি সফলভাবে লোড হয়ে গেলে কল করা হয়:

<script type='text/javascript'>
function initMap() {
  // Google Maps JS API is loaded and available
}
</script>

ডকুমেন্টেশন দেখুন

অন্য একটি জাভাস্ক্রিপ্ট ফাইল থেকে ডাইনামিক লোডিং

ডাইনামিক লোডিং আপনাকে নিয়ন্ত্রণ করতে দেয় কখন ম্যাপস জাভাস্ক্রিপ্ট এপিআই লোড হবে। উদাহরণস্বরূপ, ব্যবহারকারী কোনো বোতামে ক্লিক করা বা অন্য কোনো কাজ সম্পাদন না করা পর্যন্ত আপনি ম্যাপস জাভাস্ক্রিপ্ট এপিআই লোড করার জন্য অপেক্ষা করতে পারেন। ডাইনামিক লোডিং বাস্তবায়ন করতে, প্রথমে www.google.com/jsapi ( "before" ) লোড করা <script> ট্যাগটিকে প্রোগ্রাম্যাটিকভাবে <script> ট্যাগ যোগ করার কোড দিয়ে প্রতিস্থাপন করুন, যেমনটি নিম্নলিখিত উদাহরণে দেখানো হয়েছে:

var script = document.createElement('script');
script.src =
'https://maps.googleapis.com/maps/api/js?libraries=places,visualization&key=YOUR_API_KEY&v=weekly&callback=initMap';
script.async=true;

তারপর আপনার কলব্যাক ফাংশনটি উইন্ডো অবজেক্টে এইভাবে সংযুক্ত করুন:

window.initMap = function() {
  // Google Maps JS API is loaded and available
};

অবশেষে, পেজের হেডারে <script> ট্যাগটি এইভাবে যোগ করুন:

document.head.appendChild(script);

ডকুমেন্টেশন দেখুন