শিরোনাম: আপনার ওয়েবসাইটে Google Maps API সেটআপ করুন: একটি ধাপে ধাপে নির্দেশিকা

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

কেন Google Maps API?

Google Maps API ব্যবহার করে আপনি আপনার ওয়েবসাইটে কাস্টম ম্যাপ, লোকেশন-ভিত্তিক পরিষেবা, রুট প্ল্যানিং, স্থান অনুসন্ধান এবং আরও অনেক কিছু যুক্ত করতে পারবেন। এটি ডেলিভারি সার্ভিস, ই-কমার্স সাইট, ট্র্যাভেল ব্লগ বা যেকোনো লোকেশন-ভিত্তিক অ্যাপ্লিকেশনের জন্য অপরিহার্য।

প্রয়োজনীয় পূর্বশর্ত:

• একটি Google অ্যাকাউন্ট
• একটি ওয়েবসাইট অথবা অ্যাপ্লিকেশন যেখানে আপনি ম্যাপ ইন্টিগ্রেট করতে চান।
• আপনার ওয়েব সার্ভারের পাবলিক IP অ্যাড্রেস (যদি সার্ভার-সাইড API Key ব্যবহার করেন)।

---

ধাপ ১: Google Cloud Console-এ প্রজেক্ট তৈরি বা নির্বাচন করুন

Google Maps API ব্যবহার করার জন্য আপনার একটি Google Cloud প্রজেক্ট প্রয়োজন।

১. প্রথমে Google Cloud Console-এ যান: https://console.cloud.google.com/ ২. আপনার যদি একটি বিদ্যমান প্রজেক্ট থাকে (যেমন ‘Dmagix’), তাহলে সেটি নির্বাচন করুন। যদি না থাকে, তাহলে একটি নতুন প্রজেক্ট তৈরি করুন। স্ক্রিনশট অনুযায়ী, আপনার একটি প্রজেক্ট আছে তাই এই ধাপটি এড়িয়ে যেতে পারেন।

---

ধাপ ২: প্রয়োজনীয় Google Maps APIs এনাবল করুন

API Key তৈরি করার আগে আপনার প্রজেক্টে প্রয়োজনীয় Maps API গুলো এনাবল করা আছে কিনা তা নিশ্চিত করুন।

১. Google Cloud Console-এর বাম পাশের মেনুতে “APIs & Services” > “Library” তে ক্লিক করুন। ২. সার্চ বারে নিম্নলিখিত API গুলো খুঁজে বের করে ‘Enable’ করুন (যদি এনাবল করা না থাকে): * Maps JavaScript API: ওয়েবসাইটে ম্যাপ ডিসপ্লে করার জন্য। * Places API: স্থান সংক্রান্ত তথ্য (যেমন – ঠিকানা, ব্যবসা) খোঁজার জন্য। * Geocoding API: ঠিকানা থেকে স্থানাঙ্ক (Lat/Lng) অথবা স্থানাঙ্ক থেকে ঠিকানা (Reverse Geocoding) পাওয়ার জন্য। 

---

ধাপ ৩: দুটি API Key তৈরি করুন (ক্লায়েন্ট এবং সার্ভারের জন্য)

আপনার ওয়েবসাইটের ফ্রন্টএন্ড এবং ব্যাকএন্ডের জন্য দুটি ভিন্ন API Key তৈরি করা নিরাপদ এবং সুনির্দিষ্ট নিয়ন্ত্রণের জন্য সুপারিশ করা হয়।

১. বাম পাশের মেনুতে “APIs & Services” > “Credentials” এ ক্লিক করুন। ২. উপরে “+ Create credentials” বাটনে ক্লিক করে ড্রপডাউন মেনু থেকে “API key” নির্বাচন করুন। এটি আপনার প্রথম API Key তৈরি করবে।

---

ধাপ ৪: প্রথম API Key রেস্ট্রিক্ট করুন (ক্লায়েন্ট-সাইডের জন্য)

এই API Key টি আপনার ওয়েবসাইটের ফ্রন্টএন্ডে (ব্রাউজারে) ম্যাপ প্রদর্শনের জন্য ব্যবহৃত হবে।

১. নতুন তৈরি হওয়া API Key-এর পপ-আপে “Edit API key” লিঙ্কে ক্লিক করুন। (যদি পপ-আপ বন্ধ হয়ে যায়, তাহলে “Credentials” পেজে ফিরে এসে নতুন API Key এর পাশের পেন্সিল আইকনে ক্লিক করুন)। আপনি চাইলে API Key এর একটি নাম দিতে পারেন, যেমন “Client-Side Map Key”।

২. Application restrictions: * “Websites” রেডিও বাটনটি নির্বাচন করুন। * “Website restrictions” এরিয়াতে আপনার ওয়েবসাইটের ডোমেইন যোগ করুন (যেমন: https://dmagix.com/*)। * ব্যবহার করা হয় যাতে আপনার ডোমেইনের যেকোনো সাবডোমেইন এবং যেকোনো পাথের জন্য API Key কাজ করে। * URL টি লেখার পর “+ Add” বাটনে ক্লিক করুন।

৩. API restrictions: * “Restrict key” রেডিও বাটনটি নির্বাচন করুন। * “Select APIs” ড্রপডাউন মেনুতে ক্লিক করুন। * এখানে “Maps JavaScript API”, “Places API”, এবং “Geocoding API” নির্বাচন করুন। * নির্বাচন করার পর “OK” বাটনে ক্লিক করুন।

৪. সবশেষে, পৃষ্ঠার নিচে “Save” বাটনে ক্লিক করুন।

---

ধাপ ৫: দ্বিতীয় API Key তৈরি এবং রেস্ট্রিক্ট করুন (সার্ভার-সাইডের জন্য)

এই API Key টি আপনার সার্ভারে Places API এর মতো ব্যাকএন্ড কল করার জন্য ব্যবহৃত হবে।

১. আবার “Credentials” পেজে ফিরে আসুন। ২. উপরে “+ Create credentials” বাটনে ক্লিক করে ড্রপডাউন মেনু থেকে “API key” নির্বাচন করুন। এটি আপনার দ্বিতীয় API Key তৈরি করবে। ৩. নতুন তৈরি হওয়া API Key-এর পপ-আপে “Edit API key” লিঙ্কে ক্লিক করুন। আপনি চাইলে API Key এর একটি নাম দিতে পারেন, যেমন “Server-Side Map Key”।

৪. Application restrictions: * “IP addresses” রেডিও বাটনটি নির্বাচন করুন। * “IP address restrictions” এরিয়াতে আপনার সার্ভারের পাবলিক IP অ্যাড্রেস যোগ করুন (আপনার ক্ষেত্রে 103.163.247.115)। * IP অ্যাড্রেস লেখার পর “+ Add” বাটনে ক্লিক করুন।

৫. API restrictions: * “Restrict key” রেডিও বাটনটি নির্বাচন করুন। * “Select APIs” ড্রপডাউন মেনুতে ক্লিক করুন। * এখানে “Places API” এবং প্রয়োজন হলে “Geocoding API” নির্বাচন করুন। * নির্বাচন করার পর “OK” বাটনে ক্লিক করুন।

৬. সবশেষে, পৃষ্ঠার নিচে “Save” বাটনে ক্লিক করুন।

---

ধাপ ৬: আপনার ওয়েবসাইটের অ্যাডমিন প্যানেলে API Key গুলো যোগ করুন

এখন আপনার কাছে দুটি সুরক্ষিত API Key আছে।

১. Google Cloud Console-এর “Credentials” পেজে ফিরে আসুন। ২. আপনার ক্লায়েন্ট-সাইড API Key (যেটি “HTTP referrers” দ্বারা রেস্ট্রিক্ট করা) এর পাশের “Show key” তে ক্লিক করে API Key টি কপি করুন। ৩. আপনার ওয়েবসাইটের অ্যাডমিন প্যানেলে (যেখানে Google Map API সেটআপ করার ফিল্ড আছে) যান। “Google Map API” সেকশনের অধীনে “Map api key (Client)” ফিল্ডে এই কপি করা API Key টি পেস্ট করুন। ৪. আবার Google Cloud Console-এ ফিরে আসুন। ৫. আপনার সার্ভার-সাইড API Key (যেটি “IP addresses” দ্বারা রেস্ট্রিক্ট করা) এর পাশের “Show key” তে ক্লিক করে API Key টি কপি করুন। ৬. আপনার অ্যাডমিন প্যানেলে “Map api key (Server)” ফিল্ডে এই কপি করা API Key টি পেস্ট করুন।

---

ধাপ ৭: ম্যাপ কার্যকারিতা পরীক্ষা এবং সেভ করুন

১. আপনার অ্যাডমিন প্যানেলে “Test Map View” বাটনে ক্লিক করে দেখুন ম্যাপ সঠিকভাবে লোড হচ্ছে কিনা। যদি সবকিছু ঠিকঠাক থাকে, আপনি ম্যাপটি দেখতে পাবেন। ২. ম্যাপ সঠিকভাবে দেখা গেলে, “Save information” বাটনে ক্লিক করে আপনার সেটিংসগুলো সংরক্ষণ করুন।

---

যদি কোনো সমস্যা হয়:

• ম্যাপ লোড না হলে: Google Cloud Console-এর “APIs & Services” > “Dashboard” এবং “Credentials” অংশে কোনো এরর আছে কিনা তা পরীক্ষা করুন।
• ম্যাপে ক্লিক করলে ঠিকানা পূরণ না হলে: নিশ্চিত করুন যে “Places API” এবং “Geocoding API” উভয়ই সংশ্লিষ্ট API Keys (বিশেষত ক্লায়েন্ট-সাইড কী) এবং প্রজেক্টে এনাবল করা আছে। যদি এর পরেও কাজ না করে, তাহলে এটি আপনার ওয়েবসাইটের কোডিং বা থিম/প্লাগইনের সমস্যা হতে পারে, যার জন্য একজন ডেভেলপারকে কোড পরীক্ষা করতে হতে পারে।
• আন-অঅথরাইজড ব্যবহার: সবসময় আপনার API Key গুলো সঠিকভাবে রেস্ট্রিক্ট করুন যাতে অপ্রত্যাশিত বিলিং বা অপব্যবহার এড়ানো যায়।

এই ধাপে ধাপে নির্দেশিকা অনুসরণ করে, আপনি সফলভাবে আপনার ওয়েবসাইটে Google Maps API ইন্টিগ্রেট করতে পারবেন এবং আপনার ব্যবহারকারীদের জন্য একটি উন্নত লোকেশন-ভিত্তিক অভিজ্ঞতা প্রদান করতে পারবেন। শুভকামনা!