জাভাস্ক্রিপ্ট শিপমেন্ট ট্র্যাকিং লাইব্রেরি আপনাকে যানবাহনের অবস্থান এবং ফ্লিট ইঞ্জিনে ট্র্যাক করা আগ্রহের অবস্থানগুলি কল্পনা করতে দেয়৷ লাইব্রেরিতে একটি জাভাস্ক্রিপ্ট মানচিত্র উপাদান রয়েছে যা ফ্লিট ইঞ্জিনের সাথে সংযোগ করার জন্য একটি আদর্শ google.maps.Map সত্তা এবং ডেটা উপাদানগুলির জন্য একটি ড্রপ-ইন প্রতিস্থাপন। JavaScript শিপমেন্ট ট্র্যাকিং লাইব্রেরি ব্যবহার করে, আপনি আপনার ওয়েব অ্যাপ্লিকেশন থেকে একটি কাস্টমাইজযোগ্য, অ্যানিমেটেড চালান ট্র্যাকিং অভিজ্ঞতা প্রদান করতে পারেন।
উপাদান
জাভাস্ক্রিপ্ট শিপমেন্ট ট্র্যাকিং লাইব্রেরি একটি গন্তব্যে অগ্রসর হওয়ার সাথে সাথে গাড়ি এবং রুটের ভিজ্যুয়ালাইজেশনের জন্য উপাদান সরবরাহ করে, সেইসাথে ড্রাইভারের ইটিএ বা ড্রাইভ করার অবশিষ্ট দূরত্বের জন্য কাঁচা ডেটা ফিড।
চালান ট্র্যাকিং মানচিত্র দৃশ্য
মানচিত্র দৃশ্য উপাদান যানবাহন এবং গন্তব্যের অবস্থান কল্পনা করে। যদি একটি যানবাহনের রুট জানা থাকে, তাহলে মানচিত্র দৃশ্য উপাদানটি সেই গাড়িটিকে অ্যানিমেট করে যখন এটি তার পূর্বাভাসিত পথ ধরে চলে।
চালান অবস্থান প্রদানকারী
একটি চালান অবস্থান প্রদানকারী প্রথম এবং শেষ মাইল চালান ট্র্যাকিংয়ের জন্য চালান ট্র্যাকিং মানচিত্রে ট্র্যাক করা বস্তুর অবস্থানের তথ্য ফিড করে।
আপনি ট্র্যাক করতে চালানের অবস্থান প্রদানকারী ব্যবহার করতে পারেন:
- একটি চালানের পিকআপ বা ডেলিভারির অবস্থান।
- ডেলিভারি গাড়ির অবস্থান এবং রুট।
ট্র্যাক করা অবস্থান বস্তু
অবস্থান প্রদানকারী যানবাহন এবং গন্তব্যের মতো বস্তুর অবস্থান ট্র্যাক করে।
গন্তব্য অবস্থান
গন্তব্য অবস্থান হল সেই অবস্থান যেখানে একটি যাত্রা শেষ হয়। চালান ট্র্যাকিং জন্য, এটি পরিকল্পিত টাস্ক অবস্থান.
গাড়ির অবস্থান
গাড়ির অবস্থান হল একটি গাড়ির ট্র্যাক করা অবস্থান। এটি ঐচ্ছিকভাবে গাড়ির জন্য একটি রুট অন্তর্ভুক্ত করতে পারে।
প্রমাণীকরণ টোকেন ফেচার
ফ্লিট ইঞ্জিনে সঞ্চিত অবস্থানের ডেটা অ্যাক্সেস নিয়ন্ত্রণ করতে, আপনাকে অবশ্যই আপনার সার্ভারে ফ্লিট ইঞ্জিনের জন্য একটি JSON ওয়েব টোকেন (JWT) মিন্টিং পরিষেবা প্রয়োগ করতে হবে। তারপর আপনার ওয়েব অ্যাপ্লিকেশনের অংশ হিসাবে একটি প্রমাণীকরণ টোকেন ফেচার প্রয়োগ করুন , জাভাস্ক্রিপ্ট জার্নি শেয়ারিং লাইব্রেরি ব্যবহার করে অবস্থান ডেটাতে অ্যাক্সেস প্রমাণীকরণ করুন৷
স্টাইলিং বিকল্প
মার্কার এবং পলিলাইন শৈলী মানচিত্রে ট্র্যাক করা অবস্থান বস্তুর চেহারা এবং অনুভূতি নির্ধারণ করে। আপনার ওয়েব অ্যাপ্লিকেশনের স্টাইলিংয়ের সাথে মেলে ডিফল্ট স্টাইলিং পরিবর্তন করতে আপনি কাস্টম স্টাইলিং বিকল্পগুলি ব্যবহার করতে পারেন৷
ট্র্যাক করা অবস্থানের দৃশ্যমানতা নিয়ন্ত্রণ করুন
এই বিভাগটি মানচিত্রে ট্র্যাক করা বস্তুর জন্য দৃশ্যমানতা নিয়ন্ত্রণগুলি বর্ণনা করে৷ এই নিয়ম দুটি বিষয়শ্রেণীতে প্রযোজ্য:
- অবস্থান চিহ্নিতকারী
- টাস্ক ডেটা
অবস্থান চিহ্নিতকারী দৃশ্যমানতা
উত্স এবং গন্তব্যের জন্য সমস্ত অবস্থান চিহ্নিতকারী সর্বদা মানচিত্রে দেখানো হয়৷ উদাহরণস্বরূপ, ডেলিভারির অবস্থা নির্বিশেষে একটি চালান বিতরণের অবস্থান সর্বদা মানচিত্রে দেখানো হয়।
টাস্ক ডেটা দৃশ্যমানতা
এই বিভাগটি ডিফল্ট দৃশ্যমানতার নিয়ম বর্ণনা করে যা টাস্ক ডেটাতে প্রযোজ্য, যেমন গাড়ির অবস্থান এবং অবশিষ্ট রুট। আপনি অনেক কাজ কাস্টমাইজ করতে পারেন কিন্তু সবগুলো নয়:
- অনুপলব্ধতা কাজ -- আপনি এই কাজের জন্য দৃশ্যমানতা কাস্টমাইজ করতে পারবেন না.
- সক্রিয় গাড়ির কাজ -- আপনি এই ধরনের কাজ কাস্টমাইজ করতে পারেন।
- নিষ্ক্রিয় যানবাহনের কাজ -- আপনি এই কাজের জন্য দৃশ্যমানতা কাস্টমাইজ করতে পারবেন না।
অনুপলব্ধ কাজ
ট্র্যাক করা টাস্কের রুটে যদি অন্তত একটি অনুপলব্ধ কাজ থাকে (উদাহরণস্বরূপ, ড্রাইভার যদি বিরতি নিচ্ছেন বা গাড়িতে জ্বালানি দেওয়া হচ্ছে) তবে গাড়িটি দৃশ্যমান নয়। আনুমানিক আগমনের সময় এবং আনুমানিক কাজ সমাপ্তির সময় এখনও উপলব্ধ।
সক্রিয় যানবাহন কাজ
TaskTrackingInfo অবজেক্ট অনেকগুলি ডেটা উপাদান সরবরাহ করে যা শিপমেন্ট ট্র্যাকিং লাইব্রেরির মধ্যে দৃশ্যমান করা যেতে পারে। ডিফল্টরূপে, এই ক্ষেত্রগুলি দৃশ্যমান হয় যখন টাস্কটি গাড়িতে বরাদ্দ করা হয় এবং যখন গাড়িটি টাস্কের 5 স্টপের মধ্যে থাকে। টাস্ক সম্পূর্ণ বা বাতিল হলে দৃশ্যমানতা শেষ হয়। ক্ষেত্রগুলি নিম্নরূপ:
- রুট পলিলাইন
- পৌঁছানোর আনুমানিক সময়
- আনুমানিক টাস্ক সমাপ্তির সময়
- টাস্ক ড্রাইভিং দূরত্ব অবশিষ্ট
- অবশিষ্ট স্টপ গণনা
- গাড়ির অবস্থান
আপনি ফ্লিট ইঞ্জিনের মধ্যে টাস্ক তৈরি বা আপডেট করার সময় একটি টাস্কে TaskTrackingViewConfig সেট করে প্রতি টাস্ক ভিত্তিতে দৃশ্যমানতা কনফিগারেশন কাস্টমাইজ করতে পারেন। এটি পৃথক ডেটা উপাদানগুলি উপলব্ধ হওয়ার নিয়ম তৈরি করে যা নিম্নলিখিত মানদণ্ডের উপর ভিত্তি করে হতে পারে (নীচে দৃশ্যমানতার বিকল্প হিসাবে উল্লেখ করা হয়েছে):
- অবশিষ্ট স্টপ গণনা
- আনুমানিক আগমনের সময় পর্যন্ত সময়কাল
- অবশিষ্ট ড্রাইভিং দূরত্ব
- সর্বদা দৃশ্যমান
- কখনো দেখা যায় না
মনে রাখবেন যে প্রতিটি ডেটা উপাদান শুধুমাত্র একটি দৃশ্যমানতা বিকল্পের সাথে যুক্ত করা যেতে পারে। OR বা AND ব্যবহার করে মানদণ্ড একত্রিত করা সম্ভব নয়।
কাস্টমাইজেশনের একটি উদাহরণ নিম্নরূপ। সেই কাস্টমাইজেশনের নিয়মগুলি হল:
- গাড়িটি 3 স্টপেজের মধ্যে থাকলে রুট পলিলাইন দেখান।
- বাকি ড্রাইভিং দূরত্ব 5000 মিটারের কম হলে ETA দেখান।
- অবশিষ্ট স্টপ গণনা দেখান না.
- প্রতিটি অন্য ক্ষেত্র ডিফল্ট দৃশ্যমানতা বজায় রাখে যখন গাড়িটি টাস্কের 5 স্টপের মধ্যে থাকে।
"taskTrackingViewConfig": {
"routePolylinePointsVisibility": {
"remainingStopCountThreshold": 3
},
"estimatedArrivalTimeVisibility": {
"remainingDrivingDistanceMetersThreshold": 5000
},
"remainingStopCountVisibility": {
"never": true
}
}
আপনি সহায়তা দলের সাথে যোগাযোগ করে আপনার প্রকল্পের জন্য ডিফল্ট দৃশ্যমানতা কনফিগারেশন কাস্টমাইজ করতে পারেন৷
রুট পলিলাইন এবং গাড়ির অবস্থান দৃশ্যমানতার নিয়ম:
যখন রুট পলিলাইনগুলি দৃশ্যমান হয়, তখন গাড়ির অবস্থানটিও দৃশ্যমান হতে হবে, অন্যথায় পলিলাইনগুলির শেষে গাড়ির অবস্থান নির্দেশিত হতে পারে৷ তার মানে রুট পলিলাইনে কম সীমাবদ্ধ দৃশ্যমানতার বিকল্প থাকতে পারে না।
একটি বৈধ রুট পলিলাইন / যানবাহনের অবস্থান দৃশ্যমানতার সমন্বয় প্রদান করতে এই নিয়মগুলি অবশ্যই অনুসরণ করতে হবে:
যখন রুট পলিলাইন এবং গাড়ির অবস্থান একই দৃশ্যমান বিকল্পের ধরন থাকে:
- যদি দৃশ্যমানতার বিকল্পটি স্টপ কাউন্ট বাকি থাকে, ETA পর্যন্ত সময়কাল, বা অবশিষ্ট ড্রাইভিং দূরত্ব, রুট পলিলাইনগুলিকে অবশ্যই একটি মান প্রদান করতে হবে যা গাড়ির অবস্থানের জন্য এই দৃশ্যমানতার বিকল্পের জন্য সেট করা মানের থেকে কম বা সমান। একটি উদাহরণ নিম্নরূপ:
"taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingStopCountThreshold": 5 }, }- যদি রুট পলিলাইনগুলিতে একটি সর্বদা দৃশ্যমান দৃশ্যমান বিকল্প থাকে, তাহলে গাড়ির অবস্থান অবশ্যই একটি সর্বদা দৃশ্যমান দৃশ্যমান বিকল্প প্রদান করবে।
- যদি গাড়ির লোকেশনে কখনও দৃশ্যমান দৃশ্যমানতার বিকল্প না থাকে, তাহলে রুট পলিলাইনগুলিকে অবশ্যই কখনও দৃশ্যমান দৃশ্যমানতার বিকল্প প্রদান করতে হবে।
যখন রুট পলিলাইন এবং গাড়ির অবস্থানের বিভিন্ন দৃশ্যমানতার বিকল্পের ধরন থাকে, তখন গাড়ির অবস্থান তখনই দৃশ্যমান হয় যখন তাদের দৃশ্যমানতার বিকল্প উভয়ই সন্তুষ্ট হয়।
একটি উদাহরণ নিম্নরূপ:
"taskTrackingViewConfig": { "routePolylinePointsVisibility": { "remainingStopCountThreshold": 3 }, "vehicleLocationVisibility": { "remainingDrivingDistanceMetersThreshold": 3000 }, }এই উদাহরণে, গাড়ির অবস্থানটি কেবল তখনই দৃশ্যমান হয় যদি অবশিষ্ট থামার সংখ্যা কমপক্ষে 3 হয় এবং অবশিষ্ট ড্রাইভিং দূরত্ব কমপক্ষে 3000 মিটার হয়৷
জাভাস্ক্রিপ্ট জার্নি শেয়ারিং লাইব্রেরি দিয়ে শুরু করুন
JavaScript জার্নি শেয়ারিং লাইব্রেরি ব্যবহার করার আগে নিশ্চিত হয়ে নিন যে আপনি ফ্লিট ইঞ্জিন এবং একটি API কী পাওয়ার সাথে পরিচিত।
একটি ডেলিভারি ট্র্যাক করতে, প্রথমে একটি ট্র্যাকিং আইডি দাবি তৈরি করুন৷
একটি ট্র্যাকিং আইডি দাবি তৈরি করুন
চালান অবস্থান প্রদানকারী ব্যবহার করে একটি চালান ট্র্যাক করতে, একটি ট্র্যাকিং আইডি দাবি সহ একটি JSON ওয়েব টোকেন (JWT) তৈরি করুন৷
JWT পেলোড তৈরি করতে, কী trackingid সহ অনুমোদন বিভাগে একটি অতিরিক্ত দাবি যোগ করুন। শিপমেন্ট ট্র্যাকিং আইডিতে এর মান সেট করুন।
নিম্নলিখিত উদাহরণ দেখায় কিভাবে ট্র্যাকিং আইডি দ্বারা ট্র্যাকিংয়ের জন্য একটি টোকেন তৈরি করতে হয়:
{
"alg": "RS256",
"typ": "JWT",
"kid": "private_key_id_of_consumer_service_account"
}
.
{
"iss": "consumer@yourgcpproject.iam.gserviceaccount.com",
"sub": "consumer@yourgcpproject.iam.gserviceaccount.com",
"aud": "https://fleetengine.googleapis.com/",
"iat": 1511900000,
"exp": 1511903600,
"scope": "https://www.googleapis.com/auth/xapi",
"authorization": {
"trackingid": "tid_54321",
}
}
একটি প্রমাণীকরণ টোকেন ফেচার তৈরি করুন৷
আপনি আপনার প্রকল্পের জন্য একটি পরিষেবা অ্যাকাউন্ট শংসাপত্র ব্যবহার করে আপনার সার্ভারগুলিতে উপযুক্ত দাবি সহ একটি টোকেন পুনরুদ্ধার করতে একটি প্রমাণীকরণ টোকেন ফেচার তৈরি করতে পারেন৷ আপনার সার্ভারে শুধুমাত্র টোকেন মিন্ট করা গুরুত্বপূর্ণ এবং কোনো ক্লায়েন্টের সাথে আপনার সার্টিফিকেট শেয়ার করবেন না। অন্যথায়, আপনি আপনার সিস্টেমের নিরাপত্তার সাথে আপস করবেন।
একটি প্রতিশ্রুতিতে মোড়ানো দুটি ক্ষেত্র সহ একটি ডেটা স্ট্রাকচার আনতে হবে:
- একটি স্ট্রিং
token। - একটি সংখ্যার
expiresInSeconds। একটি টোকেন আনার পর এই পরিমাণ সময়ের মধ্যে মেয়াদ শেষ হয়ে যায়।
জাভাস্ক্রিপ্ট শিপমেন্ট ট্র্যাকিং লাইব্রেরি প্রমাণীকরণ টোকেন ফেচারের মাধ্যমে একটি টোকেনের অনুরোধ করে যখন নিম্নলিখিতগুলির মধ্যে যেকোনটি সত্য হয়:
- এটির একটি বৈধ টোকেন নেই, যেমন যখন এটি একটি নতুন পৃষ্ঠা লোডের জন্য ফেচারকে কল করেনি বা যখন ফেচারটি একটি টোকেন নিয়ে ফিরে আসেনি৷
- আগে যে টোকেনটি আনা হয়েছিল তার মেয়াদ শেষ হয়ে গেছে।
- এটি আগে যে টোকেনটি আনা হয়েছিল সেটি মেয়াদ শেষ হওয়ার এক মিনিটের মধ্যে।
অন্যথায়, লাইব্রেরি পূর্বে জারি করা, এখনও বৈধ টোকেন ব্যবহার করে এবং ফেচারকে কল করে না।
নিম্নলিখিত উদাহরণ দেখায় কিভাবে একটি প্রমাণীকরণ টোকেন ফেচার তৈরি করতে হয়:
জাভাস্ক্রিপ্ট
function authTokenFetcher(options) {
// options is a record containing two keys called
// serviceType and context. The developer should
// generate the correct SERVER_TOKEN_URL and request
// based on the values of these fields.
const response = await fetch(SERVER_TOKEN_URL);
if (!response.ok) {
throw new Error(response.statusText);
}
const data = await response.json();
return {
token: data.Token,
expiresInSeconds: data.ExpiresInSeconds
};
}
টাইপস্ক্রিপ্ট
function authTokenFetcher(options: {
serviceType: google.maps.journeySharing.FleetEngineServiceType,
context: google.maps.journeySharing.AuthTokenContext,
}): Promise<google.maps.journeySharing.AuthToken> {
// The developer should generate the correct
// SERVER_TOKEN_URL based on options.
const response = await fetch(SERVER_TOKEN_URL);
if (!response.ok) {
throw new Error(response.statusText);
}
const data = await response.json();
return {
token: data.token,
expiresInSeconds: data.expiration_timestamp_ms - Date.now(),
};
}
টোকেন মিন্ট করার জন্য সার্ভার-সাইড এন্ডপয়েন্ট বাস্তবায়ন করার সময়, নিম্নলিখিতগুলি মনে রাখবেন:
- শেষ বিন্দু অবশ্যই টোকেনের জন্য একটি মেয়াদ শেষ হওয়ার সময় ফেরত দেবে; উপরের উদাহরণে, এটি
data.ExpiresInSecondsহিসাবে দেওয়া হয়েছে। ExpiresInSeconds। - প্রমাণীকরণ টোকেন ফেচারকে অবশ্যই মেয়াদ শেষ হওয়ার সময় (সেকেন্ডে, আনার সময় থেকে) লাইব্রেরিতে পাস করতে হবে, যেমন উদাহরণে দেখানো হয়েছে।
- SERVER_TOKEN_URL আপনার ব্যাকএন্ড বাস্তবায়নের উপর নির্ভর করে, এইগুলি নমুনা অ্যাপ ব্যাকএন্ডের URLগুলি:
- https://
SERVER_URL/token/delivery_driver/DELIVERY_VEHICLE_ID - https://
SERVER_URL/token/delivery_consumer/TRACKING_ID - https://
SERVER_URL/token/fleet_reader
- https://
HTML থেকে একটি মানচিত্র লোড করুন
নিম্নলিখিত উদাহরণটি একটি নির্দিষ্ট URL থেকে জাভাস্ক্রিপ্ট শিপমেন্ট ট্র্যাকিং লাইব্রেরি কীভাবে লোড করতে হয় তা দেখায়। কলব্যাক প্যারামিটারটি API লোড হওয়ার পরে initMap ফাংশনটি চালায়। ডিফার অ্যাট্রিবিউট ব্রাউজারটিকে API লোড হওয়ার সময় আপনার পৃষ্ঠার বাকি অংশ রেন্ডার করা চালিয়ে যেতে দেয়।
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>
একটি চালান অনুসরণ করুন
এই বিভাগটি দেখায় কিভাবে জাভাস্ক্রিপ্ট শিপমেন্ট ট্র্যাকিং লাইব্রেরি ব্যবহার করে একটি চালান পিকআপ বা ডেলিভারি অনুসরণ করতে হয়। আপনার কোড চালানোর আগে স্ক্রিপ্ট ট্যাগে নির্দিষ্ট কলব্যাক ফাংশন থেকে লাইব্রেরি লোড করা নিশ্চিত করুন।
একটি চালানের অবস্থান প্রদানকারীকে তাত্ক্ষণিক করুন
JavaScript শিপমেন্ট ট্র্যাকিং লাইব্রেরি Fleet Engine Deliveries API-এর জন্য একটি অবস্থান প্রদানকারীকে পূর্বনির্ধারিত করে। আপনার প্রোজেক্ট আইডি এবং আপনার টোকেন ফ্যাক্টরির একটি রেফারেন্স ব্যবহার করে এটিকে ইনস্ট্যান্টিয়েট করুন।
জাভাস্ক্রিপ্ট
locationProvider =
new google.maps.journeySharing
.FleetEngineShipmentLocationProvider({
projectId: 'your-project-id',
authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step
// Optionally, you may specify tracking ID to
// immediately start tracking.
trackingId: 'your-tracking-id',
});
টাইপস্ক্রিপ্ট
locationProvider =
new google.maps.journeySharing
.FleetEngineShipmentLocationProvider({
projectId: 'your-project-id',
authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step
// Optionally, you may specify tracking ID to
// immediately start tracking.
trackingId: 'your-tracking-id',
});
ম্যাপ ভিউ আরম্ভ করুন
জাভাস্ক্রিপ্ট জার্নি শেয়ারিং লাইব্রেরি লোড করার পরে, ম্যাপ ভিউ শুরু করুন এবং এটি HTML পৃষ্ঠায় যোগ করুন। আপনার পৃষ্ঠায় একটি <div> উপাদান থাকা উচিত যা মানচিত্র দৃশ্য ধারণ করে। নিম্নলিখিত উদাহরণে, <div> উপাদানটির নাম দেওয়া হয়েছে map_canvas ।
রেসের অবস্থা এড়াতে, মানচিত্র শুরু হওয়ার পরে কলব্যাকে যে অবস্থান প্রদানকারীর জন্য ট্র্যাকিং আইডি সেট করুন।
জাভাস্ক্রিপ্ট
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
vehicleMarkerSetup: vehicleMarkerSetup,
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// Any undefined styling options will use defaults.
});
// If you did not specify a tracking ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.trackingId = 'your-tracking-id';
// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);
টাইপস্ক্রিপ্ট
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
document.getElementById('map_canvas'),
locationProviders: [locationProvider],
vehicleMarkerSetup: vehicleMarkerSetup,
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// Any undefined styling options will use defaults.
});
// If you did not specify a tracking ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.trackingId = 'your-tracking-id';
// Give the map an initial viewport to allow it to
// initialize; otherwise the 'ready' event above may
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter({lat: 37.2, lng: -121.9});
mapView.map.setZoom(14);
ট্র্যাকিং আইডি
অবস্থান প্রদানকারীকে সরবরাহ করা ট্র্যাকিং আইডিটি বিভিন্ন কাজের সাথে সামঞ্জস্যপূর্ণ হতে পারে; উদাহরণস্বরূপ, একই প্যাকেজের জন্য একটি পিকআপ এবং একটি ডেলিভারি টাস্ক, বা একাধিক ব্যর্থ ডেলিভারি প্রচেষ্টা। চালান ট্র্যাকিং মানচিত্রে দেখানোর জন্য একটি কাজ নির্বাচন করা হয়েছে। দেখানোর কাজটি নিম্নরূপ নির্ধারণ করা হয়েছে:
- যদি ঠিক একটি ওপেন পিকআপ টাস্ক থাকে তবে এটি দেখানো হয়। একাধিক খোলা পিকআপ কাজ থাকলে একটি ত্রুটি তৈরি হয়।
- যদি ঠিক একটি ওপেন ডেলিভারি টাস্ক থাকে, তা দেখানো হয়। একাধিক ওপেন ডেলিভারি কাজ থাকলে একটি ত্রুটি তৈরি হয়।
- যদি বন্ধ ডেলিভারি কাজ থাকে:
- যদি ঠিক একটি বন্ধ ডেলিভারি টাস্ক থাকে, এটি দেখানো হয়।
- একাধিক বন্ধ ডেলিভারি কাজ থাকলে, সাম্প্রতিক ফলাফলের সময় দেখানো হয়।
- যদি একাধিক ক্লোজড ডেলিভারি কাজ থাকে, যার কোনোটিরই ফলাফলের সময় নেই, একটি ত্রুটি তৈরি হয়।
- যদি পিকআপের কাজ বন্ধ থাকে:
- যদি ঠিক একটি বন্ধ পিকআপ টাস্ক থাকে তবে এটি দেখানো হয়।
- একাধিক বন্ধ পিক-আপ টাস্ক থাকলে, সাম্প্রতিক ফলাফলের সময় দেখানো হয়।
- যদি একাধিক ক্লোজড পিকআপ টাস্ক থাকে, যার কোনোটিরই ফলাফলের সময় নেই, একটি ত্রুটি তৈরি হয়।
- অন্যথায়, কোন কাজ দেখানো হয় না.
ঘটনা পরিবর্তন শুনুন
আপনি অবস্থান প্রদানকারী ব্যবহার করে টাস্ক ট্র্যাকিং তথ্য বস্তু থেকে একটি টাস্ক সম্পর্কে মেটা তথ্য পুনরুদ্ধার করতে পারেন। মেটা তথ্যের মধ্যে রয়েছে ETA, অবশিষ্ট স্টপের সংখ্যা এবং পিকআপ বা ডেলিভারির আগে অবশিষ্ট দূরত্ব। মেটা তথ্য পরিবর্তন একটি আপডেট ইভেন্ট ট্রিগার. নিম্নলিখিত উদাহরণ দেখায় কিভাবে এই পরিবর্তন ঘটনা শুনতে.
জাভাস্ক্রিপ্ট
locationProvider.addListener('update', e => {
// e.taskTrackingInfo contains data that may be useful
// to the rest of the UI.
console.log(e.taskTrackingInfo.remainingStopCount);
});
টাইপস্ক্রিপ্ট
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
// e.taskTrackingInfo contains data that may be useful
// to the rest of the UI.
console.log(e.taskTrackingInfo.remainingStopCount);
});
ত্রুটিগুলি পরিচালনা করুন
শিপমেন্ট তথ্যের অনুরোধ থেকে অ্যাসিঙ্ক্রোনাসভাবে উদ্ভূত ত্রুটিগুলি ত্রুটি ইভেন্টগুলিকে ট্রিগার করে। নিম্নলিখিত উদাহরণ দেখায় যে ত্রুটিগুলি পরিচালনা করার জন্য এই ইভেন্টগুলির জন্য কীভাবে শুনতে হয়।
জাভাস্ক্রিপ্ট
locationProvider.addListener('error', e => {
// e.error is the error that triggered the event.
console.error(e.error);
});
টাইপস্ক্রিপ্ট
locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
// e.error is the error that triggered the event.
console.error(e.error);
});
দ্রষ্টব্য: অপ্রত্যাশিত ত্রুটিগুলি পরিচালনা করার জন্য লাইব্রেরি কলগুলি মোড়ানোর try...catch ব্লকগুলি নিশ্চিত করুন৷
ট্র্যাকিং বন্ধ করুন
শিপমেন্ট ট্র্যাক করা থেকে অবস্থান প্রদানকারীকে থামাতে, অবস্থান প্রদানকারীর কাছ থেকে ট্র্যাকিং আইডি সরান৷
জাভাস্ক্রিপ্ট
locationProvider.trackingId = '';
টাইপস্ক্রিপ্ট
locationProvider.trackingId = '';
মানচিত্র দৃশ্য থেকে অবস্থান প্রদানকারী সরান
নিম্নলিখিত উদাহরণটি দেখায় কিভাবে মানচিত্র দৃশ্য থেকে একটি অবস্থান প্রদানকারীকে সরাতে হয়।
জাভাস্ক্রিপ্ট
mapView.removeLocationProvider(locationProvider);
টাইপস্ক্রিপ্ট
mapView.removeLocationProvider(locationProvider);
বেস মানচিত্রের চেহারা এবং অনুভূতি কাস্টমাইজ করুন
মানচিত্রের উপাদানটির চেহারা এবং অনুভূতি কাস্টমাইজ করতে, ক্লাউড-ভিত্তিক টুলিং ব্যবহার করে বা সরাসরি কোডে বিকল্পগুলি সেট করে আপনার মানচিত্রকে স্টাইল করুন ।
ক্লাউড-ভিত্তিক মানচিত্র স্টাইলিং ব্যবহার করুন
ক্লাউড-ভিত্তিক মানচিত্র স্টাইলিং আপনাকে আপনার কোডে কোনো পরিবর্তন না করেই Google ক্লাউড কনসোল থেকে Google মানচিত্র ব্যবহার করে এমন যেকোনো অ্যাপের জন্য মানচিত্রের শৈলী তৈরি এবং সম্পাদনা করতে দেয়। মানচিত্রের শৈলীগুলি আপনার ক্লাউড প্রকল্পে মানচিত্র আইডি হিসাবে সংরক্ষিত হয়৷ আপনার জাভাস্ক্রিপ্ট শিপমেন্ট ট্র্যাকিং মানচিত্রে একটি শৈলী প্রয়োগ করতে, আপনি যখন JourneySharingMapView তৈরি করবেন তখন একটি mapId নির্দিষ্ট করুন। JourneySharingMapView তাৎক্ষণিক হওয়ার পরে mapId ক্ষেত্র পরিবর্তন বা যোগ করা যাবে না। নিম্নলিখিত উদাহরণটি দেখায় কিভাবে একটি মানচিত্র আইডি দিয়ে পূর্বে তৈরি করা মানচিত্র শৈলী সক্ষম করা যায়।
জাভাস্ক্রিপ্ট
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
// Any other styling options.
});
টাইপস্ক্রিপ্ট
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
// Any other styling options.
});
কোড-ভিত্তিক মানচিত্র স্টাইলিং ব্যবহার করুন
ম্যাপ স্টাইলিং কাস্টমাইজ করার আরেকটি উপায় হল আপনি যখন JourneySharingMapView তৈরি করেন তখন mapOptions সেট করা।
জাভাস্ক্রিপ্ট
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
styles: [
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "color": "#CCFFFF" }
]
}
]
}
});
টাইপস্ক্রিপ্ট
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
styles: [
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "color": "#CCFFFF" }
]
}
]
}
});
মার্কার কাস্টমাইজেশন ব্যবহার করুন
জাভাস্ক্রিপ্ট শিপমেন্ট ট্র্যাকিং লাইব্রেরি দিয়ে, আপনি মানচিত্রে যোগ করা মার্কারগুলির চেহারা এবং অনুভূতি কাস্টমাইজ করতে পারেন৷ আপনি মার্কার কাস্টমাইজেশন নির্দিষ্ট করে এটি করেন, যা শিপমেন্ট ট্র্যাকিং লাইব্রেরি ম্যাপে মার্কার যোগ করার আগে এবং প্রতিটি মার্কার আপডেটের সাথে প্রয়োগ করে।
সবচেয়ে সহজ কাস্টমাইজেশন হল একটি MarkerOptions অবজেক্ট নির্দিষ্ট করা যা একই ধরনের সমস্ত মার্কারে প্রয়োগ করা হবে। বস্তুর মধ্যে নির্দিষ্ট পরিবর্তনগুলি প্রতিটি মার্কার তৈরি হওয়ার পরে প্রয়োগ করা হয়, যেকোনো ডিফল্ট বিকল্প ওভাররাইট করে।
একটি আরও উন্নত বিকল্প হল একটি কাস্টমাইজেশন ফাংশন নির্দিষ্ট করা। কাস্টমাইজেশন ফাংশনগুলি ডেটার উপর ভিত্তি করে মার্কারগুলির স্টাইলিং করার পাশাপাশি মার্কারগুলিতে ইন্টারঅ্যাক্টিভিটি যোগ করার অনুমতি দেয়, যেমন ক্লিক হ্যান্ডলিং। বিশেষত, শিপমেন্ট ট্র্যাকিং মার্কার যে ধরনের বস্তুর প্রতিনিধিত্ব করে সে সম্পর্কে কাস্টমাইজেশন ফাংশনে ডেটা পাস করে: গাড়ি বা গন্তব্য। এটি তখন মার্কার উপাদানের বর্তমান অবস্থার উপর ভিত্তি করে মার্কার স্টাইল পরিবর্তন করতে দেয়; উদাহরণস্বরূপ, গন্তব্য পর্যন্ত পরিকল্পিত স্টপের সংখ্যা বাকি। এমনকি আপনি ফ্লিট ইঞ্জিনের বাইরের উত্স থেকে ডেটার বিরুদ্ধে যোগ দিতে পারেন এবং সেই তথ্যের উপর ভিত্তি করে মার্কার স্টাইল করতে পারেন।
শিপমেন্ট ট্র্যাকিং লাইব্রেরি FleetEngineShipmentLocationProviderOptions এ নিম্নলিখিত কাস্টমাইজেশন প্যারামিটার প্রদান করে:
MarkerOptions ব্যবহার করে চিহ্নিতকারীর স্টাইলিং পরিবর্তন করুন
নিম্নলিখিত উদাহরণটি দেখায় কিভাবে একটি MarkerOptions অবজেক্টের সাথে একটি গাড়ির মার্কারের স্টাইলিং কনফিগার করতে হয়। উপরে তালিকাভুক্ত যেকোনো মার্কার কাস্টমাইজেশন ব্যবহার করে যেকোনো মার্কারের স্টাইলিং কাস্টমাইজ করতে এই প্যাটার্নটি অনুসরণ করুন।
জাভাস্ক্রিপ্ট
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
টাইপস্ক্রিপ্ট
deliveryVehicleMarkerCustomization = {
cursor: 'grab'
};
কাস্টমাইজেশন ফাংশন ব্যবহার করে মার্কারের স্টাইলিং পরিবর্তন করুন
নিম্নলিখিত উদাহরণটি দেখায় কিভাবে একটি গাড়ির মার্কার স্টাইল কনফিগার করতে হয়। উপরে তালিকাভুক্ত যেকোনো মার্কার কাস্টমাইজেশন প্যারামিটার ব্যবহার করে যে কোনো মার্কারের স্টাইলিং কাস্টমাইজ করতে এই প্যাটার্নটি অনুসরণ করুন।
জাভাস্ক্রিপ্ট
deliveryVehicleMarkerCustomization =
(params) => {
var stopsLeft = params.taskTrackingInfo.remainingStopCount;
params.marker.setLabel(`${stopsLeft}`);
};
টাইপস্ক্রিপ্ট
deliveryVehicleMarkerCustomization =
(params: ShipmentMarkerCustomizationFunctionParams) => {
const stopsLeft = params.taskTrackingInfo.remainingStopCount;
params.marker.setLabel(`${stopsLeft}`);
};
মার্কারগুলিতে ক্লিক হ্যান্ডলিং যোগ করুন
নিচের উদাহরণটি দেখায় কিভাবে একটি গাড়ির মার্কারে ক্লিক হ্যান্ডলিং যোগ করতে হয়। উপরে তালিকাভুক্ত যেকোনো মার্কার কাস্টমাইজেশন প্যারামিটার ব্যবহার করে যেকোনো মার্কারে ক্লিক হ্যান্ডলিং যোগ করতে এই প্যাটার্নটি অনুসরণ করুন।
জাভাস্ক্রিপ্ট
deliveryVehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
টাইপস্ক্রিপ্ট
deliveryVehicleMarkerCustomization =
(params: ShipmentMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
পলিলাইন কাস্টমাইজেশন ব্যবহার করুন
শিপমেন্ট ট্র্যাকিং লাইব্রেরির সাহায্যে, আপনি মানচিত্রে চালানের রুটের চেহারা এবং অনুভূতিও কাস্টমাইজ করতে পারেন। লাইব্রেরি চালানের সক্রিয় বা অবশিষ্ট পথের প্রতিটি জোড়া স্থানাঙ্কের জন্য একটি google.maps.Polyline অবজেক্ট তৈরি করে। আপনি পলিলাইন কাস্টমাইজেশন নির্দিষ্ট করে Polyline অবজেক্ট স্টাইল করতে পারেন। লাইব্রেরি তারপরে দুটি পরিস্থিতিতে এই কাস্টমাইজেশনগুলি প্রয়োগ করে: মানচিত্রে বস্তুগুলি যুক্ত করার আগে এবং যখন বস্তুগুলির জন্য ব্যবহৃত ডেটা পরিবর্তিত হয়।
মার্কার কাস্টমাইজেশনের অনুরূপ, আপনি PolylineOptions একটি সেট নির্দিষ্ট করতে পারেন যাতে তারা তৈরি করা বা আপডেট করা হয় তখন সমস্ত মিলে যাওয়া Polyline অবজেক্টগুলিতে প্রয়োগ করা হয়।
একইভাবে, আপনি একটি কাস্টমাইজেশন ফাংশন নির্দিষ্ট করতে পারেন। কাস্টমাইজেশন ফাংশনগুলি ফ্লিট ইঞ্জিন দ্বারা প্রেরিত ডেটার উপর ভিত্তি করে বস্তুর পৃথক স্টাইল করার অনুমতি দেয়। ফাংশন চালানের বর্তমান অবস্থার উপর ভিত্তি করে প্রতিটি বস্তুর স্টাইলিং পরিবর্তন করতে পারে; উদাহরণস্বরূপ, Polyline বস্তুটিকে একটি গভীর ছায়ায় রঙ করা, বা গাড়িটি ধীর গতিতে চলার সময় এটিকে ঘন করা। এমনকি আপনি ফ্লিট ইঞ্জিনের বাইরের উত্স থেকেও যোগ দিতে পারেন এবং সেই তথ্যের ভিত্তিতে Polyline অবজেক্টকে স্টাইল করতে পারেন।
আপনি FleetEngineShipmentLocationProviderOptions এ প্রদত্ত প্যারামিটার ব্যবহার করে কাস্টমাইজেশন নির্দিষ্ট করতে পারেন। আপনি গাড়ির যাত্রায় বিভিন্ন পাথ স্টেটের জন্য কাস্টমাইজেশন সেট করতে পারেন -- ইতিমধ্যে ভ্রমণ করেছেন, সক্রিয়ভাবে ভ্রমণ করছেন বা এখনও ভ্রমণ করেননি। পরামিতিগুলি নিম্নরূপ:
-
takenPolylineCustomization, একটি ইতিমধ্যে ভ্রমণ পথের জন্য; -
activePolylineCustomization, একটি সক্রিয়ভাবে ভ্রমণ পথের জন্য; -
remainingPolylineCustomization, এখনও ভ্রমণ করা হয়নি এমন পথের জন্য।
PolylineOptions ব্যবহার করে Polyline অবজেক্টের স্টাইলিং পরিবর্তন করুন
নিম্নোক্ত উদাহরণ দেখায় কিভাবে PolylineOptions সাথে Polyline অবজেক্টের জন্য স্টাইলিং কনফিগার করতে হয়। পূর্বে তালিকাভুক্ত যেকোনো পলিলাইন কাস্টমাইজেশন ব্যবহার করে যেকোনো Polyline অবজেক্টের স্টাইলিং কাস্টমাইজ করতে এই প্যাটার্নটি অনুসরণ করুন।
জাভাস্ক্রিপ্ট
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
টাইপস্ক্রিপ্ট
activePolylineCustomization = {
strokeWidth: 5,
strokeColor: 'black',
};
কাস্টমাইজেশন ফাংশন ব্যবহার করে Polyline অবজেক্টের স্টাইলিং পরিবর্তন করুন
নিম্নলিখিত উদাহরণ দেখায় কিভাবে একটি সক্রিয় Polyline অবজেক্টের স্টাইলিং কনফিগার করতে হয়। পূর্বে তালিকাভুক্ত যেকোনো পলিলাইন কাস্টমাইজেশন প্যারামিটার ব্যবহার করে যে কোনো Polyline অবজেক্টের স্টাইল কাস্টমাইজ করতে এই প্যাটার্নটি অনুসরণ করুন।
জাভাস্ক্রিপ্ট
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params) => {
const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
if (distance < 1000) {
// params.polylines contains an ordered list of Polyline objects for
// the path.
for (const polylineObject of params.polylines) {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
টাইপস্ক্রিপ্ট
// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
(params: ShipmentPolylineCustomizationFunctionParams) => {
const distance = params.taskTrackingInfo.remainingDrivingDistanceMeters;
if (distance < 1000) {
// params.polylines contains an ordered list of Polyline objects for
// the path.
for (const polylineObject of params.polylines) {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
Polyline বস্তুর দৃশ্যমানতা নিয়ন্ত্রণ করুন
ডিফল্টরূপে, সমস্ত Polyline বস্তু দৃশ্যমান। একটি Polyline বস্তুকে অদৃশ্য করতে, এর visible সম্পত্তি সেট করুন:
জাভাস্ক্রিপ্ট
remainingPolylineCustomization = {visible: false};
টাইপস্ক্রিপ্ট
remainingPolylineCustomization = {visible: false};
একটি যানবাহন বা অবস্থান চিহ্নিতকারীর জন্য একটি InfoWindow প্রদর্শন করুন
আপনি একটি যানবাহন বা অবস্থান চিহ্নিতকারী সম্পর্কে অতিরিক্ত তথ্য প্রদর্শন করতে একটি InfoWindow ব্যবহার করতে পারেন।
নিম্নলিখিত উদাহরণটি দেখায় কিভাবে একটি InfoWindow তৈরি করতে হয় এবং এটি একটি গাড়ির মার্কারে সংযুক্ত করতে হয়:
জাভাস্ক্রিপ্ট
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
locationProvider.addListener('update', e => {
const stopsCount =
e.taskTrackingInfo.remainingStopCount;
infoWindow.setContent(
`Your vehicle is ${stopsCount} stops away.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
});
// 3. Close the info window.
infoWindow.close();
টাইপস্ক্রিপ্ট
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
const stopsCount =
e.taskTrackingInfo.remainingStopCount;
infoWindow.setContent(
`Your vehicle is ${stopsCount} stops away.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
});
// 3. Close the info window.
infoWindow.close();
স্বয়ংক্রিয় ফিটিং অক্ষম করুন
আপনি স্বয়ংক্রিয় ফিটিং অক্ষম করে মানচিত্রটিকে গাড়ি এবং প্রত্যাশিত রুটে স্বয়ংক্রিয়ভাবে ভিউপোর্ট ফিট করা থেকে থামাতে পারেন। নিচের উদাহরণটি দেখায় কিভাবে আপনি যখন যাত্রা শেয়ারিং ম্যাপ ভিউ কনফিগার করেন তখন স্বয়ংক্রিয় ফিটিং অক্ষম করতে হয়।
জাভাস্ক্রিপ্ট
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
automaticViewportMode:
google.maps.journeySharing
.AutomaticViewportMode.NONE,
...
});
টাইপস্ক্রিপ্ট
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineShipmentLocationProviderUpdateEvent) => {
const stopsCount =
e.taskTrackingInfo.remainingStopCount;
infoWindow.setContent(
`Your vehicle is ${stopsCount} stops away.`);
// 2. Attach the info window to a vehicle marker.
// This property can return multiple markers.
const marker = mapView.vehicleMarkers[0];
infoWindow.open(mapView.map, marker);
});
// 3. Close the info window.
infoWindow.close();
একটি বিদ্যমান মানচিত্র প্রতিস্থাপন করুন
আপনি জাভাস্ক্রিপ্ট শিপমেন্ট ট্র্যাকিং লাইব্রেরি ব্যবহার করতে পারেন একটি বিদ্যমান মানচিত্র প্রতিস্থাপন করতে যাতে সেই কাস্টমাইজেশনগুলি না হারিয়ে মার্কার বা অন্যান্য কাস্টমাইজেশন অন্তর্ভুক্ত থাকে।
উদাহরণস্বরূপ, ধরুন আপনার কাছে একটি মানক google.maps.Map সত্তা সহ একটি ওয়েব পৃষ্ঠা রয়েছে যেখানে একটি মার্কার দেখানো হয়েছে:
<!DOCTYPE html>
<html>
<head>
<style>
/* Set the size of the div element that contains the map */
#map {
height: 400px; /* The height is 400 pixels */
width: 100%; /* The width is the width of the web page */
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<script>
// Initialize and add the map
function initMap() {
// The location of Uluru
var uluru = {lat: -25.344, lng: 131.036};
// The map, initially centered at Mountain View, CA.
var map = new google.maps.Map(document.getElementById('map'));
map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
// The marker, now positioned at Uluru
var marker = new google.maps.Marker({position: uluru, map: map});
}
</script>
<!-- Load the API from the specified URL.
* The async attribute allows the browser to render the page while the API loads.
* The key parameter will contain your own API key (which is not needed for this tutorial).
* The callback parameter executes the initMap() function.
-->
<script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
জাভাস্ক্রিপ্ট জার্নি শেয়ারিং লাইব্রেরি যোগ করতে:
- প্রমাণীকরণ টোকেন কারখানার জন্য কোড যোগ করুন।
-
initMap()ফাংশনে একটি অবস্থান প্রদানকারী চালু করুন। -
initMap()ফাংশনে ম্যাপ ভিউ শুরু করুন। ভিউ মানচিত্র ধারণ করে. - ম্যাপ ভিউ ইনিশিয়ালাইজেশনের জন্য কলব্যাক ফাংশনে আপনার কাস্টমাইজেশন সরান।
- API লোডারে অবস্থান লাইব্রেরি যোগ করুন।
নিম্নলিখিত উদাহরণটি করা পরিবর্তনগুলি দেখায়:
<!DOCTYPE html>
<html>
<head>
<style>
/* Set the size of the div element that contains the map */
#map {
height: 400px; /* The height is 400 pixels */
width: 100%; /* The width is the width of the web page */
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<script>
let locationProvider;
// (1) Authentication Token Fetcher
function authTokenFetcher(options) {
// options is a record containing two keys called
// serviceType and context. The developer should
// generate the correct SERVER_TOKEN_URL and request
// based on the values of these fields.
const response = await fetch(SERVER_TOKEN_URL);
if (!response.ok) {
throw new Error(response.statusText);
}
const data = await response.json();
return {
token: data.Token,
expiresInSeconds: data.ExpiresInSeconds
};
}
// Initialize and add the map
function initMap() {
// (2) Initialize location provider.
locationProvider = new google.maps.journeySharing.FleetEngineShipmentLocationProvider({
YOUR_PROVIDER_ID,
authTokenFetcher,
});
// (3) Initialize map view (which contains the map).
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map'),
locationProviders: [locationProvider],
// any styling options
});
locationProvider.trackingId = TRACKING_ID;
// (4) Add customizations like before.
// The location of Uluru
var uluru = {lat: -25.344, lng: 131.036};
// The map, initially centered at Mountain View, CA.
var map = mapView.map;
map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
// The marker, now positioned at Uluru
var marker = new google.maps.Marker({position: uluru, map: map});
};
</script>
<!-- Load the API from the specified URL
* The async attribute allows the browser to render the page while the API loads
* The key parameter will contain your own API key (which is not needed for this tutorial)
* The callback parameter executes the initMap() function
*
* (5) Add the journey sharing library to the API loader.
-->
<script defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
</script>
</body>
</html>
যদি আপনার কাছে উলুরুর কাছে নির্দিষ্ট আইডি সহ একটি ট্র্যাক করা প্যাকেজ থাকে তবে এটি এখন মানচিত্রে রেন্ডার করা হবে৷