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

ওভারভিউ

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

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

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

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

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

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

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

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

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

এপিআই সক্ষম করা হচ্ছে

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

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

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

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

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

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

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

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

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

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

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

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

এটি সক্ষম করার একাধিক উপায় রয়েছে: (1) বাক্সের বাইরে এই কার্যকারিতা সরবরাহ করতে কুইক বিল্ডার লোকেটার প্লাস সমাধান ব্যবহার করে এবং (2) আপনার নিজস্ব ডায়নামিক মানচিত্র বাস্তবায়ন ব্যবহার করে৷ এই বিভাগে এই বিকল্পগুলি বিস্তারিতভাবে বর্ণনা করা হয়েছে।

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

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

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

ক্লাউডে স্থাপন করুন
Google ক্লাউড ব্যবহার করে সহজেই আপনার লোকেটার প্লাস সমাধান স্থাপন করুন

আপনার নিজস্ব ডায়নামিক মানচিত্র বাস্তবায়ন ব্যবহার করে

এই উদাহরণটি ব্যবহার করে: Maps JavaScript API এছাড়াও উপলব্ধ: Android | iOS

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

প্রথমে, আপনাকে পৃষ্ঠায় Maps JavaScript API অন্তর্ভুক্ত করতে হবে। এটি আপনার HTML পৃষ্ঠায় নিম্নলিখিত স্ক্রিপ্ট লিঙ্ক করার মাধ্যমে করা হয়।

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

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

এরপরে, পৃষ্ঠায় আপনার মানচিত্র স্থাপন করার জন্য আপনার একটি HTML div প্রয়োজন। এটি সেই জায়গা যেখানে মানচিত্রটি প্রদর্শিত হবে।

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

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

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

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

জায়গার আইডি পাওয়া যাচ্ছে

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

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

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

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

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

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

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

Google লন্ডন অফিসের জন্য যে জায়গা আইডি ফেরত দেওয়া হয়েছিল তার অক্ষাংশ এবং দ্রাঘিমাংশ পেতে জিওকোডিং 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);

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

যদি প্রচুর সংখ্যক অবস্থান থাকে তবে আপনি JavaScript , Android , বা iOS এর জন্য একটি মার্কার ক্লাস্টারিং ইউটিলিটি ব্যবহার করার কথা বিবেচনা করতে পারেন৷ এখানে জাভাস্ক্রিপ্ট স্টোর লোকেটার গিটহাব নমুনায় মার্কার ক্লাস্টারিংয়ের একটি উদাহরণ

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

এই উদাহরণটি ব্যবহার করে: Maps JavaScript API এছাড়াও উপলব্ধ: API | অ্যান্ড্রয়েড | iOS

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

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

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

খোলার সময় পান

বন্ধ চেক করুন

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

নিম্নলিখিত উদাহরণটি স্থানের বিবরণ পুনরুদ্ধার করতে এবং সেগুলিকে একটি InfoWindow-এ যুক্ত করার জন্য Places Library, 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);
      }
    });
  });
  
  

45° ভিউ থেকে অবস্থান দেখানো হচ্ছে

এই উদাহরণটি ব্যবহার করে: Maps JavaScript API এছাড়াও উপলব্ধ: Android | iOS

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

নিম্নলিখিত কোড নমুনা মানচিত্রটিকে একটি উচ্চ জুম স্তরে সেট করে, একটি সামঞ্জস্যপূর্ণ মানচিত্র প্রকার এবং একটি টিল্ট কোণ যা উপলব্ধ হলে 45° চিত্র প্রদর্শন করবে৷ 45° চিত্রের প্রাপ্যতা সম্পর্কে বিস্তারিত ডকুমেন্টেশনে ব্যাখ্যা করা হয়েছে।

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 এছাড়াও উপলব্ধ: Android | iOS

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

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

আপনার সাইটে স্থান স্বয়ংসম্পূর্ণ লাইব্রেরি যোগ করা ম্যাপ জাভাস্ক্রিপ্ট API স্ক্রিপ্ট URL-এ কয়েকটি ক্যোয়ারী প্যারামিটার যোগ করার একটি বিষয়। নিম্নলিখিত উদাহরণে, সংযোজন হল 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);
}

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

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

ওয়েবসাইট

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

iOS অ্যাপস

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

এই উদাহরণটি ব্যবহার করে: দূরত্ব ম্যাট্রিক্স API এছাড়াও উপলব্ধ: দূরত্ব ম্যাট্রিক্স পরিষেবা, মানচিত্র জাভাস্ক্রিপ্ট API

একবার আপনার কাছে ব্যবহারকারীর অবস্থান হয়ে গেলে, আপনি এটির সাথে তুলনা করতে পারেন যেখানে আপনার অবস্থানগুলি রয়েছে৷ দূরত্ব ম্যাট্রিক্স পরিষেবার সাথে এটি করা, মানচিত্র জাভাস্ক্রিপ্ট API আপনার ব্যবহারকারীদের ড্রাইভিং সময় বা রাস্তার দূরত্বের মাধ্যমে তাদের জন্য সবচেয়ে সুবিধাজনক অবস্থান নির্বাচন করতে সহায়তা করে৷

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

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

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

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

URL এনকোডিং দ্রুত রেফারেন্স: %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"
}

নিম্নলিখিত চিত্রটি একটি মানচিত্রে মূল (লাল মার্কার সি) এবং গন্তব্যগুলি দেখায়:

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

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

অবস্থান সোজা দূরত্ব ট্রাফিক / সময় রাস্তা
অবস্থান A 3.32 কিমি 4.5 কিমি / 15 মিনিট
অবস্থান বি 3.20 কিমি 5.0 কিমি / 17 মিনিট
অবস্থান সি 4.84 কিমি 6.9 কিমি / 23 মিনিট

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

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

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

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

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

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

এই মানচিত্র বৈশিষ্ট্যগুলি সম্পর্কে আরও জানতে, মানচিত্র জাভাস্ক্রিপ্ট API ডকুমেন্টেশন পড়ুন বা একটি লোকেটার তৈরি করতে ধাপে ধাপে কোডল্যাবগুলি দেখুন৷

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

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

এটি সক্ষম করার একাধিক উপায় রয়েছে: (1) বাক্সের বাইরে এই কার্যকারিতা প্রদান করতে কুইক বিল্ডার লোকেটার প্লাস সমাধান ব্যবহার করে এবং (2) আপনার ব্যবসার প্রোফাইল ব্যবহার করে। এই বিভাগে এই বিকল্পগুলি বিস্তারিতভাবে বর্ণনা করা হয়েছে।

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

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

Google এর সাথে রিজার্ভ করুন
আপনার দোকান লোকেটার মধ্যে বুকিং ক্ষমতা যোগ করুন

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

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

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

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

ব্যবহারকারীরা যখন পাশের প্যানেলে আপনার অবস্থানগুলির একটির জন্য স্থানের বিবরণ দেখেন, আপনি তাদের একটি অ্যাপয়েন্টমেন্ট করার জন্য একটি লিঙ্ক প্রদান করতে পারেন৷ এই বিভাগে কিভাবে বর্ণনা করা হয়.

  1. APPOINTMENT , ONLINE_APPOINTMENT , বা DINING_RESERVATION টাইপের লোকেশনের জন্য একটি ব্যবসায়িক প্রোফাইল APIs 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. Google মানচিত্র প্ল্যাটফর্ম স্থান আইডির সাথে যুক্ত ব্যবসার প্রোফাইল অবস্থান খুঁজুন।

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

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

    নিম্নলিখিত উদাহরণটি তালিকা কলের প্রতিক্রিয়াতে একটি 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 ক্লাউড ব্যবহার করা, যেমন ক্লাউড স্প্যানার ইনভেন্টরি ম্যানেজমেন্টের জন্য (ভিডিও)।

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

একটি অবস্থানের জন্য স্থানের বিবরণ পাশের প্যানেলে, ব্যবহারকারীদের ক্লিক করার জন্য আপনি স্থানীয় অফারগুলি দেখাতে পারেন৷ Google My Business API আপনাকে আপনার অবস্থানের সাথে যুক্ত "পোস্ট" (যেমন স্থানীয় অফার) তৈরি এবং পুনরুদ্ধার করতে দেয়। নিচের চিত্রটি একটি স্থানের বিবরণ পাশের প্যানেলে একটি স্থানীয় অফারের উদাহরণ দেখায়৷

( পূর্ববর্তী বিভাগে স্থাপত্য চিত্রটি আপনার লোকেটারে অফার যোগ করার জন্য উপলব্ধ প্রযুক্তি দেখায়।)

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

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

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

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

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

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

    প্রতিক্রিয়াটিতে একটি locationKey ক্ষেত্র রয়েছে যা আপনি Google মানচিত্র প্ল্যাটফর্ম অনুরোধের সাথে ব্যবহার করতে পারেন এমন একটি স্থান আইডি।

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

          {
        "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

    নিম্নলিখিত localPost প্রতিক্রিয়াতে একটি OFFER স্থানীয় পোস্ট দেখায়৷

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

    {
        "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. স্থানীয় পোস্ট অবজেক্ট থেকে প্রাসঙ্গিক ডেটা সহ পাশের প্যানেলে একটি <div> তৈরি করুন এবং localPost করুন।

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

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

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

কাস্টম মানচিত্র মার্কার তৈরি করা হচ্ছে

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

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

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

আপনার মানচিত্র স্টাইলিং

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

আপনি আপনার প্রকল্পে Google ক্লাউড কনসোল মানচিত্র শৈলী পৃষ্ঠায় মানচিত্রের শৈলী তৈরি বা সংশোধন করতে পারেন।

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

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

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

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

আগ্রহ নিয়ন্ত্রণের পয়েন্ট

এই অ্যানিমেশনটি আগ্রহের পয়েন্টগুলির জন্য মার্কার রঙ সেট করে এবং মানচিত্রের শৈলীতে POI ঘনত্ব বাড়ায়। ঘনত্ব যত বেশি হবে, মানচিত্রে তত বেশি POI মার্কার প্রদর্শিত হবে।

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

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

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 Analtics 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 brower'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.