আপনার অ্যাপে মানচিত্র কীভাবে যুক্ত করবেন: এমবেড, ইন্টার‌্যাক্টিভ মানচিত্র ও স্টোর লোকেটার

আপনার অ্যাপে মানচিত্র যুক্ত করতে প্রথমে ঠিক করুন আপনার কি একটি স্ট্যাটিক এমবেড (একটি স্থান, পিনসহ, যেমন "আমাদের দোকান খুঁজুন") নাকি একটি ইন্টার‌্যাক্টিভ মানচিত্র (আপনার ডেটা থেকে অনেক পিন, ফিল্টার, ক্লাস্টারিং, "আমার কাছে")। একটি স্থানের জন্য এমবেড করা মানচিত্রই সবচেয়ে দ্রুত এবং Google-এর Maps Embed API দিয়ে বিনামূল্যে। ইন্টার‌্যাক্টিভ মানচিত্রের জন্য একটি JavaScript মানচিত্র লাইব্রেরি ব্যবহার করুন — Google Maps JavaScript API, Mapbox GL JS, অথবা একটি টাইল প্রোভাইডারসহ ওপেন-সোর্স Leaflet — প্রতিটি জায়গার অক্ষাংশ ও দ্রাঘিমাংশ আপনার ডাটাবেসে রাখুন, এবং আপনার API কী নিজের ডোমেইনে সীমাবদ্ধ করুন। নিচের ভেন্ডর বিবরণ সেপ্টেম্বর ২০২৬ পর্যন্ত প্রতিটি প্রোভাইডারের নিজস্ব ডকুমেন্টেশন থেকে।

আপনার কী ধরনের মানচিত্র দরকার

বেশিরভাগ ছোট ব্যবসার সাইটের শুধু প্রথম সারিটি দরকার। ডিরেক্টরি, মার্কেটপ্লেস ও তালিকা সাইটের দরকার তৃতীয় ও চতুর্থটি।

আপনার অপশনগুলো

Google Maps Platform

Google-এর গেটিং-স্টার্টেড গাইড বলে, আপনাকে একটি বিলিং-সক্রিয় Cloud প্রজেক্ট বানাতে হবে এবং যেসব API চান তা চালু করতে হবে। এর pay-as-you-go মূল্যে Essentials SKU পাওয়া যায়, যার মধ্যে Dynamic Maps-ও আছে, মাসে ১০,০০০ ইভেন্টের বিনামূল্যের সীমা সহ, এবং Dynamic Maps-এর দাম তালিকাভুক্ত আছে প্রতি ১,০০০ ইভেন্টে $7.00 (প্রথম ভলিউম স্তরে), ওই সীমার উপরে। Maps Embed SKU অসীম ও বিনামূল্যে তালিকাভুক্ত। Google মাসিক সাবস্ক্রিপশন প্ল্যানও বিক্রি করে। বর্তমান সংখ্যার জন্য দেখুন Google Maps Platform pricing।

Mapbox

Mapbox-এর মূল্য পাতা ওয়েবে Mapbox GL JS-এর জন্য মাসে ৫০,০০০ বিনামূল্যের মানচিত্র লোড তালিকাভুক্ত করে, তারপর প্রতি ১,০০০ লোডে $5.00। দেখুন Mapbox pricing।

Leaflet ও OpenStreetMap

Leaflet নিজেকে মোবাইল-বান্ধব ইন্টার‌্যাক্টিভ মানচিত্রের জন্য একটি ওপেন-সোর্স JavaScript লাইব্রেরি বলে, প্রায় ৪২ KB JavaScript। এর মানচিত্রের ছবি (টাইল) কোথাও থেকে আসতে হয়। OpenStreetMap-এর পাবলিক টাইল সার্ভার লোভনীয়, কিন্তু টাইল ব্যবহার নীতি দৃশ্যমান উল্লেখ দাবি করে, বাল্ক ডাউনলোড নিষিদ্ধ করে, কোনো সেবার নিশ্চয়তা দেয় না, এবং বাণিজ্যিক সেবাকে সতর্ক করে যে অ্যাক্সেস প্রত্যাহার হতে পারে। প্রকৃত পণ্যের জন্য Leaflet-এর সাথে কাজ করে এমন একটি বাণিজ্যিক বা নিজে হোস্ট করা টাইল উৎস ব্যবহার করুন।

API কী: সবার জন্য দৃশ্যমান, তবু সীমাবদ্ধ

ব্রাউজারে ব্যবহৃত মানচিত্রের কী যে কেউ আপনার পেজ খুললে দেখতে পায়। এটি প্রত্যাশিত, কিন্তু মানে কেউ আপনার কী কপি করে নিজের সাইটে চালিয়ে আপনার বিলে ব্যবহার বাড়াতে পারে। Google-এর নিরাপত্তা নির্দেশিকা হলো ওয়েবসাইট (HTTP referrer) সীমাবদ্ধতা যোগ করা, যেখানে আপনার ডোমেইন তালিকাভুক্ত থাকবে, এবং API সীমাবদ্ধতা যাতে কী শুধু ব্যবহৃত API-র জন্য কাজ করে।

সার্ভার-সাইড সার্ভিসের কী — যেমন হাজারো ঠিকানার জিওকোডিং — আলাদা কী হওয়া উচিত, সার্ভার-সাইড সিক্রেটে রাখা, পেজে নয়। এছাড়া প্রদানকারীর কনসোলে বাজেট অ্যালার্ট বা কোটা সেট করুন, যাতে একটি ভুল বড় বিলে না দাঁড়ায়।

জিওকোডিং: ঠিকানাকে একবার স্থানাঙ্কে বদলান

মানচিত্র অক্ষাংশ ও দ্রাঘিমাংশ প্লট করে, ঠিকানা নয়। ঠিকানাকে স্থানাঙ্কে বদলানোকে জিওকোডিং বলে, এবং বেশিরভাগ প্রোভাইডার প্রতি অনুরোধে এর জন্য চার্জ করে। কার্যকর পদ্ধতি:

1. একটি তালিকা সেভ হলে সার্ভারে তার ঠিকানা জিওকোড করুন।
2. অক্ষাংশ ও দ্রাঘিমাংশ ডাটাবেসে সংরক্ষণ করুন।
3. মানচিত্র সংরক্ষিত স্থানাঙ্ক পড়ে; পেজ ভিউয়ে কখনো জিওকোড করে না।

জিওকোডিংয়ের ফল কতদিন সংরক্ষণ করা যায় তা প্রতিটি প্রোভাইডারের শর্তাবলিতে দেখুন; সেগুলো আলাদা।

উদাহরণ প্রম্পট

একটি একক এমবেড করা মানচিত্র:

যোগাযোগ পেজে একটি এমবেড করা Google মানচিত্র যোগ করো, যা আমাদের ঠিকানা (12 High Street, Leeds) দেখাবে, Maps Embed API ব্যবহার করে, কী থাকবে GOOGLE_MAPS_EMBED_KEY-তে। নিচে একটি "Get directions" লিংক যোগ করো। ফোনে পুরো প্রস্থে দাও এবং এটি lazy-load করো।

তালিকার একটি ইন্টার‌্যাক্টিভ মানচিত্র:

তালিকা টেবিলে অক্ষাংশ ও দ্রাঘিমাংশ যোগ করো। কোনো তালিকা তৈরি হলে বা তার ঠিকানা বদলালে, সার্ভারে GEOCODING_API_KEY-এর কী দিয়ে তার ঠিকানা জিওকোড করো এবং স্থানাঙ্ক সেভ করো। Browse পেজে Leaflet দিয়ে প্রতি তালিকার জন্য একটি মার্কারসহ একটি মানচিত্র দেখাও, মার্কার ওভারল্যাপ করলে ক্লাস্টারিং সহ। মার্কারে ক্লিক করলে শিরোনাম, দাম ও একটি লিংক দেখাবে। মানচিত্র ও তালিকা একই ফিল্টার ব্যবহার করবে।

"আমার কাছে":

একটি "Near me" বাটন যোগ করো যা ভিজিটরের অবস্থান চায় এবং ১০ কিমির মধ্যে তালিকা দেখায়, দূরত্ব অনুযায়ী সাজানো। অবস্থান অনুমতি না দিলে তাদের একটি শহর টাইপ করার সুযোগ দাও।

ধাপে ধাপে

1. উপরের টেবিল থেকে মানচিত্রের ধরন বেছে নিন।
2. প্রোভাইডার অ্যাকাউন্ট ও একটি প্রজেক্ট তৈরি করুন, এবং শুধু দরকারি API চালু করুন।
3. কী তৈরি করুন: আপনার ডোমেইনে সীমাবদ্ধ একটি ব্রাউজার কী (বানানোর সময় আপনার প্রিভিউ ডোমেইনসহ) এবং দরকার হলে জিওকোডিংয়ের জন্য একটি সার্ভার কী।
4. কী সিক্রেট হিসেবে রাখুন এবং আপনার বিল্ডারকে সেগুলো ব্যবহার করতে বলুন; ব্রাউজার কী পেজে গেলেও সেটি সীমাবদ্ধই থাকে।
5. প্রতিটি স্থানের স্থানাঙ্ক আপনার ডাটাবেসে সংরক্ষণ করুন।
6. মানচিত্র বানান: মার্কার, পপআপ, ক্লাস্টারিং, এবং একটি যুক্তিসঙ্গত ডিফল্ট জুম।
7. একটি তালিকার সাথে জোড়া দিন। শুধু মানচিত্র ফোনে ও স্ক্রিন রিডারের জন্য ব্যবহার করা কঠিন। একই ফলাফল তালিকা হিসেবেও দেখান।
8. প্রদানকারীর কনসোলে একটি বাজেট অ্যালার্ট সেট করুন।
9. প্রকাশ করে লাইভ ডোমেইনে পরীক্ষা করুন, কারণ লাইভ ডোমেইন যোগ না হওয়া পর্যন্ত রেফারার সীমাবদ্ধতা প্রায়ই মানচিত্র আটকায়।

সাধারণ ভুল

• সীমাবদ্ধ নয় এমন কী। যে কেউ নিজের সাইটে সেগুলো আবার ব্যবহার করতে পারে।
• প্রতিটি পেজ ভিউতে জিওকোডিং। ধীর ও ব্যয়বহুল; সেভ করার সময় একবার জিওকোড করুন।
• কী সীমাবদ্ধতায় লাইভ ডোমেইন ভুলে যাওয়া। প্রিভিউতে কাজ করে, প্রোডাকশনে ফাঁকা ধূসর বাক্স।
• শুধু-মানচিত্র লেআউট। তালিকা ছাড়া পিন ছোট পর্দায় কষ্টকর এবং অ্যাক্সেসযোগ্য নয়।
• ক্লাস্টারিং ছাড়া শতশত মার্কার। অপাঠ্য ও ধীর।
• উল্লেখ (attribution) না থাকা। বেশিরভাগ মানচিত্র ও টাইল প্রোভাইডার এটি চায়, লুকালে তাদের শর্ত ভাঙে।
• পেজ লোডে অবস্থান চাওয়া। শুধু যখন ব্যবহারকারী "Near me" ট্যাপ করে তখন চান।

চেকলিস্ট

• কাজের জন্য সঠিক মানচিত্রের ধরন বেছে নেওয়া হয়েছে
• ব্রাউজার কী আপনার ডোমেইন ও প্রয়োজনীয় API-তে সীমাবদ্ধ
• সার্ভার-সাইড কী সিক্রেটে রাখা
• স্থানাঙ্ক ডাটাবেসে সংরক্ষিত, একবার জিওকোড করা
• ফলাফল তালিকা হিসেবেও দেখানো
• অনেক মার্কারের জন্য ক্লাস্টারিং
• উল্লেখ দৃশ্যমান
• প্রদানকারীর সাথে বাজেট অ্যালার্ট সেট
• প্রকাশিত ডোমেইন ও ফোনে পরীক্ষা করা হয়েছে

Mythex-এ মানচিত্র যুক্ত করা

Mythex-এ বিল্ট-ইন মানচিত্র ইন্টিগ্রেশন নেই; আপনি নিজের প্রোভাইডার কী নিয়ে আসেন, এটি একটি প্রজেক্ট সিক্রেট হিসেবে যোগ করেন (অথবা এজেন্ট একটি সিক্রেট কার্ড দেখালে সেখানে পেস্ট করেন), এবং চ্যাটে মানচিত্র চান, যেমন যেকোনো API যুক্ত করা-এ বর্ণিত। স্থানাঙ্ক প্রজেক্টের ডাটাবেসে যায়। মনে রাখবেন কীর ওয়েবসাইট সীমাবদ্ধতায় প্রিভিউ ও প্রকাশিত দুটো ডোমেইনই যোগ করুন, এবং সিক্রেট বদলালে আবার প্রকাশ করুন।

মানচিত্র সাধারণত সার্চ ও তালিকার পাশে বসে: দেখুন আপনার অ্যাপে সার্চ কীভাবে যুক্ত করবেন, কীভাবে একটি ডিরেক্টরি ওয়েবসাইট বানাবেন এবং কীভাবে একটি ছোট ব্যবসার ওয়েবসাইট বানাবেন।

প্রশ্নোত্তর