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

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

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

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

এখনই এটি করুন!

গুগল ক্লাউড কনসোলের কুইক বিল্ডার আপনাকে দ্রুত একটি লোকেটর তৈরি করতে দেয়, যার মধ্যে বিজনেস প্রোফাইল লিস্টিং ইম্পোর্ট করা এবং থার্ড-পার্টি প্রোভাইডারদের থেকে অ্যাপয়েন্টমেন্ট বুকিং লিঙ্ক স্বয়ংক্রিয়ভাবে এম্বেড করা অন্তর্ভুক্ত। এর ইন্টারেক্টিভ ইউআই আপনাকে কয়েক মিনিটের মধ্যেই কোড জেনারেট করে ক্লাউডে ডেপ্লয় করতে সাহায্য করে।

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

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

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

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

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

এপিআই সক্ষম করা

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

বাস্তবায়ন বিভাগ

এই বিষয়ে আমরা নিম্নলিখিত অনুশীলন এবং কাস্টমাইজেশনগুলো নিয়ে আলোচনা করব।

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

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

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

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

ব্যবহারকারীদের প্লেস ডিটেইলস সাইড প্যানেল থেকে অ্যাপয়েন্টমেন্ট বুক করার সুযোগ দিন।

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

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

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

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

এটি সক্রিয় করার একাধিক উপায় রয়েছে: (১) এই কার্যকারিতাটি স্বয়ংক্রিয়ভাবে প্রদান করার জন্য কুইক বিল্ডার লোকেটর প্লাস সলিউশন ব্যবহার করা, এবং (২) আপনার নিজস্ব ডাইনামিক ম্যাপস ইমপ্লিমেন্টেশন ব্যবহার করা। এই বিভাগে এই বিকল্পগুলি বিস্তারিতভাবে বর্ণনা করা হয়েছে।

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

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

ব্যবসায়িক প্রোফাইল ইন্টিগ্রেশন
আপনার বিজনেস প্রোফাইল থেকে ব্যবসার বিবরণ ইম্পোর্ট করে লোকেটর প্লাস-এ সহজেই আপনার লোকেশনগুলো পরিচালনা করুন।

ক্লাউডে স্থাপন করুন
গুগল ক্লাউড ব্যবহার করে সহজেই আপনার লোকেটর প্লাস সলিউশন স্থাপন করুন।

আপনার নিজস্ব ডাইনামিক ম্যাপস ইমপ্লিমেন্টেশন ব্যবহার করে

এই উদাহরণে ব্যবহৃত হয়েছে: Maps JavaScript API এছাড়াও উপলব্ধ: অ্যান্ড্রয়েড | আইওএস

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

প্রথমে, আপনাকে পেজটিতে ম্যাপস জাভাস্ক্রিপ্ট এপিআই অন্তর্ভুক্ত করতে হবে। এটি আপনার এইচটিএমএল পেজে নিম্নলিখিত স্ক্রিপ্টটি লিঙ্ক করার মাধ্যমে করা হয়।

<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&solution_channel=GMP_guides_locatorplus_v2_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 },
    zoomControl: false
  });
}

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

স্থান আইডি পাওয়া

এই উদাহরণে ব্যবহৃত হয়েছে: Places API এছাড়াও উপলব্ধ: জাভাস্ক্রিপ্ট

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

https://maps.googleapis.com/maps/api/place/findplacefromtext/json?input=google%20london&inputtype=textquery&fields=place_id&key=YOUR_API_KEY&solution_channel=GMP_guides_locatorplus_v2_a

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

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

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

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

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

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

মানচিত্রে অবস্থান যোগ করা

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

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

var marker = new google.maps.Marker({
    position: { lat: 51.493073, lng: -0.146550 },
    label:"A",
    title:"Location Name"
});

// To add the marker to the map, call setMap();
marker.setMap(map);

কয়েকটি মার্কারের সাহায্যে আপনি একসাথে বেশ কয়েকটি স্থানের অবস্থান দেখতে পারেন।

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

স্থানের বিবরণ প্রদান করা

এই উদাহরণে ব্যবহৃত হয়েছে: Maps JavaScript API এছাড়াও উপলব্ধ: এপিআই | অ্যান্ড্রয়েড | আইওএস

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

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

স্থানের বিবরণ অনুরোধ করার ভিডিওগুলো দেখতে প্রসারিত করুন:

খোলার সময় জানুন

চেক বন্ধ

খরচ নিয়ন্ত্রণ করুন

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

     
  const marker = new google.maps.Marker({
    map,
    position: { lat: 51.493073, lng: -0.14655 },
  });
  const request = {
    placeId: "ChIJVSZzVR8FdkgRTyQkxxLQmVU",
    fields: ["name", "formatted_address", "rating", "website"],
  };
  const infowindow = new google.maps.InfoWindow();
  const service = new google.maps.places.PlacesService(map);

  google.maps.event.addListener(marker, "click", function () {
    service.getDetails(request, (place, status) => {
      if (status === google.maps.places.PlacesServiceStatus.OK && place) {
        infowindow.setContent(
          "<div><strong>" +
            place.name +
            "</strong><br>" +
            place.formatted_address +
            "<br>" +
            "Rating: " +
            place.rating +
            " stars<br>" +
            place.website +
            "</div>"
        );

        infowindow.open(map, this);
      }
    });
  });
  
  

৪৫° কোণ থেকে অবস্থানগুলি দেখানো হচ্ছে

এই উদাহরণে ব্যবহৃত হয়েছে: Maps JavaScript API এছাড়াও উপলব্ধ: অ্যান্ড্রয়েড | আইওএস

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

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

function seeDetail(location) {
  map.setCenter(location);
  map.setZoom(19);
  map.setMapTypeId(google.maps.MapTypeId.HYBRID);
  map.setTilt(45);
}

মূল মানচিত্র দৃশ্যে রিসেট করা হচ্ছে

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

let originalMapTypeId = google.maps.MapTypeId.ROADMAP;
map.addListener("zoom_changed", () => {
  const newZoom = map.getZoom()!;

  if (newZoom < 19) {
    map.setTilt(0);
    map.setMapTypeId(originalMapTypeId);
  }
});

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

এই উদাহরণে ব্যবহৃত হয়েছে: Maps JavaScript API এছাড়াও উপলব্ধ: অ্যান্ড্রয়েড | আইওএস

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

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

আপনার সাইটে প্লেস অটোকমপ্লিট লাইব্রেরি যোগ করার জন্য শুধু ম্যাপস জাভাস্ক্রিপ্ট এপিআই স্ক্রিপ্ট ইউআরএল-এ কয়েকটি কোয়েরি প্যারামিটার যোগ করতে হবে। নিচের উদাহরণে, libraries=places যোগ করা হয়েছে।

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

এরপর, ব্যবহারকারীর মতামত নেওয়ার জন্য আপনার পেজে একটি টেক্সট বক্স যোগ করুন।

<input id="autocomplete" placeholder="Enter starting
      address, city, or zip code" type="text"></input>

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

  // Create the autocomplete object, restricting the search predictions to
  // geographical location types.
  const autocomplete = new google.maps.places.Autocomplete(
    document.getElementById("autocomplete"),
    { types: ["geocode"],
      componentRestrictions: {'country': ['gb']},
      fields: ['place_id', 'geometry', 'formatted_address'] }
  );
  // When the user selects an address from the drop-down
  // zoom to the select location and add a marker.
  autocomplete.addListener("place_changed", addUserLocation);
}

এই উদাহরণে, ব্যবহারকারী ঠিকানা নির্বাচন করার পর addUserLocation() ফাংশনটি কার্যকর হয়। এটি মিলে যাওয়া ফলাফলের জ্যামিতি ও ব্যবহারকারীর অবস্থান গ্রহণ করে, তারপর মানচিত্রটিকে সেই অবস্থানে নিয়ে যায় এবং একটি মার্কার যুক্ত করে।

function addUserLocation() {
  // Get the place details from the autocomplete object.
  const place = autocomplete.getPlace();

  // Add a marker to the map.
  const marker = new google.maps.Marker({
          map: map
        });

  marker.setLabel("C");
  marker.setPosition(place.geometry.location);

  // Zoom the map to the marker.
  map.panTo(place.geometry.location);
  map.setZoom(12);
}

এরপর আপনি ব্যবহারকারী এবং যেকোনো নির্দিষ্ট অবস্থানের মধ্যকার সম্পর্ক দেখতে পারবেন, যা নিচের ছবিতে দেখানো হয়েছে।

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

ওয়েবসাইট

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

iOS অ্যাপস

নিকটতম স্থানগুলিতে ভ্রমণের সময় এবং দূরত্ব দেখানো হচ্ছে

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

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

কোনো ব্যবহারকারীর কাছাকাছি অবস্থান দেখানো থেকে বোঝা যায় যে আপনার কাছে আগে থেকেই অবস্থানের তথ্য রয়েছে। আপনার নিজস্ব অবস্থানের ডেটাবেস ব্যবহার করার সময়, মূল বিষয় হলো ডেটা এমন একটি ফরম্যাটে আছে কিনা তা নিশ্চিত করা যা মানচিত্রে ব্যবহার করা যায়, যেমন GeoJSON, যা 'ডেটা লেয়ার' বিষয়ে বর্ণনা করা হয়েছে।

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

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

নিম্নলিখিত উদাহরণটি ব্যবহারকারীর উৎস এবং অবস্থানগুলি নির্দিষ্ট করে ডিস্ট্যান্স ম্যাট্রিক্স সার্ভিসকে কল করে। এই উদাহরণটি মানচিত্রের কেন্দ্র থেকে লন্ডনে অবস্থিত তিনটি গুগল অফিসের দূরত্ব দেখায়।

ইউআরএল এনকোডিংয়ের সংক্ষিপ্ত নির্দেশিকা: %2C = , (কমা), %3A = : (কোলন), এবং %7C = | (পাইপ)।

      https://maps.googleapis.com/maps/api/distancematrix/json?origins=51.493490%2C-0.097288
      &destinations=place_id%3AChIJVSZzVR8FdkgRTyQkxxLQmVU%7Cplace_id%3AChIJVSZzVR8FdkgR-HklrBMO0Hc%7Cplace_id%3AChIJ4abvVDwbdkgRDZVFR7A6Bcc
      &units=metric
      &mode=driving
      &key=YOUR_API_KEY
      &solution_channel=GMP_guides_locatorplus_v2_a

এখানে একটি সংস্করণ রয়েছে যা আপনি কপি করে চালাতে পারেন:

      https://maps.googleapis.com/maps/api/distancematrix/json?key=YOUR_API_KEY&origins=51.493490%2C-0.097288&destinations=place_id%3AChIJVSZzVR8FdkgRTyQkxxLQmVU%7Cplace_id%3AChIJVSZzVR8FdkgR-HklrBMO0Hc%7Cplace_id%3AChIJ4abvVDwbdkgRDZVFR7A6Bcc&units=metric&mode=driving&solution_channel=GMP_guides_locatorplus_v2_a

পরিষেবাটি থেকে প্রাপ্ত প্রকৃত প্রতিক্রিয়া হবে মিলে যাওয়া ঠিকানা, দূরত্ব এবং সময়কালের একটি তালিকা, যা নিম্নলিখিত উদাহরণে দেখানো তালিকার অনুরূপ:

নমুনা প্রতিক্রিয়া দেখতে প্রসারিত করুন:

{
    "destination_addresses": [
        "123 Buckingham Palace Rd, Victoria, London SW1W 9SH, UK",
        "1-13 St Giles High St, West End, London WC2H 8AG, UK",
        "6 Pancras Square, Kings Cross, London N1C 4AG, UK"
    ],
    "origin_addresses": [
        "Unnamed Road, London, UK"
    ],
    "rows": [
        {
            "elements": [
                {
                    "distance": {
                        "text": "4.5 km",
                        "value": 4540
                    },
                    "duration": {
                        "text": "15 mins",
                        "value": 924
                    },
                    "status": "OK"
                },
                {
                    "distance": {
                        "text": "5.0 km",
                        "value": 5043
                    },
                    "duration": {
                        "text": "17 mins",
                        "value": 1044
                    },
                    "status": "OK"
                },
                {
                    "distance": {
                        "text": "6.9 km",
                        "value": 6919
                    },
                    "duration": {
                        "text": "23 mins",
                        "value": 1357
                    },
                    "status": "OK"
                }
            ]
        }
    ],
    "status": "OK"
}

নিচের ছবিতে একটি মানচিত্রে উৎস (লাল চিহ্নিতকারী C) এবং গন্তব্যস্থলগুলো দেখানো হয়েছে:

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

সরলরৈখিক দূরত্ব এবং পথের দূরত্ব প্রায়শই ভিন্ন হয়, যেমনটি নিম্নলিখিত সারণিতে দেখানো হয়েছে।

অবস্থান সরল দূরত্ব রাস্তায় যানজট / সময়
অবস্থান A ৩.৩২ কিমি ৪.৫ কিমি / ১৫ মিনিট
অবস্থান বি ৩.২০ কিমি ৫.০ কিমি / ১৭ মিনিট
অবস্থান C ৪.৮৪ কিমি ৬.৯ কিমি / ২৩ মিনিট

যদিও দূরত্ব অনুযায়ী স্থান B সবচেয়ে কাছে, সেখানে পৌঁছানোর পথ ও সময় বেশি লাগে, কারণ স্থান A-তে একটি মহাসড়ক দিয়ে যাওয়া যায়।

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

এই উদাহরণে ব্যবহৃত হয়েছে: Maps JavaScript API Directions Service এছাড়াও উপলব্ধ: অ্যান্ড্রয়েড এবং আইওএস-এ ব্যবহারের জন্য ডিরেকশনস এপিআই (লেগ্যাসি) ওয়েব পরিষেবা, যা সরাসরি অ্যাপ্লিকেশন থেকে অথবা দূরবর্তীভাবে একটি সার্ভার প্রক্সির মাধ্যমে ব্যবহার করা যায়।

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

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

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

এই Maps ফিচারগুলো সম্পর্কে আরও জানতে, Maps JavaScript API ডকুমেন্টেশন পড়ুন অথবা একটি লোকেটর তৈরি করার জন্য ধাপে ধাপে কোডল্যাবগুলো দেখুন।

ব্যবহারকারীদের অ্যাপয়েন্টমেন্ট বুক করতে সাহায্য করা

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

এটি সক্রিয় করার একাধিক উপায় রয়েছে: (১) কুইক বিল্ডার লোকেটর প্লাস সলিউশন ব্যবহার করে এই কার্যকারিতাটি স্বয়ংক্রিয়ভাবে প্রদান করা, এবং (২) আপনার বিজনেস প্রোফাইল ব্যবহার করা। এই বিভাগে এই বিকল্পগুলি বিস্তারিতভাবে বর্ণনা করা হয়েছে।

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

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

গুগলের মাধ্যমে রিজার্ভ করুন
আপনার স্টোর লোকেটার-এ বুকিং করার সুবিধা যোগ করুন।

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

অ্যাপয়েন্টমেন্ট বুকিং সক্ষম করতে ব্যবসায়িক প্রোফাইল ব্যবহার করুন।

যখন আপনি বিজনেস প্রোফাইল ব্যবহার করে আপনার অনলাইন উপস্থিতি পরিচালনা করেন, তখন আপনার তৈরি করা ব্যবসার অবস্থানগুলো গুগল ম্যাপস প্ল্যাটফর্মের প্লেস আইডি-র সাথে যুক্ত হয়ে যায়, যা ব্যবসার তথ্যের সাথে সমন্বিত ম্যাপিং কার্যকারিতা সক্ষম করে।

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

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

  1. APPOINTMENT , ONLINE_APPOINTMENT , বা DINING_RESERVATION টাইপের লোকেশনের জন্য একটি বিজনেস প্রোফাইল এপিআই placeActionLink তৈরি করুন। এই placeActionLink হবে সেই অবজেক্ট যা আপনি সাইড প্যানেলে অ্যাপয়েন্টমেন্ট লিঙ্কের জন্য ব্যবহার করবেন। (যদি আপনি আপনার কাঙ্ক্ষিত অ্যাপয়েন্টমেন্ট অ্যাকশন লিঙ্কটি ইতিমধ্যেই তৈরি করে থাকেন, তবে পরবর্তী ধাপে চলে যান।) একটি সফল placeActionLinks.create POST অপারেশনের একটি উদাহরণ প্রতিক্রিয়া নিচে দেওয়া হলো:

    {
        "name": "locations/15899957830169237700/placeActionLinks/9c984be778a7ebbc",
        "providerType": "MERCHANT",
        "isEditable": true,
        "uri": "https://example.com/reservation-uri",
        "placeActionType": "DINING_RESERVATION",
        "createTime": "2021-05-01T01:17:41.609161Z",
        "updateTime": "2021-05-01T01:17:41.609161Z"
    }
  2. গুগল ম্যাপস প্ল্যাটফর্ম প্লেস আইডির সাথে যুক্ত বিজনেস প্রোফাইলের অবস্থানটি খুঁজুন।

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

    1. আপনার প্রকল্পের অ্যাকাউন্টগুলোর তালিকা করুন
    2. একটি অ্যাকাউন্টের অন্তর্গত সমস্ত অবস্থান তালিকাভুক্ত করুন
    3. অ্যাকাউন্ট লোকেশনগুলোতে থাকা LocationKey তে গুগল ম্যাপস প্ল্যাটফর্মের প্লেস আইডি থাকে, যা আপনি দেখা লোকেশনটির প্লেস আইডির সাথে তুলনা করতে পারেন।
  3. লোকেশন আইডি ব্যবহার করে আপনি আপনার কাঙ্ক্ষিত অ্যাকশন লিঙ্কটি পেতে পারেন। একটি বিদ্যমান অ্যাপয়েন্টমেন্ট placeActionLink পুনরুদ্ধার করতে, লোকেশনটির জন্য বিদ্যমান placeActionLinks তালিকা দেখুন এবং আপনার ব্যবহার করতে চাওয়া অ্যাপয়েন্টমেন্ট লিঙ্কটি ( APPOINTMENT , ONLINE_APPOINTMENT , বা DINING_RESERVATION ) খুঁজে পেতে placeActionType অনুযায়ী ফিল্টার করুন।

    নিম্নলিখিত উদাহরণটি LIST কলের প্রতিক্রিয়াতে একটি APPOINTMENT placeActionLink দেখাচ্ছে।

     {
       "placeActionLinks": [
           {
               "name": "locations/15899957830169237700/placeActionLinks/9c984be778a7ebbc",
               "providerType": "MERCHANT",
               "isEditable": true,
               "uri": "https://example.com/",
               "placeActionType": "APPOINTMENT",
               "createTime": "2021-05-01T01:17:41.609161Z",
               "updateTime": "2021-05-01T01:17:41.609161Z"
           }
       ]
     }
  4. সাইড প্যানেলে placeActionLink অবজেক্ট থেকে প্রাসঙ্গিক ডেটা, বিশেষ করে অ্যাপয়েন্টমেন্ট বুকিং লিঙ্কের URI দিয়ে একটি <div> তৈরি ও পূরণ করুন।

অ্যাপয়েন্টমেন্ট লিঙ্ক যোগ করার জন্য অন্যান্য বিকল্প

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

স্থানীয় অফারগুলি প্রদর্শন করা হচ্ছে

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

( কুইক বিল্ডার বিভাগের স্থাপত্য নকশাটি আপনার লোকেটার-এ অফার যোগ করার জন্য উপলব্ধ প্রযুক্তিগুলো দেখায়।)

যেহেতু স্থানীয় অফারগুলি অবস্থানের সাথে যুক্ত থাকে, তাই ব্যবহারকারীরা যে অবস্থানটি দেখছেন, তার জন্য আপনাকে Google Maps Platform প্লেস আইডির সাথে যুক্ত বিজনেস প্রোফাইল লোকেশন আইডিটি খুঁজে বের করতে হবে। যখন আপনার কাছে বিজনেস প্রোফাইল লোকেশন আইডিটি থাকবে, তখন আপনি আপনার প্লেস ডিটেইলস সাইড প্যানেলে দেখানোর জন্য প্রাসঙ্গিক অফারটিকে একটি localPost হিসাবে পুনরুদ্ধার করতে পারবেন। ধাপগুলি নিচে দেওয়া হলো:

  1. Google My Business API ব্যবহার করে, আপনি প্রদর্শন করতে চান এমন OFFER টাইপের যেকোনো অফার পোস্ট তৈরি করুন
  2. মানচিত্রে স্থান আইডির সাথে যুক্ত ব্যবসায়িক প্রোফাইলের অবস্থান / অবস্থান আইডিটি খুঁজুন।

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

    1. আপনার প্রকল্পের অ্যাকাউন্টগুলোর তালিকা করুন
    2. একটি অ্যাকাউন্টের অন্তর্গত সমস্ত অবস্থান তালিকাভুক্ত করুন
    3. অ্যাকাউন্ট লোকেশনগুলোতে, LocationKey ম্যাপের প্লেস আইডি থাকে, যা আপনি দেখা লোকেশনের প্লেস আইডির সাথে তুলনা করতে পারেন।

    বিজনেস প্রোফাইল এপিআই-তে কোনো অবস্থানের বিবরণের জন্য একটি অনুরোধের উদাহরণ নিচে দেওয়া হলো:

    https://mybusiness.googleapis.com/v4/accounts/111098884960588804666/locations/15899957830169237700

    রেসপন্সটিতে একটি locationKey ফিল্ড থাকে, যা হলো স্থানের আইডি এবং এটি আপনি গুগল ম্যাপস প্ল্যাটফর্মের রিকোয়েস্টের জন্য ব্যবহার করতে পারেন।

    নমুনা প্রতিক্রিয়াটি দেখতে প্রসারিত করুন।

          {
        "name": "accounts/111098884960588804666/locations/15899957830169237700",
        "locationName": "Sushi Sushi",
        "primaryPhone": "+49 2222 22222",
        "primaryCategory": {
            "displayName": "Restaurant",
            "categoryId": "gcid:restaurant",
        },
        "regularHours": {
            "periods": [
                {
                    "openDay": "MONDAY",
                    "openTime": "09:00",
                    "closeDay": "MONDAY",
                    "closeTime": "09:10"
                },
                {
                    "openDay": "TUESDAY",
                    "openTime": "11:30",
                    "closeDay": "TUESDAY",
                    "closeTime": "24:00"
                }
            ]
        },
        "locationKey": {
            "placeId": "ChIJs4wtL04X2jERbc8qHd_wZzk",
            "requestId": "2c72cbcb-ea2e-4d66-b684-0ef5f090300c"
        },
        "latlng": {
            "latitude": 1.3670033,
            "longitude": 103.8556385
        },
        "openInfo": {
            "status": "OPEN",
            "canReopen": true
        },
        "locationState": {
            "isGoogleUpdated": true,
            "canUpdate": true,
            "canDelete": true,
            "isVerified": true,
            "isPublished": true,
            "canHaveFoodMenus": true
        },
        "attributes": [
            {
                "attributeId": "has_delivery",
                "valueType": "BOOL",
                "values": [
                    false
                ]
            },
            {
                "attributeId": "requires_masks_customers",
                "valueType": "BOOL",
                "values": [
                    true
                ]
            },
            {
                "attributeId": "url_order_ahead",
                "valueType": "URL",
                "urlValues": [
                    {
                        "url": "https://example.com/"
                    },
                ]
            },
            {
                "attributeId": "pay_credit_card_types_accepted",
                "valueType": "REPEATED_ENUM",
                "repeatedEnumValue": {
                    "setValues": [
                        "visa"
                    ],
                    "unsetValues": [
                        "american_express"
                    ]
                }
            }
        ],
        "address": {
            "regionCode": "SG",
            "languageCode": "en-US",
            "postalCode": "560445",
            "addressLines": [
                "445 Ang Mo Kio Ave 10"
            ]
        },
        "profile": {
            "description": "Example restaurant"
        }
    }
          
  3. এখন যেহেতু আপনার কাছে লোকেশন আইডি আছে, আপনি আপনার পছন্দের অফারটি পেতে পারেন। একটি বিদ্যমান অফার পোস্ট পুনরুদ্ধার করতে, সেই লোকেশনের জন্য বিদ্যমান localPosts তালিকা দেখুন এবং আপনার ব্যবহার করতে চাওয়া অফারের বিষয়বস্তু খুঁজে পেতে OFFER topicType দিয়ে ফিল্টার করুন।

    কোনো একটি অবস্থানের সক্রিয় স্থানীয় পোস্টগুলির তালিকা দেখানোর জন্য এখানে একটি অনুরোধের উদাহরণ দেওয়া হলো:

    https://mybusiness.googleapis.com/v4/accounts/111098884960588804666/locations/15899957830169237700/localPosts

    নিম্নলিখিত উদাহরণটি রেসপন্সে একটি OFFER localPost দেখাচ্ছে।

    নমুনা প্রতিক্রিয়াটি দেখতে প্রসারিত করুন।

    {
        "localPosts": [
            {
                "name": "accounts/111098884960588804666/locations/15899957830169237700/localPosts/2524928563578730680",
                "languageCode": "en",
                "summary": "Buy One Get One Free on all order-ahead bento boxes today!",
                "state": "LIVE",
                "event": {
                    "title": "Bento BOGO",
                    "schedule": {
                        "startDate": {
                            "year": 2020,
                            "month": 1,
                            "day": 20
                        },
                        "startTime": {},
                        "endDate": {
                            "year": 2021,
                            "month": 1,
                            "day": 21
                        },
                        "endTime": {}
                    }
                },
                "updateTime": "2020-09-11T10:56:22.594Z",
                "createTime": "2020-09-11T10:56:22.594Z",
                "searchUrl": "https://local.google.com/place?id=4156539623820808045&use=posts&lpsid=2524928563578730680",
                "media": [
                    {
                        "name": "accounts/111098884960588804666/locations/15899957830169237700/media/localPosts/AF1QipOBQCIf40SbF_PPJxb_zvfCHmaTbv9Zw02PoYPS",
                        "mediaFormat": "PHOTO",
                        "googleUrl": "https://lh3.googleusercontent.com/p/AF1QipOBQCIf40SbF_PPJxb_zvfCHmaTbv9Zw02PoYPS"
                    }
                ],
                "topicType": "OFFER",
                "offer": {
                    "couponCode": "BOGO-JET-CODE",
                    "redeemOnlineUrl": "https://www.example.com/redeem",
                    "termsConditions": "Offer only valid for order-ahead orders placed online."
                }
            },
        ],
    }
            
  4. localPost অবজেক্ট থেকে প্রাসঙ্গিক ডেটা দিয়ে সাইড প্যানেলে একটি <div> তৈরি করুন এবং তা পূরণ করুন।

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

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

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

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

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

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

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

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

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

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

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

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

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

ম্যাপ স্টাইল পেজে, 'ক্রিয়েট নিউ ম্যাপ স্টাইল' বোতামে মাউস ক্লিক করুন।  নিউ ম্যাপ স্টাইল পেজে, নিম্নলিখিত ইন্ডাস্ট্রি অপটিমাইজড স্টাইলগুলোর (যেমন: ট্র্যাভেল, লজিস্টিকস, রিয়েল এস্টেট, এবং রিটেইল) প্রত্যেকটির পাশের রেডিও বোতামে মাউস ক্লিক করুন।  প্রতিটি বোতামে ক্লিক করার সাথে সাথে ম্যাপ স্টাইলের বিবরণ এবং গ্রাফিক্যাল প্রিভিউ পরিবর্তিত হয়।

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

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

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

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

By including one or more map_ids in the script URL, the Maps JavaScript API automatically makes those styles available for faster map rendering when you call those styles in your code.

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

The following code displays a styled map on the web page. (Not shown is an HTML <div id="map"></div> element where the map will appear on the page.)

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

Learn more about incorporating cloud-based maps styling in JavaScript (web) , Android , and iOS .

Gaining usage insights with analytics

Using analytics, you can gain valuable insights about how users are interacting with your locator. This section provides guidance on configuring and monitoring Google Analytics and Business Profile analytics to track the data you're most interested in. For Quick Builder Locator Plus users, an analytics dashboard helps you analyze and generate insights, giving you a picture of how well your site visitors are engaging with your store locator, based on anonymized data.

Locator Plus Analytics
The store locator analytics dashboard provides you with performance metrics

To access this report, go to the engagement reports section of the Cloud console . For more details about this report, see engagement reports .

Given the power and flexibility of Google Analytics, we won't attempt to provide comprehensive setup and usage information. Instead, we'll point you to key documentation for further reading and instructions while highlighting the key analytics considerations for your locator app.

Setting up Google Analytics

If you're already using Google Analytics with your app, you can skip this section.

Following is an example of a “Global Tag” you'd paste on your site to enable Google Analytics.

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/
gtag/js?id=G-XR5B5D4NW0"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-XR5B5D4NW0');
</script>

Whether you're using Google Tag Manager or adding Google Analytics directly to your site, the key is to understand how to use your Google Analytics implementation to do the following:

Using custom events

Following is an example of defining a custom event in your locator:

gtag('event', 'location', {
  'method': 'address'
});

It's important to name your event and method clearly enough that you can understand events in reporting. Trigger them for the specific interactions you want to measure, such as when a user selects and address from the Autocomplete drop-down list, shown in the following figure.

You can send the following tracking call to Google Analytics that uses the event and method you defined. (We'll show each query parameter on a separate line for ease of reading.)

https://www.google-analytics.com/g/collect?v=2
&tid=G-XR5B5D4NW0
>m=2oe550
&_p=64678170
&sr=1920x1200
&ul=fr
&cid=489856786.1598861364
&_s=2
&dl=http%3A%2F%2.storelocator.html
&dt=Store%20Locator
&sid=1620827159
&sct=1
&seg=1
&en=location
&_et=6032
&ep.method=address

The following figure shows how that Google Analytics call appears in the browser's Inspect view, on the Network tab. (Click to enlarge).

You can verify that your custom event tags are properly being captured by viewing the "Real-time" view in Google Analytics. For example, the "location" event set up previously for Place Autocomplete appears in Google Analytics as shown in the following figures.

Alternatively, you could monitor real-time events using the DebugView, as shown in the following figure. Note that you have to wait 24 hours before accessing a full Events report in the Engagement > Events section of Google Analytics.

You can also develop and measure strategies to drive more foot traffic to your physical locations from your locator app. For example, Google Analytics has a Store Visits in Analytics offering that links physical store visits analytics (measured by Google Ads) to your locator analytics. You can also develop your own app-to-location strategies, such as online offers redeemable at your physical locations.

Business Profile metrics

In addition to tracking the events, metrics, and dimensions you're interested in with Google Analytics, Business Profile also has its own metrics . For example, if you add appointment booking and local offer links to your locator, you can get metrics on those views and clicks.

The following sample request to the Business Profile APIs asks for multiple types of metrics. For tracking offer clicks, the LOCAL_POST_VIEWS_SEARCH and LOCAL_POST_ACTIONS_CALL_TO_ACTION metrics would be the most relevant.

Expand to see the sample request.

POST https://mybusiness.googleapis.com/v4/accounts/111098884960528804666/locations:reportInsights
Body:
{
 "locationNames": [
   "accounts/111098884960528804666/locations/15899957830169237700"
 ],
 "basicRequest": {
         "metricRequests": [
            {
              "metric": "QUERIES_DIRECT"
            },
            {
              "metric": "QUERIES_INDIRECT"
            },
            {
              "metric": "VIEWS_MAPS"
            },
            {
              "metric": "VIEWS_SEARCH"
            },
            {
                "metric": "ACTIONS_DRIVING_DIRECTIONS"
            },
            {
                "metric": "LOCAL_POST_VIEWS_SEARCH"
            },
            {
                "metric": "LOCAL_POST_ACTIONS_CALL_TO_ACTION"
            }
         ],
         "timeRange": {
              "startTime": "2021-01-01T01:01:23.045123456Z",
              "endTime": "2021-04-30T23:59:59.045123456Z"
         }
   }
}

Expand to see the sample response.

{
   "locationMetrics": [
       {
           "locationName": "accounts/111098884960528804666/locations/15899957830169237700",
           "timeZone": "Asia/Singapore",
           "metricValues": [
               {
                   "metric": "QUERIES_DIRECT",
                   "totalValue": {
                       "metricOption": "AGGREGATED_TOTAL",
                       "timeDimension": {
                           "timeRange": {
                               "startTime": "2021-01-01T01:01:23.045123456Z",
                               "endTime": "2021-04-30T23:59:59.045123456Z"
                           }
                       },
                       "value": "82"
                   }
               },
               {
                   "metric": "QUERIES_INDIRECT",
                   "totalValue": {
                       "metricOption": "AGGREGATED_TOTAL",
                       "timeDimension": {
                           "timeRange": {
                               "startTime": "2021-01-01T01:01:23.045123456Z",
                               "endTime": "2021-04-30T23:59:59.045123456Z"
                           }
                       },
                       "value": "1493"
                   }
               },
               {
                   "metric": "VIEWS_MAPS",
                   "totalValue": {
                       "metricOption": "AGGREGATED_TOTAL",
                       "timeDimension": {
                           "timeRange": {
                               "startTime": "2021-01-01T01:01:23.045123456Z",
                               "endTime": "2021-04-30T23:59:59.045123456Z"
                           }
                       },
                       "value": "1571"
                   }
               },
               {
                   "metric": "VIEWS_SEARCH",
                   "totalValue": {
                       "metricOption": "AGGREGATED_TOTAL",
                       "timeDimension": {
                           "timeRange": {
                               "startTime": "2021-01-01T01:01:23.045123456Z",
                               "endTime": "2021-04-30T23:59:59.045123456Z"
                           }
                       },
                       "value": "631"
                   }
               },
               {
                   "metric": "ACTIONS_DRIVING_DIRECTIONS",
                   "totalValue": {
                       "metricOption": "AGGREGATED_TOTAL",
                       "timeDimension": {
                           "timeRange": {
                               "startTime": "2021-01-01T01:01:23.045123456Z",
                               "endTime": "2021-04-30T23:59:59.045123456Z"
                           }
                       },
                       "value": "3"
                   }
               },
               {
                   "metric": "LOCAL_POST_ACTIONS_CALL_TO_ACTION",
                   "totalValue": {
                       "metricOption": "AGGREGATED_TOTAL",
                       "timeDimension": {
                           "timeRange": {
                               "startTime": "2021-01-01T01:01:23.045123456Z",
                               "endTime": "2021-04-30T23:59:59.045123456Z"
                           }
                       },
                       "value": "42"
                   }
               },
               {
                   "metric": "LOCAL_POST_VIEWS_SEARCH",
                   "totalValue": {
                       "metricOption": "AGGREGATED_TOTAL",
                       "timeDimension": {
                           "timeRange": {
                               "startTime": "2021-01-01T01:01:23.045123456Z",
                               "endTime": "2021-04-30T23:59:59.045123456Z"
                           }
                       },
                       "value": "11"
                   }
               }
           ]
       }
   ]
}

The response contains the metrics, most notably:

  • 1571 views of the location on Google Maps
  • 631 location views on Google Search.
  • 3 requests for Driving Directions to the location.
  • 42 LOCAL_POST_ACTIONS_CALL_TO_ACTION offer clicks.
  • 11 views of Local Posts on Google Search.

Another metrics option involves using Reserve with Google to create action links. When users click action links created in Reserve with Google, you can log those actions to Google Analytics, which lets you track conversions in Google Analytics. See the conversion tracking documentation for more information.

Regardless of the metrics strategy you use, measurement is more than seeing how you're doing against your KPIs. The numbers also help you understand the impact these locator improvements have on your business. Additionally, you can compare the metrics from Google Analytics on your locator with the Business Profile metrics. For instance, by comparing these metrics, you can see how many customers are getting directions from your locator and Google Maps to then visit your physical locations.


Enhancing Locator Plus

Depending on your business' or users' needs, you can further enhance the user's experience.

Sending directions to mobile

To make it even easier for users to reach a location, you can text or email them a directions link. When they click it, the Google Maps app will launch on their phone if it is installed, or maps.google.com will load in their device's web browser. Both of these experiences provide the user with the option to use turn-by-turn navigation, including voice guidance, to reach the destination.

Use Maps URLs to compose a directions URL like the following, with the URL-encoded place name as the destination parameter and place ID as the destination_place_id parameter. There is no cost to compose or use Maps URLs, so you don't need to include an API key in the URL.

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

You can optionally provide an origin query parameter using the same address format as the destination. But by omitting it, the directions start from the user's current location, which may be different from where they were using your Locator Plus app. Maps URLs provide additional query parameter options, such as travelmode and dir_action=navigate to launch the directions with navigation turned on.

This clickable link , which extends the example URL above, sets the origin as a London football stadium and uses travelmode=transit to provide public transit directions to the destination.

To send a text or email containing this URL, we currently recommend using a third-party application such as twilio . If you're using App Engine, you can use third-party companies to send SMS messages or email. For more information, see Sending Messages with Third-Party Services .

Showing Street View to help users visualize locations

For many locations in the world, Street View can be used to display the outside of a location, offering users a visual of the location before they arrive. You can provide Street View in either an interactive (web) or static (API) form, depending on whether you want your users to "look around" the area in 360 degrees. Street Viewis also available for Android and iOS .

Determining user location with Geolocation

In most cases, you can pinpoint user location using the location services built into their devices or browsers. We provide an example of using a browser's HTML5 Geolocation feature to display the geographic location of a user or device on a Google map, and there's documentation on requesting permissions and obtaining location in Android and iOS . However, there may be situations where you want an alternative location finder; for example, if device location services are disabled or you have concerns about device location being spoofed.

The Geolocation API is a server-side API that returns a location and accuracy radius based on information about cell towers and Wi-Fi nodes that the client can detect. You can use Geolocation as a backup mechanism for determining user location, or you can use it to cross-check the location reported by the device.

Combining custom location data with Place Details

In the previous Providing Place Details section, we covered using Place Details to give users a rich level of information about your locations, such as opening hours, photos, and reviews.

It's helpful to understand the cost of different data fields in Place Details, which are categorized as Basic, Contact, and Atmosphere Data. To manage your costs, one strategy is to combine the information you already have about your locations with the fresh information (usually Basic and Contact Data) from Google Maps such as temporary closure, holiday hours, and user ratings, photos, and reviews. If you already have the contact information for your locations, you won't need to request those fields from Place Details and can constrain your request to fetch only Basic or Atmosphere Data fields depending on what you want to display.

You may have your own place data to supplement or use instead of Place Details. The codelab for the full-stack locator provides an example of using GeoJSON with a database to store and retrieve your own location details.