On-demand Rides and Deliveries Solution is currently available only to select partners.

এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

জাভাস্ক্রিপ্টের জন্য ভোক্তা SDK দিয়ে শুরু করা

JavaScript SDK আপনাকে যানবাহনের অবস্থান এবং ফ্লিট ইঞ্জিনে ট্র্যাক করা আগ্রহের অবস্থানগুলি কল্পনা করতে দেয়৷ লাইব্রেরিতে একটি জাভাস্ক্রিপ্ট মানচিত্র উপাদান রয়েছে যা ফ্লিট ইঞ্জিনের সাথে সংযোগ করার জন্য একটি আদর্শ google.maps.Map সত্তা এবং ডেটা উপাদানগুলির জন্য একটি ড্রপ-ইন প্রতিস্থাপন। JavaScript SDK ব্যবহার করে, আপনি আপনার ওয়েব অ্যাপ্লিকেশন থেকে একটি কাস্টমাইজযোগ্য, অ্যানিমেটেড ট্রিপ এবং অর্ডার অগ্রগতির অভিজ্ঞতা প্রদান করতে পারেন।

উপাদান

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

ট্রিপ এবং অর্ডার অগ্রগতি মানচিত্র দৃশ্য

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

ট্রিপ অবস্থান প্রদানকারী

JavaScript SDK একটি ট্রিপ অবস্থান প্রদানকারী অন্তর্ভুক্ত করে যা ট্র্যাক করা বস্তুর জন্য অবস্থানের তথ্য ট্রিপ এবং অর্ডার অগ্রগতি মানচিত্রে ফিড করে।

আপনি ট্র্যাক করতে ট্রিপ অবস্থান প্রদানকারী ব্যবহার করতে পারেন:

একটি ট্রিপের পিকআপ বা ড্রপঅফ অবস্থান।
ট্রিপের জন্য নির্ধারিত গাড়ির অবস্থান এবং রুট।

ট্র্যাক করা অবস্থান বস্তু

অবস্থান প্রদানকারী ওয়েপয়েন্ট এবং যানবাহনের মতো বস্তুর অবস্থান ট্র্যাক করে।

মূল অবস্থান

মূল অবস্থান হল সেই স্থান যেখানে একটি যাত্রা শুরু হয়। এটি পিকআপ অবস্থান চিহ্নিত করে।

গন্তব্য অবস্থান

গন্তব্য অবস্থান হল সেই অবস্থান যেখানে একটি যাত্রা শেষ হয়। এটি ড্রপঅফ অবস্থান চিহ্নিত করে।

ওয়েপয়েন্ট অবস্থান

একটি ওয়েপয়েন্ট অবস্থান একটি ট্র্যাক করা যাত্রার রুট বরাবর যে কোনো অবস্থান। উদাহরণস্বরূপ, একটি বাস রুটের প্রতিটি স্টপ একটি ওয়েপয়েন্ট অবস্থান।

গাড়ির অবস্থান

গাড়ির অবস্থান হল একটি গাড়ির ট্র্যাক করা অবস্থান। এটি ঐচ্ছিকভাবে গাড়ির জন্য একটি রুট অন্তর্ভুক্ত করতে পারে।

প্রমাণীকরণ টোকেন ফেচার

ফ্লিট ইঞ্জিনে সঞ্চিত অবস্থানের ডেটা অ্যাক্সেস নিয়ন্ত্রণ করতে, আপনাকে অবশ্যই আপনার সার্ভারে ফ্লিট ইঞ্জিনের জন্য একটি JSON ওয়েব টোকেন (JWT) মিন্টিং পরিষেবা প্রয়োগ করতে হবে। তারপর আপনার ওয়েব অ্যাপ্লিকেশনের অংশ হিসাবে একটি প্রমাণীকরণ টোকেন ফেচার প্রয়োগ করুন , JavaScript SDK ব্যবহার করে অবস্থানের ডেটাতে অ্যাক্সেস প্রমাণীকরণ করুন৷

স্টাইলিং বিকল্প

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

ট্র্যাক করা অবস্থানগুলির দৃশ্যমানতা নিয়ন্ত্রণ করা

এই বিভাগটি ফ্লিট ইঞ্জিন পূর্বনির্ধারিত অবস্থান প্রদানকারীদের জন্য মানচিত্রে ট্র্যাক করা অবস্থান বস্তুর দৃশ্যমানতার নিয়ম বর্ণনা করে। কাস্টম বা প্রাপ্ত অবস্থান প্রদানকারীরা দৃশ্যমানতার নিয়ম পরিবর্তন করতে পারে।

যানবাহন

একটি রাইডশেয়ারিং যানবাহন দেখা যায় যে সময় থেকে এটি একটি ট্রিপে বরাদ্দ করা হয় ড্রপঅফের সময় পর্যন্ত৷ যদি ট্রিপ বাতিল করা হয়, তাহলে গাড়িটি আর দৃশ্যমান হয়।

অন্যান্য সমস্ত অবস্থান চিহ্নিতকারী

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

JavaScript SDK দিয়ে শুরু করুন

JavaScript SDK ব্যবহার করার আগে, নিশ্চিত করুন যে আপনি ফ্লিট ইঞ্জিন এবং একটি API কী পাওয়ার সাথে পরিচিত।

একটি রাইড শেয়ারিং ট্রিপ ট্র্যাক করতে, প্রথমে একটি ট্রিপ আইডি দাবি তৈরি করুন।

একটি ট্রিপ আইডি দাবি তৈরি করুন

ট্রিপ অবস্থান প্রদানকারী ব্যবহার করে একটি ট্রিপ ট্র্যাক করতে, একটি ট্রিপ আইডি দাবি সহ একটি JSON ওয়েব টোকেন (JWT) তৈরি করুন৷

JWT পেলোড তৈরি করতে, কী ট্রিপিড সহ অনুমোদন বিভাগে একটি অতিরিক্ত দাবি যোগ করুন এবং এর মান ট্রিপ আইডিতে সেট করুন।

নিম্নলিখিত উদাহরণ দেখায় কিভাবে ট্রিপ আইডি দ্বারা ট্র্যাক করার জন্য একটি টোকেন তৈরি করতে হয়:

{
  "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": {
     "tripid": "tid_12345",
   }
}

একটি প্রমাণীকরণ টোকেন ফেচার তৈরি করুন৷

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

একটি প্রতিশ্রুতিতে মোড়ানো দুটি ক্ষেত্র সহ একটি ডেটা স্ট্রাকচার আনতে হবে:

একটি স্ট্রিং token ।
একটি সংখ্যার expiresInSeconds । একটি টোকেন আনার পর এই পরিমাণ সময়ের মধ্যে মেয়াদ শেষ হয়ে যায়।

জাভাস্ক্রিপ্ট কনজিউমার SDK প্রমাণীকরণ টোকেন ফেচারের মাধ্যমে একটি টোকেনের অনুরোধ করে যখন নিচের যেকোনো একটি সত্য হয়:

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

অন্যথায়, SDK পূর্বে জারি করা, এখনও বৈধ টোকেন ব্যবহার করে এবং ফেচারকে কল করে না।

নিম্নলিখিত উদাহরণ দেখায় কিভাবে একটি প্রমাণীকরণ টোকেন ফেচার তৈরি করতে হয়:

জাভাস্ক্রিপ্ট

async 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.jwt,
    expiresInSeconds: data.expirationTimestamp - Date.now(),
  };
}

টোকেন মিন্ট করার জন্য সার্ভার-সাইড এন্ডপয়েন্ট বাস্তবায়ন করার সময়, নিম্নলিখিতগুলি মনে রাখবেন:

শেষ বিন্দু অবশ্যই টোকেনের জন্য একটি মেয়াদ শেষ হওয়ার সময় ফেরত দেবে; উপরের উদাহরণে, এটি data.ExpiresInSeconds হিসাবে দেওয়া হয়েছে। ExpiresInSeconds।
প্রমাণীকরণ টোকেন ফেচারকে অবশ্যই মেয়াদ শেষ হওয়ার সময় (সেকেন্ডে, আনার সময় থেকে) লাইব্রেরিতে পাস করতে হবে, যেমন উদাহরণে দেখানো হয়েছে।
SERVER_TOKEN_URL আপনার প্রদানকারীর বাস্তবায়নের উপর নির্ভর করে, এইগুলি হল উদাহরণ প্রদানকারীর URL:
- https:// SERVER_URL /token/driver/ VEHICLEID
- https:// SERVER_URL /token/consumer/ TRIPID

HTML থেকে একটি মানচিত্র লোড করুন

নিম্নলিখিত উদাহরণটি একটি নির্দিষ্ট URL থেকে JavaScript SDK কিভাবে লোড করতে হয় তা দেখায়। কলব্যাক প্যারামিটারটি API লোড হওয়ার পরে initMap ফাংশনটি চালায়। ডিফার অ্যাট্রিবিউট ব্রাউজারটিকে API লোড হওয়ার সময় আপনার পৃষ্ঠার বাকি অংশ রেন্ডার করা চালিয়ে যেতে দেয়।

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

একটি ট্রিপ অনুসরণ

এই বিভাগটি দেখায় কিভাবে জাভাস্ক্রিপ্ট SDK ব্যবহার করে রাইড শেয়ারিং বা ডেলিভারি ট্রিপ অনুসরণ করতে হয়। আপনার কোড চালানোর আগে স্ক্রিপ্ট ট্যাগে নির্দিষ্ট কলব্যাক ফাংশন থেকে লাইব্রেরি লোড করা নিশ্চিত করুন।

একটি ট্রিপ অবস্থান প্রদানকারীকে ইনস্ট্যান্টিয়েট করুন

JavaScript SDK ফ্লিট ইঞ্জিন রাইডশেয়ারিং API-এর জন্য একটি অবস্থান প্রদানকারীকে পূর্বনির্ধারিত করে। আপনার প্রোজেক্ট আইডি এবং আপনার টোকেন ফ্যাক্টরির একটি রেফারেন্স ব্যবহার করে এটিকে ইনস্ট্যান্টিয়েট করুন।

জাভাস্ক্রিপ্ট

locationProvider =
    new google.maps.journeySharing
        .FleetEngineTripLocationProvider({
          projectId: 'your-project-id',
          authTokenFetcher: authTokenFetcher, // the token fetcher defined in the previous step

          // Optionally, you may specify a trip ID to
          // immediately start tracking.
          tripId: 'your-trip-id',
});

টাইপস্ক্রিপ্ট

locationProvider =
    new google.maps.journeySharing
        .FleetEngineTripLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, you may specify a trip ID to
          // immediately start tracking.
          tripId: 'your-trip-id',
});

ম্যাপ ভিউ আরম্ভ করুন

JavaScript SDK লোড করার পরে, মানচিত্র দৃশ্যটি শুরু করুন এবং এটি HTML পৃষ্ঠায় যোগ করুন। আপনার পৃষ্ঠায় একটি <div> উপাদান থাকা উচিত যা মানচিত্র দৃশ্য ধারণ করে। নিচের উদাহরণে <div> উপাদানটির নাম দেওয়া হয়েছে map_canvas ।

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

জাভাস্ক্রিপ্ট

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  // Styling customizations; see below.
  vehicleMarkerCustomization: vehicleMarkerCustomization,
  activePolylineCustomization: activePolylineCustomization,
  // Any undefined styling options will use defaults.
});

// If you did not specify a trip ID in the location
// provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.tripId = 'your-trip-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({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  // Styling customizations; see below.
  vehicleMarkerCustomization: vehicleMarkerCustomization,
  activePolylineCustomization: activePolylineCustomization,
  // Any undefined styling options will use defaults.
});

// If you did not specify a trip ID in the location
// provider constructor, you may do so here.
locationProvider.tripId = 'your-trip-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.trip contains data that may be useful
  // to the rest of the UI.  
  console.log(e.trip.dropOffTime);
});

টাইপস্ক্রিপ্ট

locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineTripLocationProviderUpdateEvent) => {
  // e.trip contains data that may be useful
  // to the rest of the UI.  
  console.log(e.trip.dropOffTime);
});

ত্রুটিগুলি পরিচালনা করুন

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

জাভাস্ক্রিপ্ট

locationProvider.addListener('error', e => {
  // e.error contains the error that triggered the 
  // event
  console.error(e.error);
});

টাইপস্ক্রিপ্ট

locationProvider.addListener('error', (e: google.maps.ErrorEvent) => {
  // e.error contains the error that triggered the 
  // event
  console.error(e.error);
});

দ্রষ্টব্য: অপ্রত্যাশিত ত্রুটিগুলি পরিচালনা করার জন্য লাইব্রেরি কলগুলি মোড়ানোর try...catch ব্লকগুলি নিশ্চিত করুন৷

ট্র্যাকিং বন্ধ করুন

অবস্থান প্রদানকারীকে ট্রিপ ট্র্যাক করা থেকে থামাতে, অবস্থান প্রদানকারীর থেকে ট্রিপ আইডি সরিয়ে দিন।

জাভাস্ক্রিপ্ট

locationProvider.tripId = '';

টাইপস্ক্রিপ্ট

locationProvider.tripId = '';

মানচিত্র দৃশ্য থেকে অবস্থান প্রদানকারী সরান

নিম্নলিখিত উদাহরণটি দেখায় কিভাবে মানচিত্র দৃশ্য থেকে একটি অবস্থান প্রদানকারীকে সরাতে হয়।

জাভাস্ক্রিপ্ট

mapView.removeLocationProvider(locationProvider);

টাইপস্ক্রিপ্ট

mapView.removeLocationProvider(locationProvider);

বেস মানচিত্রের চেহারা এবং অনুভূতি কাস্টমাইজ করা

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

ক্লাউড-ভিত্তিক মানচিত্র স্টাইলিং ব্যবহার করে

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

জাভাস্ক্রিপ্ট

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // and any other styling options.
});

টাইপস্ক্রিপ্ট

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    mapId: 'YOUR_MAP_ID'
  }
  // and 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" }
        ]
      }
    ]
  }
});

মার্কার কাস্টমাইজেশন ব্যবহার করুন

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

সবচেয়ে সহজ কাস্টমাইজেশন হল একটি MarkerOptions অবজেক্ট নির্দিষ্ট করা যা একই ধরনের সমস্ত মার্কারে প্রয়োগ করা হবে। বস্তুর মধ্যে নির্দিষ্ট পরিবর্তনগুলি প্রতিটি মার্কার তৈরি হওয়ার পরে প্রয়োগ করা হয়, যেকোনো ডিফল্ট বিকল্প ওভাররাইট করে।

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

JavaScript SDK FleetEngineTripLocationProviderOptions এ নিম্নলিখিত কাস্টমাইজেশন প্যারামিটারগুলি প্রদান করে:

`MarkerOptions` ব্যবহার করে চিহ্নিতকারীর স্টাইলিং পরিবর্তন করুন

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

জাভাস্ক্রিপ্ট

vehicleMarkerCustomization = {
  cursor: 'grab'
};

টাইপস্ক্রিপ্ট

vehicleMarkerCustomization = {
  cursor: 'grab'
};

কাস্টমাইজেশন ফাংশন ব্যবহার করে মার্কারের স্টাইলিং পরিবর্তন করুন

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

জাভাস্ক্রিপ্ট

vehicleMarkerCustomization =
  (params) => {
    var distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
  };

টাইপস্ক্রিপ্ট

vehicleMarkerCustomization =
  (params: TripMarkerCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints.length;
    params.marker.setLabel(`${distance}`);
};

মার্কারগুলিতে ক্লিক হ্যান্ডলিং যোগ করুন

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

জাভাস্ক্রিপ্ট

vehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

টাইপস্ক্রিপ্ট

vehicleMarkerCustomization =
  (params: TripMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // Perform desired action.
      });
    }
  };

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

JavaScript SDK-এর সাহায্যে, আপনি মানচিত্রে ট্রিপ রুটের চেহারা ও অনুভূতি কাস্টমাইজ করতে পারেন। লাইব্রেরি গাড়ির সক্রিয় বা অবশিষ্ট পথের প্রতিটি জোড়া স্থানাঙ্কের জন্য একটি google.maps.Polyline অবজেক্ট তৈরি করে। আপনি পলিলাইন কাস্টমাইজেশন নির্দিষ্ট করে Polyline অবজেক্ট স্টাইল করতে পারেন। লাইব্রেরি তারপরে দুটি পরিস্থিতিতে এই কাস্টমাইজেশনগুলি প্রয়োগ করে: মানচিত্রে বস্তুগুলি যুক্ত করার আগে এবং যখন বস্তুগুলির জন্য ব্যবহৃত ডেটা পরিবর্তিত হয়।

মার্কার কাস্টমাইজেশনের অনুরূপ, আপনি PolylineOptions একটি সেট নির্দিষ্ট করতে পারেন যাতে তারা তৈরি করা বা আপডেট করা হয় তখন সমস্ত মিলে যাওয়া Polyline অবজেক্টগুলিতে প্রয়োগ করা হয়।

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

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

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.trip.remainingWaypoints[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: TripPolylineCustomizationFunctionParams) => {
    const distance = params.trip.remainingWaypoints[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 =
  FleetEngineTripLocationProvider.
      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) => {
    FleetEngineTripLocationProvider.
        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 =
  FleetEngineTripLocationProvider.
      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: TripPolylineCustomizationFunctionParams) => {
    FleetEngineTripLocationProvider.
        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});

locationProvider.addListener('update', e => {
  const stopsCount = e.trip.remainingWaypoints.length;
  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.FleetEngineTripLocationProviderUpdateEvent) => {
  const stopsCount = e.trip.remainingWaypoints.length;
  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,
  ...
});

টাইপস্ক্রিপ্ট

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  automaticViewportMode:
      google.maps.journeySharing
          .AutomaticViewportMode.NONE,
  ...
});

একটি বিদ্যমান মানচিত্র প্রতিস্থাপন করুন

আপনি জাভাস্ক্রিপ্ট SDK ব্যবহার করতে পারেন এমন একটি বিদ্যমান মানচিত্র প্রতিস্থাপন করতে যাতে সেই কাস্টমাইজেশনগুলি না হারিয়ে মার্কার বা অন্যান্য কাস্টমাইজেশন অন্তর্ভুক্ত থাকে।

উদাহরণস্বরূপ, ধরুন আপনার কাছে একটি মানক 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, centered at Uluru
  var map = new google.maps.Map(document.getElementById('map'));
  map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});

  // The marker, 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>

জাভাস্ক্রিপ্ট SDK যোগ করতে:

প্রমাণীকরণ টোকেন কারখানার জন্য কোড যোগ করুন।
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
async 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.FleetEngineTripLocationProvider({
    projectId: "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.tripId = TRIP_ID;

    // (4) Add customizations like before.

    // The location of Uluru
    var uluru = {lat: -25.344, lng: 131.036};
    // The map, centered at Uluru
    var map = mapView.map;
    map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
    // The marker, 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 SDK 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>

আপনি যদি উলুরুর কাছে নির্দিষ্ট আইডি দিয়ে একটি ট্রিপ পরিচালনা করেন, তাহলে এটি এখন মানচিত্রে রেন্ডার করা হবে।

জাভাস্ক্রিপ্টের জন্য ভোক্তা SDK দিয়ে শুরু করা

উপাদান

ট্রিপ এবং অর্ডার অগ্রগতি মানচিত্র দৃশ্য

ট্রিপ অবস্থান প্রদানকারী

ট্র্যাক করা অবস্থান বস্তু

মূল অবস্থান

গন্তব্য অবস্থান

ওয়েপয়েন্ট অবস্থান

গাড়ির অবস্থান

প্রমাণীকরণ টোকেন ফেচার

স্টাইলিং বিকল্প

ট্র্যাক করা অবস্থানগুলির দৃশ্যমানতা নিয়ন্ত্রণ করা

যানবাহন

অন্যান্য সমস্ত অবস্থান চিহ্নিতকারী

JavaScript SDK দিয়ে শুরু করুন

একটি ট্রিপ আইডি দাবি তৈরি করুন

একটি প্রমাণীকরণ টোকেন ফেচার তৈরি করুন৷

জাভাস্ক্রিপ্ট

টাইপস্ক্রিপ্ট

HTML থেকে একটি মানচিত্র লোড করুন

একটি ট্রিপ অনুসরণ

একটি ট্রিপ অবস্থান প্রদানকারীকে ইনস্ট্যান্টিয়েট করুন

জাভাস্ক্রিপ্ট

টাইপস্ক্রিপ্ট

ম্যাপ ভিউ আরম্ভ করুন

জাভাস্ক্রিপ্ট

টাইপস্ক্রিপ্ট

ঘটনা পরিবর্তন শুনুন

জাভাস্ক্রিপ্ট

টাইপস্ক্রিপ্ট

ত্রুটিগুলি পরিচালনা করুন

জাভাস্ক্রিপ্ট

টাইপস্ক্রিপ্ট

ট্র্যাকিং বন্ধ করুন

জাভাস্ক্রিপ্ট

টাইপস্ক্রিপ্ট

মানচিত্র দৃশ্য থেকে অবস্থান প্রদানকারী সরান

জাভাস্ক্রিপ্ট

টাইপস্ক্রিপ্ট

বেস মানচিত্রের চেহারা এবং অনুভূতি কাস্টমাইজ করা

ক্লাউড-ভিত্তিক মানচিত্র স্টাইলিং ব্যবহার করে

জাভাস্ক্রিপ্ট

টাইপস্ক্রিপ্ট

কোড-ভিত্তিক মানচিত্র স্টাইলিং ব্যবহার করুন

জাভাস্ক্রিপ্ট

টাইপস্ক্রিপ্ট

মার্কার কাস্টমাইজেশন ব্যবহার করুন

MarkerOptions ব্যবহার করে চিহ্নিতকারীর স্টাইলিং পরিবর্তন করুন

জাভাস্ক্রিপ্ট

টাইপস্ক্রিপ্ট

কাস্টমাইজেশন ফাংশন ব্যবহার করে মার্কারের স্টাইলিং পরিবর্তন করুন

জাভাস্ক্রিপ্ট

টাইপস্ক্রিপ্ট

মার্কারগুলিতে ক্লিক হ্যান্ডলিং যোগ করুন

জাভাস্ক্রিপ্ট

টাইপস্ক্রিপ্ট

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

PolylineOptions ব্যবহার করে Polyline অবজেক্টের স্টাইলিং পরিবর্তন করুন

জাভাস্ক্রিপ্ট

টাইপস্ক্রিপ্ট

কাস্টমাইজেশন ফাংশন ব্যবহার করে Polyline অবজেক্টের স্টাইলিং পরিবর্তন করুন

জাভাস্ক্রিপ্ট

টাইপস্ক্রিপ্ট

Polyline বস্তুর দৃশ্যমানতা নিয়ন্ত্রণ করুন

জাভাস্ক্রিপ্ট

টাইপস্ক্রিপ্ট

ট্রাফিক-সচেতন Polyline অবজেক্ট রেন্ডার করুন

জাভাস্ক্রিপ্ট

টাইপস্ক্রিপ্ট

একটি যানবাহন বা অবস্থান চিহ্নিতকারীর জন্য একটি InfoWindow প্রদর্শন করুন

জাভাস্ক্রিপ্ট

টাইপস্ক্রিপ্ট

স্বয়ংক্রিয় ফিটিং অক্ষম করুন

জাভাস্ক্রিপ্ট

টাইপস্ক্রিপ্ট

একটি বিদ্যমান মানচিত্র প্রতিস্থাপন করুন

`MarkerOptions` ব্যবহার করে চিহ্নিতকারীর স্টাইলিং পরিবর্তন করুন

`PolylineOptions` ব্যবহার করে `Polyline` অবজেক্টের স্টাইলিং পরিবর্তন করুন

কাস্টমাইজেশন ফাংশন ব্যবহার করে `Polyline` অবজেক্টের স্টাইলিং পরিবর্তন করুন

`Polyline` বস্তুর দৃশ্যমানতা নিয়ন্ত্রণ করুন

ট্রাফিক-সচেতন `Polyline` অবজেক্ট রেন্ডার করুন

একটি যানবাহন বা অবস্থান চিহ্নিতকারীর জন্য একটি `InfoWindow` প্রদর্শন করুন