এই বিভাগে দেখানো হয়েছে যে কীভাবে অন-ডিমান্ড ট্রিপ বা শিডিউল করা টাস্কের জন্য কোনও গাড়ি ট্র্যাক করতে JavaScript ফ্লীট ট্র্যাকিং লাইব্রেরি ব্যবহার করতে হয়।
কোনও গাড়ি ট্র্যাক করতে, আপনাকে এইসব ধাপ অনুসরণ করতে হবে:
- লাইব্রেরি লোড করুন এবং ম্যাপ ভিউ শুরু করুন
- গাড়ির লোকেশন ও ম্যাপ ভিউ প্রদান করুন
- ইভেন্ট শোনা ও সমস্যার সমাধান করা
- ট্র্যাক করা বন্ধ করুন
লাইব্রেরি লোড করে ম্যাপ ভিউ শুরু করা
আপনার ওয়েবপেজে ম্যাপে আপনার ফ্লিট অপারেশন দেখাতে, আপনার API কী ব্যবহার করে ম্যাপ কল করে এমন স্ক্রিপ্ট ব্যবহার করুন। HTML থেকে এটি কীভাবে করতে হয় তা নিম্নলিখিত উদাহরণ থেকে দেখুন:
URL সোর্স: আপনার API কী ব্যবহার করে ম্যাপের অনুরোধ করতে Google Maps API-কে কল করে।
callbackপ্যারামিটার: API কল রিটার্ন করার পরেinitMapফাংশন রান করে।librariesপ্যারামিটার: Fleet ট্র্যাকিং লাইব্রেরি লোড করে।deferঅ্যাট্রিবিউট: API লোড হওয়ার সময় ব্রাউজারকে আপনার পৃষ্ঠার বাকি অংশ রেন্ডার করা চালিয়ে যেতে দেয়।<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing" defer></script>
গাড়ির লোকেশন ও ম্যাপ ভিউ প্রদান করুন
গাড়ি ট্র্যাক করা শুরু করতে, আপনারা দুজনেই একটি গাড়ি লোকেশন প্রোভাইডার ইনস্ট্যান্টিয়েট করেন এবং নিম্নলিখিত বিভাগে যেমন বর্ণনা করা হয়েছে সেই অনুযায়ী গাড়ি আইডির সাথে একটি ম্যাপ ভিউ ইনিশিয়ালাইজ করেন।
গাড়ির লোকেশন প্রদানকারী ইনস্ট্যানশিয়েট করা
JavaScript ফ্লীট ট্র্যাকিং লাইব্রেরিতে Fleet Engine API-এর জন্য লোকেশন প্রদানকারী অন্তর্ভুক্ত থাকে। আপনার প্রোজেক্ট আইডি এবং টোকেন ফেচার রেফারেন্স ব্যবহার করে নিচে দেখানো উদাহরণের মতো ইনস্ট্যান্টিয়েট করুন।
চাহিদা মতো ট্রিপ
জাভাস্ক্রিপ্ট
locationProvider =
new google.maps.journeySharing
.FleetEngineVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// vehicleId to immediately start
// tracking.
vehicleId: 'your-vehicle-id',
});
TypeScript
locationProvider =
new google.maps.journeySharing
.FleetEngineVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// vehicleId to immediately start
// tracking.
vehicleId: 'your-vehicle-id',
});
শিডিউল করা টাস্ক
জাভাস্ক্রিপ্ট
locationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// deliveryVehicleId to immediately start
// tracking.
deliveryVehicleId: 'your-delivery-id',
});
TypeScript
locationProvider =
new google.maps.journeySharing
.FleetEngineDeliveryVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// deliveryVehicleId to immediately start
// tracking.
deliveryVehicleId: 'your-delivery-id',
});
ম্যাপ ভিউ শুরু করুন
JavaScript Journey Sharing লাইব্রেরি লোড করার পরে, ম্যাপ ভিউ ইনিশিয়ালাইজ করুন এবং এটি HTML পৃষ্ঠায় যোগ করুন। আপনার পৃষ্ঠায় একটি <div> এলিমেন্ট থাকতে হবে যা ম্যাপ ভিউকে ধরে রাখে। নিচের উদাহরণে <div> এলিমেন্টের নাম map_canvas দেওয়া হয়েছে।=
চাহিদা মতো ট্রিপ
জাভাস্ক্রিপ্ট
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId
= 'your-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.VehicleId
= 'your-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
শিডিউল করা টাস্ক
জাভাস্ক্রিপ্ট
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
= 'your-delivery-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
= 'your-delivery-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
ইভেন্ট শোনা ও সমস্যার সমাধান করা
আপনি কোনও গাড়ি ট্র্যাক করা শুরু করার পরে, আপনি ম্যাপে সেটির অগ্রগতি আপডেট করতে এবং গাড়িটি তার রুট ধরে চলার সময় সমস্যাগুলি সমাধান করতে চান।
গাড়ির ইভেন্ট শোনা
অন-ডিমান্ড ট্রিপ বা শিডিউল করা টাস্কের জন্য কোনও গাড়ির অগ্রগতি ট্র্যাক করতে, আপনাকে পরিবর্তন ইভেন্ট শুনতে হবে।
আপনি
লোকেশন প্রোভাইডার ব্যবহার করে vehicle বা deliveryVehicle অবজেক্ট থেকে মেটাডেটা রিট্রিভ করেন। মেটা তথ্যে ETA এবং গাড়িটি পরবর্তী পিকআপ বা ড্রপঅফের আগে
কতটা দূরত্ব বাকি আছে তা অন্তর্ভুক্ত থাকে। মেটা তথ্যে পরিবর্তন করা হলে
লোকেশন প্রদানকারীর ক্ষেত্রে আপডেট ইভেন্ট ট্রিগার হয়।
এইসব পরিবর্তন ইভেন্ট কীভাবে শুনবেন তা নিম্নলিখিত উদাহরণ থেকে দেখুন।
চাহিদা মতো ট্রিপ
জাভাস্ক্রিপ্ট
locationProvider.addListener('update', e => {
// e.vehicle contains data that may be
// useful to the rest of the UI.
if (e.vehicle) {
console.log(e.vehicle.vehicleState);
}
});
TypeScript
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
// e.vehicle contains data that may be
// useful to the rest of the UI.
if (e.vehicle) {
console.log(e.vehicle.vehicleState);
}
});
শিডিউল করা টাস্ক
জাভাস্ক্রিপ্ট
locationProvider.addListener('update', e => {
// e.deliveryVehicle contains data that may be
// useful to the rest of the UI.
if (e.deliveryVehicle) {
console.log(e.deliveryVehicle.remainingDuration);
}
});
TypeScript
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
// e.deliveryVehicle contains data that may be
// useful to the rest of the UI.
if (e.deliveryVehicle) {
console.log(e.deliveryVehicle.remainingDuration);
}
});
সমস্যা ম্যানেজ করা
JavaScript Journey Sharing লাইব্রেরি লোড করার পরে, ম্যাপ ভিউ ইনিশিয়ালাইজ করুন এবং এটি HTML পৃষ্ঠায় যোগ করুন। আপনার পৃষ্ঠায় ম্যাপ ভিউ ধারণ করে এমন একটি <div> এলিমেন্ট থাকতে হবে। নিচের উদাহরণে <div> এলিমেন্টের নাম map_canvas দেওয়া হয়েছে।=
চাহিদা মতো ট্রিপ
জাভাস্ক্রিপ্ট
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.vehicleId
= 'your-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.VehicleId
= 'your-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
শিডিউল করা টাস্ক
জাভাস্ক্রিপ্ট
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
= 'your-delivery-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
TypeScript
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
});
// If you did not specify a delivery vehicle ID in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId
= 'your-delivery-vehicle-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 want.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
কোনও গাড়ি ট্র্যাক করা বন্ধ করা
কোনও গাড়ি ট্র্যাক করা বন্ধ করতে, আপনাকে লোকেশন প্রোভাইডার থেকে এটি সরাতে হবে এবং নিচে উল্লেখ করা বিভাগ অনুযায়ী ম্যাপ ভিউ থেকে লোকেশন প্রোভাইডার সরাতে হবে। এখানে দেওয়া উদাহরণগুলি অন-ডিমান্ড ট্রিপ ও শিডিউল করা টাস্ক উভয় ক্ষেত্রেই প্রযোজ্য।
লোকেশন পরিষেবা প্রদানকারী থেকে কোনও গাড়ি সরান
কোনও লোকেশন প্রোভাইডারকে গাড়ি ট্র্যাক করা থেকে আটকাতে, লোকেশন প্রোভাইডার থেকে ডেলিভারি ভেইকেল আইডি সরিয়ে দিন।
চাহিদা মতো ট্রিপ
জাভাস্ক্রিপ্ট
locationProvider.vehicleId = '';
TypeScript
locationProvider.vehicleId = '';
শিডিউল করা টাস্ক
জাভাস্ক্রিপ্ট
locationProvider.deliveryVehicleId = '';
TypeScript
locationProvider.deliveryVehicleId = '';
ম্যাপ ভিউ থেকে লোকেশন পরিষেবা প্রদানকারীকে সরিয়ে দেওয়া
নিচের উদাহরণে দেখানো হয়েছে যে কীভাবে ম্যাপ ভিউ থেকে লোকেশন প্রদানকারীকে সরানো যায়।
জাভাস্ক্রিপ্ট
mapView.removeLocationProvider(locationProvider);
TypeScript
mapView.removeLocationProvider(locationProvider);