জাভাস্ক্রিপ্ট ফ্লিট ট্র্যাকিং লাইব্রেরি আপনাকে রিয়েল টাইমে আপনার ফ্লিটগুলিতে যানবাহনের অবস্থানগুলি কল্পনা করতে দেয়৷ লাইব্রেরি যানবাহন এবং সেইসাথে ভ্রমণের ভিজ্যুয়ালাইজেশনের অনুমতি দিতে অন ডিমান্ড রাইডস এবং ডেলিভারি API ব্যবহার করে। জাভাস্ক্রিপ্ট ফ্লিট ট্র্যাকিং লাইব্রেরিতে একটি জাভাস্ক্রিপ্ট মানচিত্র উপাদান রয়েছে যা ফ্লিট ইঞ্জিনের সাথে সংযোগ করার জন্য একটি আদর্শ google.maps.Map সত্তা এবং ডেটা উপাদানগুলির জন্য একটি ড্রপ-ইন প্রতিস্থাপন।
উপাদান
জাভাস্ক্রিপ্ট ফ্লিট ট্র্যাকিং লাইব্রেরি যানবাহন এবং ট্রিপ ওয়েপয়েন্টগুলির ভিজ্যুয়ালাইজেশনের জন্য উপাদানগুলি প্রদান করে, সেইসাথে ইটিএ বা ট্রিপের অবশিষ্ট দূরত্বের জন্য কাঁচা ডেটা ফিডগুলি প্রদান করে৷
ফ্লিট ট্র্যাকিং মানচিত্র দৃশ্য
ফ্লিট ট্র্যাকিং ম্যাপ ভিউ কম্পোনেন্ট যানবাহনের অবস্থান এবং ট্রিপ ওয়েপয়েন্টগুলিকে কল্পনা করে। যদি একটি যানবাহনের রুট জানা থাকে, তাহলে মানচিত্র দৃশ্য উপাদানটি সেই গাড়িটিকে অ্যানিমেট করে যখন এটি তার পূর্বাভাসিত পথ ধরে চলে।
অবস্থান প্রদানকারী
অবস্থান প্রদানকারীরা ফ্লিট ইঞ্জিনে সঞ্চিত তথ্য নিয়ে কাজ করে ট্র্যাক করা বস্তুর জন্য অবস্থানের তথ্য যাত্রা শেয়ারিং ম্যাপে পাঠাতে।
যানবাহন অবস্থান প্রদানকারী
গাড়ির অবস্থান প্রদানকারী একটি একক গাড়ির অবস্থানের তথ্য প্রদর্শন করে। এতে গাড়ির অবস্থান এবং গাড়ির জন্য নির্ধারিত বর্তমান ভ্রমণের তথ্য রয়েছে।
ফ্লিট অবস্থান প্রদানকারী
ফ্লিট অবস্থান প্রদানকারী একাধিক যানবাহনের অবস্থানের তথ্য প্রদর্শন করে। আপনি একটি নির্দিষ্ট গাড়ি এবং তার অবস্থান প্রদর্শন করতে ফিল্টার করতে পারেন, অথবা আপনি পুরো বহরের জন্য গাড়ির অবস্থানগুলি প্রদর্শন করতে পারেন।
ট্র্যাক করা অবস্থানের দৃশ্যমানতা নিয়ন্ত্রণ করুন
ফ্লিট ইঞ্জিন অবস্থান প্রদানকারীর জন্য যখন একটি ট্র্যাক করা অবস্থান বস্তু মানচিত্রে দৃশ্যমান হয় তখন দৃশ্যমানতার নিয়ম নির্ধারণ করে। দ্রষ্টব্য - একটি কাস্টম বা প্রাপ্ত অবস্থান প্রদানকারী ব্যবহার করে দৃশ্যমানতার নিয়ম পরিবর্তন করতে পারে৷
যানবাহন
একটি যানবাহন ফ্লিট ইঞ্জিনে তৈরি হওয়ার সাথে সাথে দৃশ্যমান হয়, এবং যখন vehicle_state Online থাকে তখন দৃশ্যমান হয়। এর অর্থ হল গাড়ির জন্য কোনও বর্তমান ট্রিপ নির্ধারিত না থাকলেও একটি গাড়ি দৃশ্যমান হতে পারে।
ওয়েপয়েন্ট অবস্থান চিহ্নিতকারী
একটি ওয়েপয়েন্ট অবস্থান চিহ্নিতকারী একটি গাড়ির যাত্রার মূল থেকে শুরু করে চূড়ান্ত গন্তব্যের সাথে শেষ হওয়া পয়েন্টগুলি নির্দেশ করে৷ ওয়েপয়েন্ট অবস্থান চিহ্নিতকারী নিম্নলিখিত হিসাবে সংজ্ঞায়িত করা যেতে পারে:
- মূল - গাড়ির ভ্রমণের শুরুর অবস্থান নির্দেশ করে
- মধ্যবর্তী - গাড়ির ভ্রমণের জন্য স্টপওভার নির্দেশ করে
- গন্তব্য - গাড়ির ভ্রমণের জন্য চূড়ান্ত অবস্থান নির্দেশ করে
পরিকল্পিত গাড়ির ওয়েপয়েন্টগুলি মানচিত্রে মূল, মধ্যবর্তী এবং গন্তব্য চিহ্নিতকারী হিসাবে দেখানো হয়েছে।
জাভাস্ক্রিপ্ট ফ্লিট ট্র্যাকিং লাইব্রেরি দিয়ে শুরু করুন
JavaScript ফ্লিট ট্র্যাকিং লাইব্রেরি ব্যবহার করার আগে, নিশ্চিত করুন যে আপনি ফ্লিট ইঞ্জিন এবং একটি API কী পাওয়ার সাথে পরিচিত। তারপর একটি ট্রিপ আইডি এবং গাড়ির আইডি দাবি তৈরি করুন।
একটি ট্রিপ আইডি এবং গাড়ির আইডি দাবি তৈরি করুন
গাড়ির অবস্থান প্রদানকারী ব্যবহার করে যানবাহন ট্র্যাক করতে, একটি ট্রিপ আইডি এবং গাড়ির আইডি দাবি সহ একটি JSON ওয়েব টোকেন (JWT) তৈরি করুন৷
JWT পেলোড তৈরি করতে, অনুমোদন বিভাগে একটি অতিরিক্ত দাবি যোগ করুন tripid এবং vehicleid কী সহ এবং প্রতিটি কী এর value * তে সেট করুন। টোকেনটি ফ্লিট ইঞ্জিন পরিষেবা সুপার ইউজার ক্লাউড আইএএম ভূমিকা ব্যবহার করে তৈরি করা উচিত। মনে রাখবেন যে এটি ফ্লিট ইঞ্জিন সত্তা তৈরি, পড়তে এবং সংশোধন করার জন্য বিস্তৃত অ্যাক্সেস দেয় এবং শুধুমাত্র বিশ্বস্ত ব্যবহারকারীদের সাথে ভাগ করা উচিত।
নিম্নলিখিত উদাহরণ দেখায় কিভাবে যানবাহন এবং কাজ দ্বারা ট্র্যাক করার জন্য একটি টোকেন তৈরি করতে হয়:
{
"alg": "RS256",
"typ": "JWT",
"kid": "private_key_id_of_consumer_service_account"
}
.
{
"iss": "superuser@yourgcpproject.iam.gserviceaccount.com",
"sub": "superuser@yourgcpproject.iam.gserviceaccount.com",
"aud": "https://fleetengine.googleapis.com/",
"iat": 1511900000,
"exp": 1511903600,
"scope": "https://www.googleapis.com/auth/xapi",
"authorization": {
"tripid": "*",
"vehicleid": "*",
}
}
একটি প্রমাণীকরণ টোকেন ফেচার তৈরি করুন৷
জাভাস্ক্রিপ্ট ফ্লিট ট্র্যাকিং লাইব্রেরি প্রমাণীকরণ টোকেন ফেচার ব্যবহার করে একটি টোকেন অনুরোধ করে যখন নিম্নলিখিতগুলির মধ্যে যেকোনটি সত্য হয়:
- এটির একটি বৈধ টোকেন নেই, যেমন যখন এটি একটি নতুন পৃষ্ঠা লোডের জন্য ফেচারকে কল করেনি বা যখন ফেচারটি একটি টোকেন নিয়ে ফিরে আসেনি৷
- আগে যে টোকেনটি আনা হয়েছিল তার মেয়াদ শেষ হয়ে গেছে।
- এটি আগে যে টোকেনটি আনা হয়েছিল সেটি মেয়াদ শেষ হওয়ার এক মিনিটের মধ্যে।
অন্যথায়, লাইব্রেরি পূর্বে জারি করা, এখনও বৈধ টোকেন ব্যবহার করে এবং ফেচারকে কল করে না।
আপনার প্রকল্পের জন্য একটি পরিষেবা অ্যাকাউন্ট শংসাপত্র ব্যবহার করে আপনার সার্ভারগুলিতে উপযুক্ত দাবিগুলির সাথে তৈরি করা একটি টোকেন পুনরুদ্ধার করতে আপনি একটি প্রমাণীকরণ টোকেন ফেচার তৈরি করতে পারেন৷ আপনার সার্ভারে শুধুমাত্র টোকেন তৈরি করা গুরুত্বপূর্ণ এবং কোনো ক্লায়েন্টের সাথে আপনার সার্টিফিকেট শেয়ার করা কখনই গুরুত্বপূর্ণ। অন্যথায়, আপনি আপনার সিস্টেমের নিরাপত্তার সাথে আপস করতে পারেন।
একটি প্রতিশ্রুতিতে মোড়ানো দুটি ক্ষেত্র সহ একটি ডেটা স্ট্রাকচার আনতে হবে:
- একটি স্ট্রিং
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/driver/VEHICLE_ID - https://
SERVER_URL/token/consumer/TRIP_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&v=beta" defer></script>
একটি যান অনুসরণ করুন
এই বিভাগটি দেখায় কিভাবে জাভাস্ক্রিপ্ট ফ্লিট ট্র্যাকিং লাইব্রেরি ব্যবহার করে একটি গাড়ি অনুসরণ করতে হয়। আপনার কোড চালানোর আগে স্ক্রিপ্ট ট্যাগে নির্দিষ্ট কলব্যাক ফাংশন থেকে লাইব্রেরি লোড করা নিশ্চিত করুন।
একটি গাড়ির অবস্থান প্রদানকারীকে ইনস্ট্যান্টিয়েট করুন
জাভাস্ক্রিপ্ট ফ্লিট ট্র্যাকিং লাইব্রেরি অন ডিমান্ড রাইডস এবং ডেলিভারি API-এর জন্য একটি অবস্থান প্রদানকারীকে পূর্বনির্ধারিত করে। আপনার প্রোজেক্ট আইডি এবং আপনার টোকেন ফ্যাক্টরির একটি রেফারেন্স ব্যবহার করে এটিকে ইনস্ট্যান্টিয়েট করুন।
জাভাস্ক্রিপ্ট
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
.FleetEngineVehicleLocationProvider({
projectId,
authTokenFetcher,
// Optionally, you may specify
// vehicleId to immediately start
// tracking.
vehicleId: 'your-vehicle-id',
});
ম্যাপ ভিউ আরম্ভ করুন
জাভাস্ক্রিপ্ট জার্নি শেয়ারিং লাইব্রেরি লোড করার পরে, ম্যাপ ভিউ শুরু করুন এবং এটি HTML পৃষ্ঠায় যোগ করুন। আপনার পৃষ্ঠায় একটি <div> উপাদান থাকা উচিত যা মানচিত্র দৃশ্য ধারণ করে। নিচের উদাহরণে <div> উপাদানটির নাম দেওয়া হয়েছে map_canvas ।
জাভাস্ক্রিপ্ট
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
// Styling customizations; see below.
vehicleMarkerSetup: vehicleMarkerSetup,
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// Any undefined styling options will use defaults.
});
// 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 wish.
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],
// Styling customizations; see below.
anticipatedRoutePolylineSetup:
anticipatedRoutePolylineSetup,
// Any undefined styling options will use defaults.
});
// 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 wish.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);
ঘটনা পরিবর্তন শুনুন
আপনি অবস্থান প্রদানকারী ব্যবহার করে vehicle বস্তু থেকে একটি গাড়ি সম্পর্কে মেটা তথ্য পুনরুদ্ধার করতে পারেন। মেটা তথ্যে গাড়ির পরবর্তী পিকআপ বা ড্রপঅফের আগে 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);
}
});
টাইপস্ক্রিপ্ট
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('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);
});
ট্র্যাকিং বন্ধ করুন
লোকেশন প্রদানকারীকে গাড়ির ট্র্যাক করা থেকে থামাতে, লোকেশন প্রদানকারীর থেকে গাড়ির আইডি সরিয়ে দিন।
জাভাস্ক্রিপ্ট
locationProvider.vehicleId = '';
টাইপস্ক্রিপ্ট
locationProvider.vehicleId = '';
মানচিত্র দৃশ্য থেকে অবস্থান প্রদানকারী সরান
নিম্নলিখিত উদাহরণটি দেখায় কিভাবে মানচিত্র দৃশ্য থেকে একটি অবস্থান প্রদানকারীকে সরাতে হয়।
জাভাস্ক্রিপ্ট
mapView.removeLocationProvider(locationProvider);
টাইপস্ক্রিপ্ট
mapView.removeLocationProvider(locationProvider);
একটি যানবাহন বহর দেখুন
এই বিভাগটি দেখায় কিভাবে একটি যানবাহন বহর দেখতে JavaScript জার্নি শেয়ারিং লাইব্রেরি ব্যবহার করতে হয়। আপনার কোড চালানোর আগে স্ক্রিপ্ট ট্যাগে নির্দিষ্ট কলব্যাক ফাংশন থেকে লাইব্রেরি লোড করা নিশ্চিত করুন।
একটি যানবাহন ফ্লিট অবস্থান প্রদানকারীকে ইনস্ট্যান্টিয়েট করুন
জাভাস্ক্রিপ্ট ফ্লিট ট্র্যাকিং লাইব্রেরি একটি অবস্থান প্রদানকারীকে পূর্বেই সংজ্ঞায়িত করে যা অন ডিমান্ড রাইডস এবং ডেলিভারি API থেকে একাধিক যানবাহন নিয়ে আসে। আপনার প্রোজেক্ট আইডি ব্যবহার করুন সেইসাথে আপনার টোকেন ফেচারের একটি রেফারেন্স এটিকে ইনস্ট্যান্টিয়েট করতে।
জাভাস্ক্রিপ্ট
locationProvider =
new google.maps.journeySharing
.FleetEngineFleetLocationProvider({
projectId,
authTokenFetcher,
// Optionally, specify location bounds to
// limit which vehicles are
// retrieved and immediately start tracking.
locationRestriction: {
north: 37.3,
east: -121.8,
south: 37.1,
west: -122,
},
// Optionally, specify a filter to limit
// which vehicles are retrieved.
vehicleFilter:
'attributes.foo = "bar" AND attributes.baz = "qux"',
});
টাইপস্ক্রিপ্ট
locationProvider =
new google.maps.journeySharing
.FleetEngineFleetLocationProvider({
projectId,
authTokenFetcher,
// Optionally, specify location bounds to
// limit which vehicles are
// retrieved and immediately start tracking.
locationRestriction: {
north: 37.3,
east: -121.8,
south: 37.1,
west: -122,
},
// Optionally, specify a filter to limit
// which vehicles are retrieved.
vehicleFilter:
'attributes.foo = "bar" AND attributes.baz = "qux"',
});
vehicleFilter মানচিত্রে প্রদর্শিত যানবাহন ফিল্টার করতে ব্যবহৃত একটি প্রশ্ন নির্দিষ্ট করে। এই ফিল্টারটি সরাসরি ফ্লিট ইঞ্জিনে পাঠানো হয়। সমর্থিত ফরম্যাটের জন্য ListVehiclesRequest দেখুন।
locationRestriction ম্যাপে যানবাহন প্রদর্শন করার এলাকাকে সীমাবদ্ধ করে। এটি অবস্থান ট্র্যাকিং সক্রিয় কিনা তা নিয়ন্ত্রণ করে। এটি সেট না হওয়া পর্যন্ত অবস্থান ট্র্যাকিং শুরু হবে না।
অবস্থান প্রদানকারী তৈরি হয়ে গেলে, মানচিত্র দৃশ্য শুরু করুন ।
মানচিত্র ভিউপোর্ট ব্যবহার করে অবস্থান সীমাবদ্ধতা সেট করুন
locationRestriction মানচিত্র দৃশ্যে দৃশ্যমান এলাকার সাথে মেলে কনফিগার করা যেতে পারে।
জাভাস্ক্রিপ্ট
google.maps.event.addListenerOnce(
mapView.map, 'bounds_changed', () => {
const bounds = mapView.map.getBounds();
if (bounds) {
// If you did not specify a location restriction in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.locationRestriction = bounds;
}
});
টাইপস্ক্রিপ্ট
google.maps.event.addListenerOnce(
mapView.map, 'bounds_changed', () => {
const bounds = mapView.map.getBounds();
if (bounds) {
// If you did not specify a location restriction in the
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.locationRestriction = bounds;
}
});
ঘটনা পরিবর্তন শুনুন
আপনি অবস্থান প্রদানকারী ব্যবহার করে vehicles বস্তু থেকে বহর সম্পর্কে মেটা তথ্য পুনরুদ্ধার করতে পারেন। মেটা তথ্যে যানবাহনের বৈশিষ্ট্য যেমন নেভিগেশন স্ট্যাটাস, পরবর্তী ওয়েপয়েন্ট থেকে দূরত্ব এবং কাস্টম বৈশিষ্ট্য অন্তর্ভুক্ত থাকে; আরো বিস্তারিত জানার জন্য রেফারেন্স ডকুমেন্টেশন দেখুন. মেটা তথ্য পরিবর্তন একটি আপডেট ইভেন্ট ট্রিগার. নিম্নলিখিত উদাহরণ দেখায় কিভাবে এই পরিবর্তন ঘটনা শুনতে.
জাভাস্ক্রিপ্ট
locationProvider.addListener('update', e => {
// e.vehicles contains data that may be
// useful to the rest of the UI.
if (e.vehicles) {
for (vehicle of e.vehicles) {
console.log(vehicle.navigationStatus);
}
}
});
টাইপস্ক্রিপ্ট
locationProvider.addListener('update',
(e: google.maps.journeySharing.FleetEngineFleetLocationProviderUpdateEvent) => {
// e.vehicles contains data that may be useful to the rest of the UI.
if (e.vehicles) {
for (vehicle of e.vehicles) {
console.log(vehicle.navigationStatus);
}
}
});
ত্রুটির জন্য শুনুন
যানবাহনের ফ্লিট তথ্যের অনুরোধ থেকে অ্যাসিঙ্ক্রোনাসভাবে উদ্ভূত ত্রুটিগুলি ত্রুটি ইভেন্টগুলিকে ট্রিগার করে। এই ইভেন্টগুলির জন্য কীভাবে শুনতে হয় তা দেখানোর উদাহরণগুলির জন্য, ত্রুটির জন্য শুনুন দেখুন।
ট্র্যাকিং বন্ধ করুন
ফ্লিট ট্র্যাক করা থেকে অবস্থান প্রদানকারীকে থামাতে, অবস্থান প্রদানকারীর সীমা শূন্যে সেট করুন।
জাভাস্ক্রিপ্ট
locationProvider.locationRestriction = null;
টাইপস্ক্রিপ্ট
locationProvider.locationRestriction = null;
মানচিত্র দৃশ্য থেকে অবস্থান প্রদানকারী সরান
নিম্নলিখিত উদাহরণটি দেখায় কিভাবে মানচিত্র দৃশ্য থেকে একটি অবস্থান প্রদানকারীকে সরাতে হয়।
জাভাস্ক্রিপ্ট
mapView.removeLocationProvider(locationProvider);
টাইপস্ক্রিপ্ট
mapView.removeLocationProvider(locationProvider);
বেস মানচিত্রের চেহারা এবং অনুভূতি কাস্টমাইজ করুন
মানচিত্রের উপাদানটির চেহারা এবং অনুভূতি কাস্টমাইজ করতে, ক্লাউড-ভিত্তিক টুলিং ব্যবহার করে বা সরাসরি কোডে বিকল্পগুলি সেট করে আপনার মানচিত্রকে স্টাইল করুন ।
ক্লাউড-ভিত্তিক মানচিত্র স্টাইলিং ব্যবহার করুন
ক্লাউড-ভিত্তিক মানচিত্র স্টাইলিং আপনাকে আপনার কোডে কোনো পরিবর্তন না করেই Google ক্লাউড কনসোল থেকে Google মানচিত্র ব্যবহার করে এমন যেকোনো অ্যাপের জন্য মানচিত্রের শৈলী তৈরি এবং সম্পাদনা করতে দেয়। মানচিত্রের শৈলীগুলি আপনার ক্লাউড প্রকল্পে মানচিত্র আইডি হিসাবে সংরক্ষিত হয়৷ আপনার JavaScript ফ্লিট ট্র্যাকিং মানচিত্রে একটি শৈলী প্রয়োগ করতে, আপনি যখন JourneySharingMapView তৈরি করবেন তখন একটি mapId নির্দিষ্ট করুন। JourneySharingMapView তাৎক্ষণিক হওয়ার পরে mapId ক্ষেত্র পরিবর্তন বা যোগ করা যাবে না। নিম্নলিখিত উদাহরণটি দেখায় কিভাবে একটি মানচিত্র আইডি দিয়ে পূর্বে তৈরি করা মানচিত্র শৈলী সক্ষম করা যায়।
জাভাস্ক্রিপ্ট
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
});
টাইপস্ক্রিপ্ট
const mapView = new google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
mapOptions: {
mapId: 'YOUR_MAP_ID'
}
});
কোড-ভিত্তিক মানচিত্র স্টাইলিং ব্যবহার করুন
ম্যাপ স্টাইলিং কাস্টমাইজ করার আরেকটি উপায় হল আপনি যখন 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 অবজেক্ট নির্দিষ্ট করে একটি সাধারণ কাস্টমাইজেশন তৈরি করতে পারেন। বস্তুর মধ্যে নির্দিষ্ট পরিবর্তনগুলি প্রতিটি মার্কার তৈরি হওয়ার পরে প্রয়োগ করা হয়, যেকোনো ডিফল্ট বিকল্প ওভাররাইট করে।
আরও উন্নত বিকল্প হিসাবে, আপনি একটি কাস্টমাইজেশন ফাংশন নির্দিষ্ট করতে পারেন। কাস্টমাইজেশন ফাংশনগুলি ডেটার উপর ভিত্তি করে মার্কারগুলির স্টাইলিং করার পাশাপাশি মার্কারগুলিতে ইন্টারঅ্যাক্টিভিটি যোগ করার অনুমতি দেয়, যেমন ক্লিক হ্যান্ডলিং। বিশেষত, ফ্লিট ট্র্যাকিং মার্কার যে ধরনের বস্তুর প্রতিনিধিত্ব করে সে সম্পর্কে কাস্টমাইজেশন ফাংশনে ডেটা পাস করে: যানবাহন, স্টপ বা টাস্ক। এটি তখন মার্কার উপাদানের বর্তমান অবস্থার উপর ভিত্তি করে মার্কার স্টাইল পরিবর্তন করতে দেয়; উদাহরণস্বরূপ, অবশিষ্ট স্টপের সংখ্যা বা কাজের ধরন। এমনকি আপনি ফ্লিট ইঞ্জিনের বাইরের উত্স থেকে ডেটার বিরুদ্ধে যোগ দিতে পারেন এবং সেই তথ্যের উপর ভিত্তি করে মার্কার স্টাইল করতে পারেন।
উপরন্তু, মার্কার দৃশ্যমানতা ফিল্টার করতে আপনি কাস্টমাইজেশন ফাংশন ব্যবহার করতে পারেন। এটি করার জন্য, মার্কারে setVisible(false) কল করুন।
যাইহোক, কার্যক্ষমতার কারণে, আমরা FleetEngineFleetLocationProvider.vehicleFilter এর মতো অবস্থান প্রদানকারীতে নেটিভ ফিল্টারিং দিয়ে ফিল্টার করার পরামর্শ দিই। এটি বলেছে, যখন আপনার অতিরিক্ত ফিল্টারিং কার্যকারিতার প্রয়োজন হয়, আপনি কাস্টমাইজেশন ফাংশন ব্যবহার করে ফিল্টারিং প্রয়োগ করতে পারেন।
ফ্লিট ট্র্যাকিং লাইব্রেরি নিম্নলিখিত কাস্টমাইজেশন পরামিতি প্রদান করে:
MarkerOptions ব্যবহার করে চিহ্নিতকারীর স্টাইলিং পরিবর্তন করুন
নিম্নলিখিত উদাহরণটি দেখায় কিভাবে একটি MarkerOptions অবজেক্টের সাথে একটি গাড়ির মার্কারের স্টাইলিং কনফিগার করতে হয়। উপরে তালিকাভুক্ত যেকোনো মার্কার কাস্টমাইজেশন প্যারামিটার ব্যবহার করে যে কোনো মার্কারের স্টাইলিং কাস্টমাইজ করতে এই প্যাটার্নটি অনুসরণ করুন।
জাভাস্ক্রিপ্ট
vehicleMarkerCustomization = {
cursor: 'grab'
};
টাইপস্ক্রিপ্ট
vehicleMarkerCustomization = {
cursor: 'grab'
};
কাস্টমাইজেশন ফাংশন ব্যবহার করে মার্কারের স্টাইলিং পরিবর্তন করুন
নিম্নলিখিত উদাহরণটি দেখায় কিভাবে একটি গাড়ির মার্কার স্টাইল কনফিগার করতে হয়। উপরে তালিকাভুক্ত যেকোনো মার্কার কাস্টমাইজেশন প্যারামিটার ব্যবহার করে যে কোনো মার্কারের স্টাইলিং কাস্টমাইজ করতে এই প্যাটার্নটি অনুসরণ করুন।
জাভাস্ক্রিপ্ট
vehicleMarkerCustomization =
(params) => {
var remainingWaypoints = params.vehicle.waypoints.length;
params.marker.setLabel(`${remainingWaypoints}`);
};
টাইপস্ক্রিপ্ট
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
var remainingWaypoints = params.vehicle.waypoints.length;
params.marker.setLabel(`${remainingWaypoints}`);
};
মার্কারগুলিতে ক্লিক হ্যান্ডলিং যোগ করুন
নিচের উদাহরণটি দেখায় কিভাবে একটি গাড়ির মার্কারে ক্লিক হ্যান্ডলিং যোগ করতে হয়। উপরে তালিকাভুক্ত যেকোনো মার্কার কাস্টমাইজেশন প্যারামিটার ব্যবহার করে যেকোনো মার্কারে ক্লিক হ্যান্ডলিং যোগ করতে এই প্যাটার্নটি অনুসরণ করুন।
জাভাস্ক্রিপ্ট
vehicleMarkerCustomization =
(params) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
টাইপস্ক্রিপ্ট
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
if (params.isNew) {
params.marker.addListener('click', () => {
// Perform desired action.
});
}
};
দৃশ্যমান মার্কার ফিল্টার করুন
নিম্নলিখিত উদাহরণটি দেখায় যে কোন গাড়ির চিহ্নিতকারীগুলি দৃশ্যমান তা কীভাবে ফিল্টার করতে হয়। উপরে তালিকাভুক্ত যেকোনো মার্কার কাস্টমাইজেশন প্যারামিটার ব্যবহার করে যে কোনো মার্কার ফিল্টার করতে এই প্যাটার্ন অনুসরণ করুন।
জাভাস্ক্রিপ্ট
vehicleMarkerCustomization =
(params) => {
var remainingWaypoints = params.vehicle.remainingWaypoints.length;
if (remainingWaypoints > 10) {
params.marker.setVisible(false);
}
};
টাইপস্ক্রিপ্ট
vehicleMarkerCustomization =
(params: VehicleMarkerCustomizationFunctionParams) => {
var remainingWaypoints = params.vehicle.remainingWaypoints.length;
if (remainingWaypoints > 10) {
params.marker.setVisible(false);
}
};
একটি গাড়ি অনুসরণ করার সময় পলিলাইন কাস্টমাইজেশন ব্যবহার করুন
ফ্লিট ট্র্যাকিং লাইব্রেরির সাহায্যে, আপনি মানচিত্রে অনুসরণ করা গাড়ির রুটের চেহারা এবং অনুভূতিও কাস্টমাইজ করতে পারেন। লাইব্রেরি গাড়ির সক্রিয় বা অবশিষ্ট পথের প্রতিটি জোড়া স্থানাঙ্কের জন্য একটি google.maps.Polyline অবজেক্ট তৈরি করে। আপনি পলিলাইন কাস্টমাইজেশন নির্দিষ্ট করে Polyline অবজেক্ট স্টাইল করতে পারেন। লাইব্রেরি তারপরে দুটি পরিস্থিতিতে এই কাস্টমাইজেশনগুলি প্রয়োগ করে: মানচিত্রে বস্তুগুলি যুক্ত করার আগে এবং যখন বস্তুগুলির জন্য ব্যবহৃত ডেটা পরিবর্তিত হয়।
মার্কার কাস্টমাইজেশনের অনুরূপ, আপনি PolylineOptions একটি সেট নির্দিষ্ট করতে পারেন যাতে তারা তৈরি করা বা আপডেট করা হয় তখন সমস্ত মিলে যাওয়া Polyline অবজেক্টগুলিতে প্রয়োগ করা হয়।
একইভাবে, আপনি একটি কাস্টমাইজেশন ফাংশন নির্দিষ্ট করতে পারেন। কাস্টমাইজেশন ফাংশনগুলি ফ্লিট ইঞ্জিন দ্বারা প্রেরিত ডেটার উপর ভিত্তি করে বস্তুর পৃথক স্টাইল করার অনুমতি দেয়। ফাংশন গাড়ির বর্তমান অবস্থার উপর ভিত্তি করে প্রতিটি বস্তুর স্টাইলিং পরিবর্তন করতে পারে; উদাহরণস্বরূপ, Polyline বস্তুটিকে একটি গভীর ছায়ায় রঙ করা, বা গাড়িটি ধীর গতিতে চলার সময় এটিকে ঘন করা। এমনকি আপনি ফ্লিট ইঞ্জিনের বাইরের উত্স থেকেও যোগ দিতে পারেন এবং সেই তথ্যের ভিত্তিতে Polyline অবজেক্টকে স্টাইল করতে পারেন।
আপনি FleetEngineVehicleLocationProviderOptions এ প্রদত্ত প্যারামিটার ব্যবহার করে কাস্টমাইজেশন নির্দিষ্ট করতে পারেন। আপনি গাড়ির যাত্রায় বিভিন্ন পাথ স্টেটের জন্য কাস্টমাইজেশন সেট করতে পারেন -- ইতিমধ্যে ভ্রমণ করেছেন, সক্রিয়ভাবে ভ্রমণ করছেন বা এখনও ভ্রমণ করেননি। পরামিতিগুলি নিম্নরূপ:
-
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.vehicle.waypoints[0].distanceMeters;
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: VehiclePolylineCustomizationFunctionParams) => {
const distance = params.vehicle.waypoints[0].distanceMeters;
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};
ট্রাফিক-সচেতন Polyline অবজেক্ট রেন্ডার করুন
ফ্লিট ইঞ্জিন অনুসরণ করা গাড়ির জন্য সক্রিয় এবং অবশিষ্ট পাথগুলির জন্য ট্রাফিক গতির ডেটা প্রদান করে। আপনি Polyline অবজেক্টকে তাদের ট্রাফিকের গতি অনুসারে স্টাইল করতে এই তথ্যটি ব্যবহার করতে পারেন:
জাভাস্ক্রিপ্ট
// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;
// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
(params) => {
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
for (const polylineObject of params.polylines) {
if (polylineObject.get('strokeColor') === '#05f') {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
টাইপস্ক্রিপ্ট
// Color the Polyline objects according to their real-time traffic levels
// using '#05f' for normal, '#fa0' for slow, and '#f33' for traffic jam.
activePolylineCustomization =
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;
// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
(params: VehiclePolylineCustomizationFunctionParams) => {
FleetEngineVehicleLocationProvider.
TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
for (const polylineObject of params.polylines) {
if (polylineObject.get('strokeColor') === '#05f') {
polylineObject.setOptions({strokeColor: 'green'});
}
}
};
একটি যানবাহন বা অবস্থান চিহ্নিতকারীর জন্য একটি InfoWindow প্রদর্শন করুন
আপনি একটি যানবাহন বা অবস্থান চিহ্নিতকারী সম্পর্কে অতিরিক্ত তথ্য প্রদর্শন করতে একটি InfoWindow ব্যবহার করতে পারেন।
নিম্নলিখিত উদাহরণটি দেখায় কিভাবে একটি InfoWindow তৈরি করতে হয় এবং এটিকে একটি গাড়ির মার্কারে সংযুক্ত করতে হয়।
জাভাস্ক্রিপ্ট
// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
{disableAutoPan: true});
// (Assumes a vehicle location provider.)
locationProvider.addListener('update', e => {
if (e.vehicle) {
const distance =
e.vehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next drop-off point.`);
// 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});
// (Assumes a vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
if (e.vehicle) {
const distance =
e.vehicle.remainingDistanceMeters;
infoWindow.setContent(
`Your vehicle is ${distance}m away from the next drop-off.`);
// 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,
...
});
টাইপস্ক্রিপ্ট
const mapView = new
google.maps.journeySharing.JourneySharingMapView({
element: document.getElementById('map_canvas'),
locationProviders: [locationProvider],
automaticViewportMode:
google.maps.journeySharing
.AutomaticViewportMode.NONE,
...
});
একটি বিদ্যমান মানচিত্র প্রতিস্থাপন করুন
আপনি একটি বিদ্যমান মানচিত্র প্রতিস্থাপন করতে পারেন যাতে চিহ্নিতকারী বা অন্যান্য কাস্টমাইজেশনগুলি অন্তর্ভুক্ত থাকে সেই কাস্টমাইজেশনগুলি না হারিয়ে৷
উদাহরণস্বরূপ, ধরুন আপনার কাছে একটি মানক 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 Oracle Park Stadium
var oraclePark = { lat: 37.780087547237365, lng: -122.38948437884427 };,
// 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 Oracle Park
var marker = new google.maps.Marker({ position: oraclePark, 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. Use FleetEngineVehicleLocationProvider
// as appropriate.
locationProvider = new google.maps.journeySharing.FleetEngineVehicleLocationProvider({
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
});
mapView.addListener('ready', () => {
locationProvider.vehicleId = VEHICLE_ID;
// (4) Add customizations like before.
// The location of Oracle Park
var oraclePark = {lat: 37.77995187146094, lng: -122.38957020952795};
// 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 Oracle Park
var marker = new google.maps.Marker({position: oraclePark, 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, which includes Fleet Tracking functionality.
-->
<script
defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing&v=beta"
></script>
</body>
</html>
আপনি যদি ওরাকল পার্কের কাছে নির্দিষ্ট আইডি সহ একটি যানবাহন পরিচালনা করেন তবে এটি মানচিত্রে রেন্ডার হবে।