পণ্য লোকেটার - বাস্তবায়ন গাইড

সংক্ষিপ্ত বিবরণ

ওয়েব আইওএস এপিআই

গুগল ম্যাপস প্ল্যাটফর্ম ওয়েব (JS, TS), অ্যান্ড্রয়েড এবং আইওএস-এর জন্য উপলব্ধ। এটি স্থান, দিকনির্দেশনা এবং দূরত্ব সম্পর্কিত তথ্য পাওয়ার জন্য ওয়েব সার্ভিস এপিআই-ও প্রদান করে। এই নির্দেশিকার নমুনাগুলো একটি প্ল্যাটফর্মের জন্য লেখা হয়েছে, তবে অন্যান্য প্ল্যাটফর্মে বাস্তবায়নের জন্য ডকুমেন্টেশনের লিঙ্ক দেওয়া হয়েছে।

যখন আপনার ব্যবহারকারীরা অনলাইনে আপনার পণ্যগুলো দেখেন, তখন তারা তাদের অর্ডারটি পাওয়ার জন্য সেরা এবং সবচেয়ে সুবিধাজনক উপায়টি খুঁজে পেতে চান। চমৎকার প্রোডাক্ট লোকেটর ইউজার এক্সপেরিয়েন্স তৈরি করার জন্য, গুগল ম্যাপস প্ল্যাটফর্ম এপিআই-গুলোর সর্বোত্তম সমন্বয় হিসেবে গুগল তার প্রোডাক্ট লোকেটর ইমপ্লিমেন্টেশন গাইড এবং কাস্টমাইজেশন টিপস-এর সুপারিশ করে।

এই বাস্তবায়ন নির্দেশিকা অনুসরণ করে, আপনি গ্রাহকদের আপনার পণ্য খুঁজে পেতে প্রয়োজনীয় বিস্তারিত তথ্য দেখতে সাহায্য করতে পারেন এবং তারা গাড়ি, সাইকেল, হেঁটে বা গণপরিবহনে যেভাবেই ভ্রমণ করুক না কেন, তাদের কাঙ্ক্ষিত পণ্যটি যে দোকানে রয়েছে, সেখানে যাওয়ার দিকনির্দেশনাও দিতে পারেন।

স্থাপত্য নকশা (বড় করে দেখতে ক্লিক করুন)

এপিআই সক্ষম করুন

প্রোডাক্ট লোকেটর প্রয়োগ করতে, আপনাকে গুগল ক্লাউড কনসোলে নিম্নলিখিত এপিআইগুলো সক্রিয় করতে হবে। নিম্নলিখিত হাইপারলিঙ্কগুলো আপনাকে আপনার নির্বাচিত প্রকল্পের জন্য প্রতিটি এপিআই সক্রিয় করতে গুগল ক্লাউড কনসোলে নিয়ে যাবে:

• মানচিত্র জাভাস্ক্রিপ্ট এপিআই
• স্থান এপিআই (নতুন)
• জিওকোডিং এপিআই
• রাউটস এপিআই

সেটআপ সম্পর্কে আরও তথ্যের জন্য, গুগল ম্যাপস প্ল্যাটফর্ম দিয়ে শুরু করা দেখুন।

বাস্তবায়ন নির্দেশিকা বিভাগ

এখানে নিম্নলিখিত বাস্তবায়ন এবং কাস্টমাইজেশনগুলো আলোচনা করা হয়েছে:

• আইকনটি একটি মূল বাস্তবায়ন ধাপ।
• আইকনটি একটি ঐচ্ছিক কিন্তু সমাধানটিকে আরও উন্নত করার জন্য প্রস্তাবিত কাস্টমাইজেশন।

	স্টোরের অবস্থানগুলিকে গুগল ম্যাপস প্ল্যাটফর্মের স্থানগুলির সাথে সংযুক্ত করুন	গুগল ম্যাপস প্ল্যাটফর্মে কোনো স্থানের সাথে দোকানের অবস্থান মেলান।
	ব্যবহারকারীর অবস্থান শনাক্ত করুন	সকল প্ল্যাটফর্মে ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে এবং ন্যূনতম কীস্ট্রোকের মাধ্যমে ঠিকানার নির্ভুলতা বাড়াতে টাইপ-অ্যাজ-ইউ-গো কার্যকারিতা যোগ করুন।
	নিকটতম দোকানগুলি চিহ্নিত করুন	একাধিক উৎস ও গন্তব্যের জন্য ভ্রমণের দূরত্ব এবং সময় গণনা করুন, যেখানে ঐচ্ছিকভাবে হাঁটা, গাড়ি চালানো, গণপরিবহন বা সাইকেল চালানোর মতো বিভিন্ন ধরনের পরিবহন ব্যবস্থা উল্লেখ করা যেতে পারে।
	দোকানের তথ্য প্রদর্শন করুন	আপনার স্টোরগুলোতে তথ্যসমৃদ্ধ বিবরণ প্রদর্শন করুন, যাতে ব্যবহারকারীরা আরও সহজে সেগুলোতে যেতে পারেন।
	নেভিগেশন দিকনির্দেশনা প্রদান করুন	হাঁটা, গাড়ি চালানো, সাইকেল চালানো এবং গণপরিবহনের মতো বিভিন্ন ধরনের পরিবহন ব্যবহার করে উৎস থেকে গন্তব্যে যাওয়ার দিকনির্দেশনার তথ্য পান।
	মোবাইলে দিকনির্দেশনা পাঠান	আপনার ওয়েবপেজে দিকনির্দেশনা দেখানোর পাশাপাশি, আপনি চলতে চলতে গুগল ম্যাপস ব্যবহার করে পথ খুঁজে নেওয়ার জন্য ব্যবহারকারীর ফোনেও দিকনির্দেশনা পাঠাতে পারেন।
	ইন্টারেক্টিভ মানচিত্রে আপনার অবস্থানগুলি দেখান	আপনার অবস্থানগুলোকে সুস্পষ্টভাবে তুলে ধরতে নিজস্ব ম্যাপ মার্কার তৈরি করুন এবং আপনার ব্র্যান্ডের রঙের সাথে মিলিয়ে ম্যাপটিকে স্টাইল করুন। ব্যবহারকারীদের সহজে দিক নির্ণয়ে সাহায্য করার জন্য আপনার ম্যাপে নির্দিষ্ট গুরুত্বপূর্ণ স্থান (POI) প্রদর্শন (বা গোপন) করুন এবং ম্যাপে অতিরিক্ত ভিড় এড়াতে POI-এর ঘনত্ব নিয়ন্ত্রণ করুন।
	কাস্টম অবস্থানের ডেটা স্থানের বিবরণের সাথে একত্রিত করুন	ব্যবহারকারীদের সিদ্ধান্ত গ্রহণের জন্য একটি সমৃদ্ধ ডেটাসেট দিতে, আপনার নিজস্ব অবস্থানের বিবরণের সাথে স্থানের বিবরণ (Place Details) একত্রিত করুন।

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

স্টোরের অবস্থানগুলিকে গুগল ম্যাপস প্ল্যাটফর্মের স্থানগুলির সাথে সংযুক্ত করুন

স্থান আইডি সংগ্রহ করুন

এই উদাহরণে ব্যবহৃত হয়েছে: প্লেসেস এপিআই (নতুন)

এছাড়াও উপলব্ধ: জাভাস্ক্রিপ্ট

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

নিচে গুগল লন্ডন অফিসের স্থান আইডি অনুরোধ করার একটি উদাহরণ দেখানো হলো:

curl -X POST -d '{
  "textQuery" : "Google London"
}' \
-H 'Content-Type: application/json' \
-H 'X-Goog-Api-Key: YOUR_API_KEY' \
-H 'X-Goog-FieldMask: places.id' \
'https://places.googleapis.com/v1/places:searchText'

আপনি এই প্লেস আইডিটি আপনার স্টোরের অন্যান্য ডেটার সাথে ডাটাবেসে সংরক্ষণ করতে পারেন এবং স্টোরটি সম্পর্কে তথ্য অনুরোধ করার একটি কার্যকর উপায় হিসেবে এটি ব্যবহার করতে পারেন। প্লেস আইডি ব্যবহার করে জিওকোড করা, স্থানের বিবরণ পুনরুদ্ধার করা এবং সেই স্থানে যাওয়ার দিকনির্দেশনা অনুরোধ করার জন্য নিম্নলিখিত নির্দেশাবলী দেওয়া হলো।

আপনার অবস্থানগুলি জিওকোড করুন

এই উদাহরণে ব্যবহৃত হয়েছে: জিওকোডিং এপিআই

এছাড়াও উপলব্ধ: জাভাস্ক্রিপ্ট

আপনার স্টোরের ডেটাবেসে যদি রাস্তার ঠিকানা থাকে কিন্তু ভৌগোলিক স্থানাঙ্ক না থাকে, তাহলে আপনার গ্রাহকের সবচেয়ে কাছের স্টোরগুলো গণনা করার উদ্দেশ্যে সেই ঠিকানার অক্ষাংশ এবং দ্রাঘিমাংশ পেতে জিওকোডিং এপিআই (Geocoding API) ব্যবহার করুন। আপনি সার্ভার সাইডে স্টোরটিকে জিওকোড করতে পারেন, অক্ষাংশ এবং দ্রাঘিমাংশ আপনার ডেটাবেসে সংরক্ষণ করতে পারেন এবং প্রতি ৩০ দিন অন্তর তা রিফ্রেশ করতে পারেন ।

গুগল লন্ডন অফিসের জন্য প্রাপ্ত প্লেস আইডি-র অক্ষাংশ ও দ্রাঘিমাংশ বের করতে জিওকোডিং এপিআই ব্যবহারের একটি উদাহরণ নিচে দেওয়া হলো:

```html
https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU&key=YOUR_API_KEY&solution_channel=GMP_guides_productlocator_v1_a
```

ব্যবহারকারীর অবস্থান শনাক্ত করুন

এই উদাহরণটি ব্যবহার করে: Maps JavaScript API-তে Autocomplete স্থাপন করা।

এছাড়াও উপলব্ধ: অ্যান্ড্রয়েড | আইওএস

প্রোডাক্ট লোকেটরের একটি মূল উপাদান হলো আপনার ব্যবহারকারীর শুরুর অবস্থান শনাক্ত করা। ব্যবহারকারীকে তার শুরুর অবস্থান নির্দিষ্ট করার জন্য আপনি দুটি বিকল্প দিতে পারেন: তার অনুসন্ধানের উৎস টাইপ করে জানানো, অথবা ওয়েব ব্রাউজার জিওলোকেশন বা মোবাইল লোকেশন পরিষেবা ব্যবহারের অনুমতি দেওয়া।

অটোকমপ্লিট ব্যবহার করে টাইপ করা এন্ট্রিগুলি পরিচালনা করুন।

আজকের ব্যবহারকারীরা গুগল ম্যাপসের কনজিউমার ভার্সনের অটোকমপ্লিট টাইপ-এহেড কার্যকারিতায় অভ্যস্ত। মোবাইল ডিভাইস এবং ওয়েবে গুগল ম্যাপস প্ল্যাটফর্ম প্লেসেস লাইব্রেরি ব্যবহার করে এই কার্যকারিতাটি যেকোনো অ্যাপ্লিকেশনে ইন্টিগ্রেট করা যায়। যখন কোনো ব্যবহারকারী একটি ঠিকানা টাইপ করেন, তখন অটোকমপ্লিট উইজেট ব্যবহারের মাধ্যমে বাকি অংশ পূরণ করে দেয়। এছাড়াও আপনি সরাসরি প্লেস অটোকমপ্লিট ডেটা এপিআই (Place Autocomplete Data API) ব্যবহার করে আপনার নিজস্ব অটোকমপ্লিট কার্যকারিতা প্রদান করতে পারেন।

ঠিকানা স্বয়ংক্রিয়ভাবে পূরণ করার কার্যকারিতা (বড় করে দেখতে ক্লিক করুন)

নিচের উদাহরণে, Maps JavaScript API স্ক্রিপ্ট URL-এ libraries=places,marker প্যারামিটারটি যোগ করে আপনার সাইটে Places এবং Marker লাইব্রেরিগুলো যুক্ত করুন।

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places,marker&callback=initMap&solution_channel=GMP_guides_productlocator_v1_a" defer></script>

এরপরে, আপনার পেজে একটি কন্টেইনার এলিমেন্ট যোগ করুন যেখানে PlaceAutocompleteElement উইজেটটি যুক্ত করা হবে:

<div id="autocomplete-container"></div>

অবশেষে, PlaceAutocompleteElement উইজেটটি ইনিশিয়ালাইজ করুন এবং এটিকে কন্টেইনারে যুক্ত করুন। includedPrimaryTypes: ["geocode"] দিয়ে Place Autocomplete প্রেডিকশনগুলোকে সীমাবদ্ধ করলে উইজেটটি রাস্তার ঠিকানা, এলাকা, শহর এবং জিপ কোড গ্রহণ করার জন্য কনফিগার হয়, ফলে ব্যবহারকারীরা তাদের উৎস বর্ণনা করার জন্য যেকোনো মাত্রার সুনির্দিষ্টতা ইনপুট করতে পারে। যখন একজন ব্যবহারকারী একটি প্রেডিকশন নির্বাচন করেন, তখন gmp-select ইভেন্টটি ফায়ার হয় এবং আপনি ব্যবহারকারীর উৎসের অক্ষাংশ ও দ্রাঘিমাংশ সম্বলিত location ফিল্ডটি অনুরোধ করার জন্য place.fetchFields() কল করতে পারেন। আপনার লোকেশনগুলোর সাথে উৎসের সম্পর্ক নির্দেশ করতে আপনি এই ম্যাপ কোঅর্ডিনেটগুলো ব্যবহার করবেন।

// Create the PlaceAutocompleteElement, restricting predictions to
// geographical location types in the United Kingdom.
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement({
  includedPrimaryTypes: ["geocode"],
  includedRegionCodes: ["gb"],
});
placeAutocomplete.placeholder = "Enter starting address, city, or zip code";
document.getElementById("autocomplete-container").appendChild(placeAutocomplete);

// When the user selects an address from the drop-down,
// fetch the place details and search for the nearest stores.
placeAutocomplete.addEventListener("gmp-select", async ({ placePrediction }) => {
  const place = placePrediction.toPlace();
  await place.fetchFields({
    fields: ["id", "location", "formattedAddress"],
  });
  searchFromOrigin(place);
});
}

এই উদাহরণে, ব্যবহারকারী ঠিকানা নির্বাচন করার সাথে সাথে searchFromOrigin() ফাংশনটি চালু হয়। এটি মিলে যাওয়া ফলাফলের অবস্থান, যা ব্যবহারকারীর অবস্থান, তা গ্রহণ করে এবং তারপর সেই স্থানাঙ্ককে মূলবিন্দু ধরে নিকটতম দোকানগুলো অনুসন্ধান করে, যেমনটি 'নিকটতম দোকানগুলো শনাক্ত করুন' অংশে আলোচনা করা হয়েছে।

অবস্থানের বিকল্পগুলি দেখুন (বড় করে দেখতে ক্লিক করুন)

আপনার অ্যাপে প্লেস অটোকমপ্লিট যোগ করার ভিডিও টিউটোরিয়াল দেখতে এটি প্রসারিত করুন:

ওয়েবসাইট

অ্যান্ড্রয়েড অ্যাপস

iOS অ্যাপস

ব্রাউজার ভূ-অবস্থান ব্যবহার করুন

HTML5 ব্রাউজার জিওলোকেশন অনুরোধ ও পরিচালনা করতে, 'আমার অবস্থান ব্যবহার করুন ' উইন্ডোটি কীভাবে সক্রিয় করবেন তা দেখুন:

ওয়েব ব্রাউজারের অনুমতির অনুরোধ (বড় করে দেখতে ক্লিক করুন)

নিকটতম দোকানগুলি চিহ্নিত করুন

এই উদাহরণটিতে ব্যবহৃত হয়েছে: রাউটস লাইব্রেরি, ম্যাপস জাভাস্ক্রিপ্ট এপিআই

এছাড়াও উপলব্ধ: রাউটস এপিআই

একবার ব্যবহারকারীর অবস্থান জানা গেলে, আপনি সেটিকে আপনার স্টোরের অবস্থানগুলোর সাথে তুলনা করতে পারেন। Maps JavaScript API-এর Routes লাইব্রেরির RouteMatrix ক্লাস (অথবা Routes API-এর Compute Route Matrix ফিচার) ব্যবহার করে এটি করলে, আপনার ব্যবহারকারীরা গাড়িতে যাওয়ার সময় বা রাস্তার দূরত্বের ভিত্তিতে তাদের জন্য সবচেয়ে সুবিধাজনক অবস্থানটি বেছে নিতে পারেন।

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

RouteMatrix.computeRouteMatrix মেথডটি উৎস এবং গন্তব্যস্থলের একটি তালিকা গ্রহণ করে এবং তাদের মধ্যেকার ভ্রমণের দূরত্বের পাশাপাশি ভ্রমণের সময়ও ফেরত দেয়। একজন ব্যবহারকারীর ক্ষেত্রে, উৎসস্থল হবে তার বর্তমান অবস্থান বা তার কাঙ্ক্ষিত শুরুর স্থান, এবং গন্তব্যস্থলগুলো হবে সেই অবস্থানগুলো। উৎস এবং গন্তব্যস্থল স্থানাঙ্ক জোড়া, স্থান আইডি বা ঠিকানা হিসাবে নির্দিষ্ট করা যেতে পারে। বর্তমান বা ভবিষ্যতের ড্রাইভিং সময়ের উপর ভিত্তি করে ফলাফল দেখানোর জন্য আপনি TRAFFIC_AWARE মতো রাউটিং প্রেফারেন্সের সাথে RouteMatrix.computeRouteMatrix ব্যবহার করতে পারেন।

নিম্নলিখিত উদাহরণটি ব্যবহারকারীর অরিজিন এবং একবারে সর্বোচ্চ ২৫টি স্টোর লোকেশন নির্দিষ্ট করে Routes লাইব্রেরির Maps JavaScript API-এর RouteMatrix.computeRouteMatrix কে কল করে।

async function getDistances(originLocation) {
  const { RouteMatrix } = await google.maps.importLibrary("routes");
  const request = {
    origins: [originLocation],
    destinations: stores.slice(0, 25).map((store) => store.location),
    travelMode: google.maps.TravelMode.DRIVING,
    routingPreference: "TRAFFIC_AWARE",
    fields: ["distanceMeters", "durationMillis", "condition"],
  };
  return RouteMatrix.computeRouteMatrix(request);
}

function update(location) {
  if (!location) {
    return;
  }

  // ...

  // sort by spherical distance
  stores.sort((a, b) => {
    return (
      google.maps.geometry.spherical.computeDistanceBetween(
        new google.maps.LatLng(a.location),
        location
      ) -
      google.maps.geometry.spherical.computeDistanceBetween(
        new google.maps.LatLng(b.location),
        location
      )
    );
  });

  // display travel distance and time
  getDistances(location)
    .then(({ matrix }) => {
      const items = matrix.rows[0].items;
      for (let i = 0; i < items.length; i++) {
        if (items[i].condition === "ROUTE_EXISTS") {
          stores[i].travelDistance = items[i].distanceMeters;
          stores[i].travelDuration = items[i].durationMillis;
        }
      }
    })
    .finally(() => {
      renderCards(stores);
      autocompleteInput.disabled = false;
      isUpdateInProgress = false;
    });
}

আপনার ইনভেন্টরি ডেটাবেসের উপর ভিত্তি করে আপনি প্রতিটি নিকটবর্তী অবস্থানের জন্য পণ্যটির মজুদের অবস্থা প্রদর্শন করতে পারেন।

দোকানের তথ্য প্রদর্শন করুন

এই উদাহরণটিতে ব্যবহৃত হয়েছে: প্লেসেস লাইব্রেরি, ম্যাপস জাভাস্ক্রিপ্ট এপিআই

এছাড়াও উপলব্ধ: অ্যান্ড্রয়েডের জন্য প্লেসেস এসডিকে | আইওএসের জন্য প্লেসেস এসডিকে | প্লেসেস এপিআই (নতুন)

গ্রাহকদের পছন্দের স্থান বেছে নিতে বা তাদের অর্ডার চূড়ান্ত করতে সাহায্য করার জন্য আপনি যোগাযোগের তথ্য, খোলার সময় এবং বর্তমান খোলা অবস্থার মতো স্থানের বিশদ বিবরণ শেয়ার করতে পারেন।

স্থানের বিবরণ পেতে ম্যাপস জাভাস্ক্রিপ্ট এপিআই -তে কল করার পর, আপনি রেসপন্সটি ফিল্টার ও রেন্ডার করতে পারেন।

স্টোরের বিকল্পগুলি দেখুন (বড় করে দেখতে ক্লিক করুন)

স্থানের বিবরণ অনুরোধ করতে, আপনার প্রতিটি অবস্থানের স্থান আইডি প্রয়োজন হবে। আপনার অবস্থানের স্থান আইডি পুনরুদ্ধার করতে ‘স্থান আইডি সংগ্রহ করুন ’ দেখুন।

নিম্নলিখিত প্লেস ডিটেইলস রিকোয়েস্টটি গুগল লন্ডন প্লেস আইডি-র নাম, স্থানাঙ্ক, ওয়েবসাইট, ফোন নম্বর, রেটিং এবং সময়সূচী ফেরত দেওয়ার জন্য প্লেস ক্লাস ব্যবহার করে:

const place = new google.maps.places.Place({
  id: 'ChIJVSZzVR8FdkgRTyQkxxLQmVU',
});


await place.fetchFields({
  fields: [
    'displayName',
    'nationalPhoneNumber',
    'location',
    'regularOpeningHours',
    'rating',
    'utcOffsetMinutes',
    'websiteURI',
  ],
});

createMarker(place);

---

পণ্য লোকেটার উন্নত করুন

আপনার ব্যবসা বা ব্যবহারকারীদের প্রয়োজন অনুসারে, আপনি ব্যবহারকারীর অভিজ্ঞতা আরও উন্নত করতে পারেন।

নেভিগেশন দিকনির্দেশনা প্রদান করুন

এই উদাহরণটিতে ব্যবহৃত হয়েছে: রাউটস লাইব্রেরি, ম্যাপস জাভাস্ক্রিপ্ট এপিআই

এছাড়াও উপলব্ধ: অ্যান্ড্রয়েড এবং আইওএস-এ ব্যবহারের জন্য রাউটস এপিআই ওয়েব পরিষেবা, যা সরাসরি অ্যাপ্লিকেশন থেকে অথবা দূরবর্তীভাবে একটি সার্ভার প্রক্সির মাধ্যমে ব্যবহার করা যায়।

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

Maps JavaScript API-এর Routes লাইব্রেরির Route ক্লাসেও createPolylines() এবং createWaypointAdvancedMarkers() এর মতো মেথড রয়েছে, যেগুলো আপনাকে ফলাফলগুলো প্রসেস করতে এবং একটি ম্যাপে প্রদর্শন করতে দেয়।

নিচে মানচিত্রে একটি পথের অনুরোধ ও তা প্রদর্শনের একটি উদাহরণ দেওয়া হলো। নমুনাটি সম্পর্কে আরও তথ্যের জন্য, ‘একটি পথ পান’ দেখুন।

মোবাইলে দিকনির্দেশনা পাঠান

ব্যবহারকারীদের জন্য কোনো গন্তব্যে পৌঁছানো আরও সহজ করতে, আপনি তাদের একটি দিকনির্দেশনার লিঙ্ক টেক্সট বা ইমেল করতে পারেন। তারা যখন এটিতে ক্লিক করবে, তখন তাদের ফোনে গুগল ম্যাপস অ্যাপ ইনস্টল করা থাকলে সেটি চালু হবে, অথবা তাদের ডিভাইসের ওয়েব ব্রাউজারে maps.google.com লোড হবে। এই উভয় অভিজ্ঞতাই ব্যবহারকারীকে গন্তব্যে পৌঁছানোর জন্য ভয়েস গাইডেন্স সহ ধাপে ধাপে নেভিগেশন ব্যবহারের সুযোগ দেয়।

Maps URL ব্যবহার করে নিম্নলিখিতের মতো একটি দিকনির্দেশনা URL তৈরি করুন, যেখানে URL-এনকোডেড স্থানের নামটি destination প্যারামিটার হিসেবে এবং স্থানের আইডিটি destination_place_id প্যারামিটার হিসেবে ব্যবহৃত হবে। Maps URL তৈরি বা ব্যবহার করতে কোনো খরচ নেই, তাই URL-এ কোনো API কী অন্তর্ভুক্ত করার প্রয়োজন নেই।

https://www.google.com/maps/dir/?api=1&destination=Google%20London&destination_place_id=ChIJVSZzVR8FdkgRTyQkxxLQmVU

আপনি চাইলে গন্তব্যের ঠিকানার ফরম্যাট ব্যবহার করে একটি origin কোয়েরি প্যারামিটার দিতে পারেন। কিন্তু এটি বাদ দিলে, দিকনির্দেশনা ব্যবহারকারীর বর্তমান অবস্থান থেকে শুরু হয়, যা আপনার প্রোডাক্ট লোকেটর অ্যাপ ব্যবহার করার সময়কার অবস্থান থেকে ভিন্ন হতে পারে। ম্যাপস ইউআরএল-এ অতিরিক্ত কোয়েরি প্যারামিটার অপশন থাকে, যেমন travelmode এবং dir_action=navigate যা নেভিগেশন চালু রেখে দিকনির্দেশনা শুরু করে।

এই ক্লিকযোগ্য লিঙ্কটি , যা পূর্ববর্তী উদাহরণ URL-টিরই একটি বর্ধিত রূপ, এর origin হিসেবে লন্ডনের একটি ফুটবল স্টেডিয়ামকে নির্ধারণ করে এবং গন্তব্যে পৌঁছানোর জন্য গণপরিবহনের দিকনির্দেশনা দিতে travelmode=transit ব্যবহার করে।

এই URL সম্বলিত কোনো টেক্সট বা ইমেল পাঠাতে, আমরা বর্তমানে twilio-এর মতো একটি থার্ড-পার্টি অ্যাপ্লিকেশন ব্যবহার করার পরামর্শ দিই। আপনি যদি App Engine ব্যবহার করেন, তাহলে আপনি এসএমএস বার্তা বা ইমেল পাঠাতে থার্ড-পার্টি কোম্পানি ব্যবহার করতে পারেন। আরও তথ্যের জন্য, “থার্ড-পার্টি পরিষেবাগুলির মাধ্যমে বার্তা পাঠানো” দেখুন।

ইন্টারেক্টিভ মানচিত্রে আপনার অবস্থানগুলি দেখান

ডায়নামিক ম্যাপ ব্যবহার করুন

এই উদাহরণে ব্যবহৃত হয়েছে: Maps JavaScript API

এছাড়াও উপলব্ধ: অ্যান্ড্রয়েড | আইওএস

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

আপনার পেজে একটি ডাইনামিক ম্যাপ যোগ করা—অর্থাৎ, এমন একটি ম্যাপ যা ব্যবহারকারীরা নাড়াচাড়া করতে, জুম ইন ও আউট করতে এবং বিভিন্ন স্থান ও দর্শনীয় স্থান সম্পর্কে বিস্তারিত তথ্য পেতে পারে—কয়েক লাইনের কোডের মাধ্যমেই করা সম্ভব।

প্রথমত, আপনাকে পেজটিতে ম্যাপস জাভাস্ক্রিপ্ট এপিআই (Maps JavaScript API) অন্তর্ভুক্ত করতে হবে। এটি করার জন্য আপনার এইচটিএমএল (HTML) পেজে নিম্নলিখিত স্ক্রিপ্টটি লিঙ্ক করতে হবে এবং এর সাথে libraries=marker যুক্ত করতে হবে, যাতে আপনি ম্যাপে উন্নত মার্কার যোগ করতে পারেন।

<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=marker&callback=initMap&solution_channel=GMP_guides_productlocator_v1_a"></script>

ইউআরএলটি জাভাস্ক্রিপ্টের initMap ফাংশনটিকে নির্দেশ করে, যা পেজ লোড হওয়ার সময় চলে। ইউআরএল-এ আপনি আপনার ম্যাপের ভাষা বা অঞ্চলও নির্ধারণ করতে পারেন, যাতে আপনার নির্দিষ্ট দেশের জন্য এটি সঠিক বিন্যাসে বিন্যস্ত হয়। অঞ্চল নির্ধারণ করলে এটাও নিশ্চিত হয় যে, মার্কিন যুক্তরাষ্ট্রের বাইরে ব্যবহৃত অ্যাপগুলোর আচরণ আপনার সেট করা অঞ্চলের দিকেই বেশি ঝুঁকে থাকবে। সমর্থিত ভাষা ও অঞ্চলের সম্পূর্ণ তালিকার জন্য গুগল ম্যাপস প্ল্যাটফর্ম কভারেজ ডিটেইলস দেখুন এবং region প্যারামিটারের ব্যবহার সম্পর্কে আরও জানুন।

এরপরে, পেজে আপনার ম্যাপটি রাখার জন্য একটি HTML div প্রয়োজন হবে। এখানেই ম্যাপটি প্রদর্শিত হবে।

<div id="map"></div>

পরবর্তী ধাপ হলো আপনার ম্যাপের মৌলিক কার্যকারিতা সেট করা। এটি স্ক্রিপ্ট URL-এ নির্দিষ্ট করা initMap স্ক্রিপ্ট ফাংশনে করা হয়। নিম্নলিখিত উদাহরণে দেখানো এই স্ক্রিপ্টে, আপনি প্রাথমিক অবস্থান, একটি ম্যাপ আইডি (অ্যাডভান্সড মার্কার এবং ক্লাউড-ভিত্তিক ম্যাপ স্টাইলিংয়ের জন্য প্রয়োজনীয়), ম্যাপের ধরন এবং আপনার ব্যবহারকারীদের জন্য ম্যাপে কোন কন্ট্রোলগুলো উপলব্ধ থাকবে তা সেট করতে পারেন। লক্ষ্য করুন যে getElementById() পূর্ববর্তী "map" div ID-কে রেফারেন্স করে।

function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
center: { lat: 51.485925, lng: -0.129500 },
mapId: "DEMO_MAP_ID",
zoomControl: false
});
}

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

আপনার মানচিত্র কাস্টমাইজ করুন

আপনি আপনার মানচিত্রের চেহারা ও বিবরণ বিভিন্ন উপায়ে পরিবর্তন করতে পারেন। উদাহরণস্বরূপ, আপনি পারেন:

• ডিফল্ট ম্যাপ পিনগুলো প্রতিস্থাপন করতে আপনার নিজস্ব কাস্টম মার্কার তৈরি করুন।
• আপনার ব্র্যান্ডের প্রতিফলন ঘটাতে মানচিত্রের বৈশিষ্ট্যগুলোর রং পরিবর্তন করুন।
• আপনি কোন কোন আকর্ষণীয় স্থান (আকর্ষণীয় জিনিস, খাবার, থাকার জায়গা ইত্যাদি) এবং কী ঘনত্বে প্রদর্শন করবেন তা নিয়ন্ত্রণ করুন, যা ব্যবহারকারীদের মনোযোগ আপনার স্থানগুলোর উপর কেন্দ্রীভূত করতে সাহায্য করে এবং একই সাথে সেইসব ল্যান্ডমার্ক হাইলাইট করে যা ব্যবহারকারীদের নিকটতম স্থানে পৌঁছাতে সহায়তা করে।

কাস্টম ম্যাপ মার্কার তৈরি করুন

আপনি ডিফল্ট পিন ব্যাকগ্রাউন্ড, বর্ডার বা গ্লিফের রঙ পরিবর্তন করে (উদাহরণস্বরূপ, কোনো স্থান বর্তমানে খোলা আছে কিনা তা নির্দেশ করতে), মার্কারটিকে আপনার ব্র্যান্ডের লোগোর মতো একটি কাস্টম গ্রাফিক ইমেজ দিয়ে প্রতিস্থাপন করে, অথবা কাস্টম HTML এবং CSS মার্কার তৈরি করে আপনার অ্যাডভান্সড মার্কারগুলো কাস্টমাইজ করতে পারেন। ইনফো উইন্ডো বা পপ-আপ উইন্ডো ব্যবহারকারীদের অতিরিক্ত তথ্য প্রদান করতে পারে, যেমন খোলার সময়, ফোন নম্বর বা ছবি।

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

বিস্তারিত তথ্যের জন্য, জাভাস্ক্রিপ্ট (ওয়েব) , অ্যান্ড্রয়েড এবং আইওএস- এর অ্যাডভান্সড মার্কার ডকুমেন্টেশন দেখুন।

আপনার মানচিত্র সাজান

গুগল ম্যাপস প্ল্যাটফর্ম আপনাকে আপনার ম্যাপকে এমনভাবে সাজানোর সুযোগ দেয়, যা ব্যবহারকারীদের নিকটতম স্থান খুঁজে পেতে, যত দ্রুত সম্ভব সেখানে পৌঁছাতে এবং আপনার ব্র্যান্ডকে আরও শক্তিশালী করতে সাহায্য করে। উদাহরণস্বরূপ, আপনি আপনার ব্র্যান্ডিংয়ের সাথে মিলিয়ে ম্যাপের রঙ পরিবর্তন করতে পারেন এবং ব্যবহারকারীদের কাছে দৃশ্যমান গুরুত্বপূর্ণ স্থানগুলো নিয়ন্ত্রণ করে ম্যাপের মনোযোগ বিঘ্নকারী বিষয়গুলো কমাতে পারেন। গুগল ম্যাপস প্ল্যাটফর্ম বেশ কিছু ম্যাপ স্টার্টার টেমপ্লেটও সরবরাহ করে, যার মধ্যে কয়েকটি ভ্রমণ, লজিস্টিকস, রিয়েল এস্টেট এবং রিটেলের মতো বিভিন্ন শিল্পের জন্য বিশেষভাবে তৈরি করা হয়েছে।

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

ক্লাউড কনসোলে ম্যাপ স্টাইল তৈরি এবং স্টাইলিং-এর অ্যানিমেশনগুলো দেখতে প্রসারিত করুন:

শিল্প মানচিত্র শৈলী

এই অ্যানিমেশনটি পূর্বনির্ধারিত শিল্প-ভিত্তিক মানচিত্রের শৈলীগুলো দেখায় যা আপনি ব্যবহার করতে পারেন। এই শৈলীগুলো প্রতিটি শিল্পের জন্য একটি সর্বোত্তম সূচনা বিন্দু প্রদান করে। উদাহরণস্বরূপ, রিটেইল মানচিত্রের শৈলীটি মানচিত্রে গুরুত্বপূর্ণ স্থানগুলো কমিয়ে দেয়, যা ব্যবহারকারীদের আপনার অবস্থানগুলোর পাশাপাশি ল্যান্ডমার্কগুলোর উপর মনোযোগ দিতে সাহায্য করে, যাতে তারা যত দ্রুত সম্ভব এবং আত্মবিশ্বাসের সাথে নিকটতম অবস্থানে পৌঁছাতে পারে।

আগ্রহের স্থান নিয়ন্ত্রণ

এই অ্যানিমেশনটি আগ্রহের স্থানগুলোর (POI) মার্কারের রঙ নির্ধারণ করে এবং ম্যাপ স্টাইলে POI-এর ঘনত্ব বৃদ্ধি করে। ঘনত্ব যত বেশি হবে, ম্যাপে তত বেশি POI মার্কার প্রদর্শিত হবে।

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

স্ক্রিপ্ট URL-এ এক বা একাধিক map_ids অন্তর্ভুক্ত করলে, আপনার কোডে সেই স্টাইলগুলো কল করার সময় Maps JavaScript API স্বয়ংক্রিয়ভাবে সেগুলোকে উপলব্ধ করে, যার ফলে ম্যাপ দ্রুত রেন্ডার হয়।

<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&map_ids=MAP_IDs&callback=initMap&solution_channel=GMP_guides_productlocator_v1_a">
</script>

নিম্নলিখিত কোডটি ওয়েব পেজে একটি স্টাইল করা মানচিত্র প্রদর্শন করে। (এখানে একটি HTML <div id="map"></div> এলিমেন্ট দেখানো হয়নি, যেখানে মানচিত্রটি পেজে প্রদর্শিত হবে।)

map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 51.485925, lng: -0.129500},
zoom: 12,
mapId: '1234abcd5678efgh'
});

জাভাস্ক্রিপ্ট (ওয়েব) , অ্যান্ড্রয়েড এবং আইওএস -এ ক্লাউড-ভিত্তিক ম্যাপ স্টাইলিং অন্তর্ভুক্ত করার বিষয়ে আরও জানুন।

কাস্টম অবস্থানের ডেটা স্থানের বিবরণের সাথে একত্রিত করুন

পূর্ববর্তী “একটি ইন্টারেক্টিভ মানচিত্রে আপনার অবস্থানগুলি দেখান” বিভাগে, ব্যবহারকারীদের আপনার অবস্থানগুলি সম্পর্কে খোলার সময়, ছবি এবং পর্যালোচনার মতো বিশদ তথ্য দেওয়ার জন্য “স্থানের বিবরণ” ব্যবহারের বর্ণনা দেওয়া হয়েছে।

Places API (New)-এর বিভিন্ন ডেটা ফিল্ডের মূল্য এবং SKU স্তরগুলো বোঝা সহায়ক। আপনার খরচ পরিচালনা করার জন্য, একটি কৌশল হলো আপনার অবস্থানগুলো সম্পর্কে আপনার কাছে থাকা তথ্যের সাথে Google Maps থেকে পাওয়া নতুন তথ্য, যেমন—সাময়িক বন্ধ, ছুটির দিনের সময়সূচী, এবং ব্যবহারকারীর রেটিং, ছবি ও রিভিউ, একত্রিত করা। যদি আপনার স্টোরগুলোর যোগাযোগের তথ্য আগে থেকেই থাকে, তাহলে আপনার Place Details থেকে সেই ফিল্ডগুলোর জন্য অনুরোধ করার প্রয়োজন হবে না এবং আপনি আপনার ফিল্ড মাস্ককে সীমাবদ্ধ করে শুধুমাত্র সেই ফিল্ডগুলো আনতে পারবেন যা আপনি প্রদর্শন করতে চান।

স্থানের বিবরণের পরিপূরক হিসেবে বা এর পরিবর্তে ব্যবহার করার জন্য আপনার নিজস্ব স্থানের ডেটা থাকতে পারে। ফুল-স্ট্যাক লোকেটরের কোডল্যাবে একটি ডেটাবেসের সাথে GeoJSON ব্যবহার করে আপনার নিজস্ব অবস্থানের বিবরণ সংরক্ষণ ও পুনরুদ্ধার করার একটি উদাহরণ দেওয়া হয়েছে।