JavaScript के साथ उपभोक्ता SDK का इस्तेमाल शुरू करना

JavaScript SDK की मदद से, Fleet Engine में ट्रैक की गई वाहनों की जगह और दिलचस्पी वाली जगहों को विज़ुअलाइज़ किया जा सकता है. लाइब्रेरी में एक JavaScript मैप कॉम्पोनेंट होता है. यह Fleet Engine से कनेक्ट करने के लिए, स्टैंडर्ड google.maps.Map इकाई और डेटा कॉम्पोनेंट का एक ड्रॉप-इन रिप्लेसमेंट है. JavaScript SDK का इस्तेमाल करके, अपने वेब ऐप्लिकेशन से यात्रा और ऑर्डर की प्रोग्रेस को पसंद के मुताबिक बनाने का अनुभव दिया जा सकता है.

घटक

JavaScript SDK टूल, वाहनों और वेपॉइंट के विज़ुअलाइज़ेशन के लिए कॉम्पोनेंट उपलब्ध कराता है. साथ ही, ड्राइवर के ETA या ड्राइव करने की बची हुई दूरी के लिए रॉ डेटा फ़ीड उपलब्ध कराता है.

यात्रा और ऑर्डर की स्थिति का मैप व्यू

मैप व्यू कॉम्पोनेंट, वाहनों और वेपॉइंट की जगह को विज़ुअलाइज़ करता है. अगर किसी वाहन का रास्ता पता है, तो मैप व्यू कॉम्पोनेंट, बताए गए रास्ते पर चलने पर उस वाहन का ऐनिमेशन दिखाता है.

यात्रा की जगह की जानकारी देने वाली कंपनी

JavaScript SDK में यात्रा की जगह की जानकारी देने वाली कंपनी शामिल होती है. यह सुविधा, ट्रैक किए गए ऑब्जेक्ट की जगह की जानकारी को यात्रा और ऑर्डर की प्रोग्रेस मैप में फ़ीड करती है.

इन चीज़ों को ट्रैक करने के लिए, यात्रा की जगह की जानकारी देने वाली कंपनी का इस्तेमाल किया जा सकता है:

  • यात्रा के लिए पिक अप या ड्रॉप करने की जगह.
  • यात्रा के लिए असाइन किए गए वाहन की जगह और रास्ता.

ट्रैक की गई जगह की जानकारी से जुड़े ऑब्जेक्ट

जगह की जानकारी देने वाला, वेपॉइंट और गाड़ियों जैसे ऑब्जेक्ट की जगह की जानकारी ट्रैक करता है.

यात्रा शुरू करने की जगह

शुरुआत की जगह वह जगह होती है जहां से यात्रा शुरू होती है. यह पिकअप के स्थान को चिह्नित करता है.

डेस्टिनेशन की जगह

गंतव्य स्थान वह स्थान होता है जहां यात्रा खत्म होती है. यह ड्रॉप वाली जगह का निशान लगाता है.

वेपॉइंट लोकेशन

वेपॉइंट लोकेशन, ट्रैक की गई यात्रा के रास्ते में आने वाली कोई जगह है. उदाहरण के लिए, बस के रास्ते का हर स्टॉप एक वेपॉइंट लोकेशन होता है.

वाहन की जगह की जानकारी

वाहन की जगह की जानकारी, वाहन की ट्रैक की गई जगह है. इसमें विकल्प के तौर पर, वाहन के लिए कोई रूट शामिल हो सकता है.

पुष्टि करने वाले टोकन फ़ेच करने वाला टूल

Fleet Engine में स्टोर की गई जगह की जानकारी के डेटा के ऐक्सेस को कंट्रोल करने के लिए, आपको अपने सर्वर पर Fleet Engine के लिए JSON Web Token (JWT) मिंट करने की सेवा लागू करनी होगी. इसके बाद, जगह की जानकारी के डेटा के ऐक्सेस की पुष्टि करने के लिए JavaScript SDK का इस्तेमाल करके, अपने वेब ऐप्लिकेशन के हिस्से के तौर पर पुष्टि करने वाले टोकन फ़ेचर को लागू करें.

स्टाइल के विकल्प

मार्कर और पॉलीलाइन स्टाइल, मैप पर ट्रैक की गई जगह की जानकारी के लुक और स्टाइल को तय करते हैं. डिफ़ॉल्ट स्टाइलिंग को बदलकर, वेब ऐप्लिकेशन की स्टाइल से मेल खाने वाला स्टाइल बदला जा सकता है. इसके लिए, कस्टम स्टाइलिंग वाले विकल्पों का इस्तेमाल करें.

ट्रैक की गई जगहों की जानकारी दिखने को कंट्रोल करना

इस सेक्शन में, मैप पर ट्रैक की गई जगह की जानकारी से जुड़े ऑब्जेक्ट के दिखने के नियमों के बारे में बताया गया है. यह नियम, फ़्लीट इंजन की पहले से तय की गई लोकेशन उपलब्ध कराने वालों के लिए है. पसंद के मुताबिक या खोजी गई जगह की जानकारी देने वाली कंपनियां, 'किसको दिखे' सेटिंग के नियमों में बदलाव कर सकती हैं.

गाड़ियां

राइड शेयर करने वाला वाहन, उस समय से दिखता है जब इसे यात्रा के लिए असाइन किया जाता है. अगर यात्रा रद्द हो जाती है, तो वाहन का नाम दिखने लगेगा.

अन्य सभी स्थान मार्कर

शुरुआत की जगह, मंज़िल, और वेपॉइंट के लिए सभी दूसरी जगहों के मार्कर हमेशा मैप पर दिखाए जाते हैं. उदाहरण के लिए, मैप पर राइडशेयर करने की जगह या शिपिंग की डिलीवरी की जगह की जानकारी हमेशा मैप पर दिखाई जाती है. भले ही, यात्रा या डिलीवरी की जगह कुछ भी हो.

JavaScript SDK का इस्तेमाल शुरू करना

JavaScript SDK टूल का इस्तेमाल करने से पहले, पक्का करें कि आपको Fleet Engine के बारे में पता है और एपीआई पासकोड हासिल करना आता है.

राइडशेयरिंग से जुड़ी यात्रा को ट्रैक करने के लिए, पहले यात्रा के आईडी पर दावा करें.

यात्रा के आईडी के लिए दावा करें

यात्रा की जगह की जानकारी देने वाली कंपनी का इस्तेमाल करके, यात्रा ट्रैक करने के लिए, यात्रा के आईडी वाले दावे के साथ JSON वेब टोकन (JWT) बनाएं.

JWT पेलोड बनाने के लिए, अनुमति देने वाले सेक्शन में tripid कुंजी के साथ अतिरिक्त दावा जोड़ें और इसकी वैल्यू को ट्रिप आईडी पर सेट करें.

नीचे दिए गए उदाहरण में, यात्रा आईडी के हिसाब से ट्रैकिंग के लिए टोकन बनाने का तरीका बताया गया है:

{
  "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. फ़ेच करने के बाद, टोकन की समयसीमा इतने समय में खत्म हो जाती है.

इनमें से कोई भी बात सही होने पर, JavaScript उपभोक्ता SDK टूल, पुष्टि करने वाले टोकन के ज़रिए टोकन का अनुरोध करता है:

  • इसका कोई मान्य टोकन नहीं होता. जैसे, नए पेज लोड होने पर फ़ेचर को कॉल न किया गया हो या फ़ेच करने वाला, टोकन के साथ वापस न आया हो.
  • पिछली बार फ़ेच किए गए टोकन की समयसीमा खत्म हो चुकी है.
  • पहले फ़ेच किए गए टोकन की समयसीमा खत्म होने के एक मिनट के अंदर है.

अगर ऐसा नहीं है, तो SDK टूल, पहले जारी किए गए मान्य टोकन का इस्तेमाल करता है. साथ ही, फ़ेचर को कॉल नहीं करता.

नीचे दिए गए उदाहरण में, पुष्टि करने वाला टोकन फ़ेचर बनाने का तरीका बताया गया है:

JavaScript

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
  };
}

TypeScript

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 के तौर पर दिया गया है.
  • पुष्टि करने वाले टोकन को फ़ेच करने वाले टूल को, लाइब्रेरी में समय-सीमा खत्म होने का समय (सेकंड में, फ़ेच करने के समय से) पास करना होगा, जैसा कि उदाहरण में दिखाया गया है.
  • SERVER_TOKEN_URL, आपकी कंपनी लागू करने के तरीके पर निर्भर करता है. ये उदाहरण देने वाली कंपनी के यूआरएल हैं:
    • https://SERVER_URL/token/driver/VEHICLEID
    • https://SERVER_URL/token/consumer/TRIPID

एचटीएमएल से मैप लोड करें

नीचे दिया गया उदाहरण किसी खास यूआरएल से JavaScript SDK लोड करने का तरीका बताता है. एपीआई लोड होने के बाद, callback पैरामीटर initMap फ़ंक्शन को एक्ज़ीक्यूट करता है. defer एट्रिब्यूट से, एपीआई लोड होने के दौरान ब्राउज़र आपके पेज के बाकी हिस्सों को रेंडर करना जारी रखता है.

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

यात्रा को फ़ॉलो करना

इस सेक्शन में बताया गया है कि राइडशेयरिंग या डिलीवरी ट्रिप को फ़ॉलो करने के लिए, JavaScript SDK टूल का इस्तेमाल किस तरह किया जा सकता है. अपना कोड चलाने से पहले, स्क्रिप्ट टैग में दिए गए कॉलबैक फ़ंक्शन से लाइब्रेरी को लोड करना न भूलें.

यात्रा की जगह की जानकारी देने वाली कंपनी को इंस्टैंशिएट करें

JavaScript SDK, Fleet Engine Rideshare API के लिए, जगह की जानकारी देने वाली सेवा को पहले से तय करता है. इसे इंस्टैंशिएट करने के लिए, अपने प्रोजेक्ट आईडी और टोकन फ़ैक्ट्री के रेफ़रंस का इस्तेमाल करें.

JavaScript

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',
});

TypeScript

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 लोड करने के बाद, मैप व्यू शुरू करें और इसे एचटीएमएल पेज में जोड़ें. आपके पेज में एक <div> एलिमेंट होना चाहिए जिसमें मैप व्यू शामिल हो. नीचे दिए गए उदाहरण में, <div> एलिमेंट को map_canvas नाम दिया गया है.

रेस की स्थितियों से बचने के लिए, मैप शुरू होने के बाद शुरू होने वाले कॉलबैक में, लोकेशन देने वाले का ट्रिप आईडी सेट करें.

JavaScript

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);

TypeScript

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 और पिकअप या ड्रॉप-ऑफ़ से पहले की दूरी शामिल होती है. मेटा जानकारी में होने वाले बदलाव, अपडेट इवेंट को ट्रिगर करते हैं. नीचे दिए गए उदाहरण में, बदलाव के इन इवेंट को सुनने का तरीका बताया गया है.

JavaScript

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

TypeScript

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);
});

गड़बड़ियां ठीक करना

यात्रा की जानकारी का अनुरोध करने पर गड़बड़ी वाले इवेंट ट्रिगर करने का अनुरोध करने पर, एसिंक्रोनस रूप से होने वाली गड़बड़ियां. नीचे दिए गए उदाहरण में, गड़बड़ियों को हैंडल करने के लिए इन इवेंट को सुनने का तरीका बताया गया है.

JavaScript

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

TypeScript

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

ध्यान दें: उम्मीद के मुताबिक न होने वाली गड़बड़ियों को ठीक करने के लिए, लाइब्रेरी कॉल को try...catch ब्लॉक में रैप करना न भूलें.

ट्रैकिंग रोकें

जगह की जानकारी देने वाली कंपनी को यात्रा ट्रैक करने से रोकने के लिए, जगह की जानकारी देने वाली कंपनी का ट्रिप आईडी हटाएं.

JavaScript

locationProvider.tripId = '';

TypeScript

locationProvider.tripId = '';

मैप व्यू से, जगह की जानकारी देने वाली कंपनी को हटाएं

नीचे दिए गए उदाहरण में, मैप व्यू से जगह की जानकारी देने वाली कंपनी को हटाने का तरीका बताया गया है.

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

बुनियादी मैप का लुक और स्टाइल पसंद के मुताबिक बनाना

मैप कॉम्पोनेंट के लुक और स्टाइल को पसंद के मुताबिक बनाने के लिए, क्लाउड-आधारित टूल का इस्तेमाल करके या सीधे कोड में विकल्प सेट करके, अपने मैप को स्टाइल दें.

क्लाउड-आधारित मैप स्टाइलिंग का इस्तेमाल करना

क्लाउड-आधारित मैप स्टाइलिंग, आपको Google Cloud Console से Google Maps का इस्तेमाल करने वाले किसी भी ऐप्लिकेशन के लिए मैप स्टाइल बनाने और उनमें बदलाव करने की सुविधा देती है. इसके लिए, आपको अपने कोड में कोई बदलाव करने की ज़रूरत नहीं होती. मैप के स्टाइल, आपके Cloud प्रोजेक्ट में मैप आईडी के तौर पर सेव किए जाते हैं. अपने JavaScript SDK मैप पर कोई स्टाइल लागू करने के लिए, JourneySharingMapView बनाते समय mapId और किसी अन्य mapOptions की जानकारी दें. JourneySharingMapView इंस्टैंशिएट होने के बाद, mapId फ़ील्ड को बदला या जोड़ा नहीं जा सकता. यहां दिए गए उदाहरण में, पहले से बनाए गए मैप आईडी को मैप आईडी की मदद से चालू करने का तरीका बताया गया है.

JavaScript

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

TypeScript

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 सेट करना.

JavaScript

const mapView = new google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [locationProvider],
  mapOptions: {
    styles: [
      {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
          { "color": "#CCFFFF" }
        ]
      }
    ]
  }
});

TypeScript

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 टूल की मदद से, मैप में जोड़े गए मार्कर के लुक और स्टाइल को पसंद के मुताबिक बनाया जा सकता है. ऐसा करने के लिए मार्कर कस्टमाइज़ेशन के बारे में बताया जाता है, जिसे मैप पर मार्कर जोड़ने और हर मार्कर अपडेट के साथ JavaScript SDK टूल लागू करने से पहले यह लागू होता है.

पसंद के मुताबिक बनाने का सबसे आसान तरीका MarkerOptions ऑब्जेक्ट के बारे में बताना है, जिसे एक ही तरह के सभी मार्कर पर लागू किया जाएगा. ऑब्जेक्ट में बताए गए बदलाव, हर मार्कर के बनने के बाद लागू होते हैं. ये बदलाव सभी डिफ़ॉल्ट विकल्पों को ओवरराइट कर देते हैं.

कस्टमाइज़ेशन फ़ंक्शन तय करना ज़्यादा बेहतर विकल्प है. कस्टमाइज़ेशन फ़ंक्शन से डेटा के आधार पर मार्कर की स्टाइल बनाई जा सकती है. साथ ही, मार्कर में क्लिक मैनेज करने जैसे इंटरैक्शन शामिल किए जा सकते हैं. खास तौर पर, यात्रा और ऑर्डर की प्रोग्रेस, मार्कर से दिखने वाले ऑब्जेक्ट के टाइप के बारे में कस्टमाइज़ेशन फ़ंक्शन को डेटा पास करती है: वाहन, ऑरिजिन, वेपॉइंट या डेस्टिनेशन. इससे मार्कर एलिमेंट की मौजूदा स्थिति के हिसाब से, मार्कर की स्टाइल में बदलाव किया जा सकता है. उदाहरण के लिए, वाहन के यात्रा पूरी होने तक बाकी रास्ते के पॉइंट की संख्या. यहां तक कि फ़्लीट इंजन के बाहर के सोर्स के डेटा से भी जॉइन किया जा सकता है और उस जानकारी के आधार पर मार्कर की स्टाइल बनाई जा सकती है.

JavaScript SDK टूल की मदद से, FleetEngineTripLocationProviderOptions में ये कस्टमाइज़ेशन पैरामीटर उपलब्ध होते हैं:

MarkerOptions का इस्तेमाल करके मार्कर की स्टाइल बदलें

इस उदाहरण में, MarkerOptions ऑब्जेक्ट के साथ वाहन के मार्कर की स्टाइल को कॉन्फ़िगर करने का तरीका बताया गया है. किसी भी मार्कर की स्टाइल को पसंद के मुताबिक बनाने के लिए, इस पैटर्न को फ़ॉलो करें. ऐसा करने के लिए, हम पहले दिए गए किसी भी मार्कर कस्टमाइज़ेशन का इस्तेमाल कर सकते हैं.

JavaScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

पसंद के मुताबिक बनाने वाले फ़ंक्शन का इस्तेमाल करके मार्कर की स्टाइल बदलें

इस उदाहरण में, वाहन के मार्कर की स्टाइल को कॉन्फ़िगर करने का तरीका बताया गया है. किसी भी मार्कर की स्टाइल को पसंद के मुताबिक बनाने के लिए, इस पैटर्न को अपनाएं. ऐसा करने के लिए, पहले से दिए गए किसी भी मार्कर कस्टमाइज़ेशन पैरामीटर का इस्तेमाल करें.

JavaScript

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

TypeScript

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

मार्कर में क्लिक हैंडलिंग जोड़ें

इस उदाहरण में, वाहन के मार्कर में क्लिक हैंडलिंग की सुविधा जोड़ने का तरीका बताया गया है. किसी भी मार्कर में क्लिक हैंडलिंग जोड़ने के लिए, इस पैटर्न को अपनाएं. ऐसा करने के लिए, पहले से दिए गए किसी भी मार्कर कस्टमाइज़ेशन पैरामीटर का इस्तेमाल करें.

JavaScript

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

TypeScript

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

पॉलीलाइन कस्टमाइज़ेशन का इस्तेमाल करना

JavaScript SDK टूल की मदद से, मैप पर यात्रा के रास्ते का लुक और स्टाइल पसंद के मुताबिक बनाया जा सकता है. लाइब्रेरी, वाहन के चालू या बचे हुए पाथ में, कोऑर्डिनेट के हर जोड़े के लिए एक google.maps.Polyline ऑब्जेक्ट बनाती है. आपके पास पॉलीलाइन कस्टमाइज़ेशन की जानकारी देकर, Polyline ऑब्जेक्ट को स्टाइल करने का विकल्प है. इसके बाद, लाइब्रेरी इन कस्टमाइज़ेशन को दो स्थितियों में लागू करती है: ऑब्जेक्ट को मैप पर जोड़ने से पहले और जब ऑब्जेक्ट के लिए इस्तेमाल किया गया डेटा बदल जाता है.

मार्कर को पसंद के मुताबिक बनाने की तरह ही, मेल खाने वाले सभी Polyline ऑब्जेक्ट पर लागू करने के लिए, PolylineOptions का एक सेट तय किया जा सकता है. ऐसा तब किया जाता है, जब उन्हें बनाया या अपडेट किया जाता है.

इसी तरह, आपके पास कस्टमाइज़ेशन फ़ंक्शन के बारे में बताने का विकल्प भी होता है. कस्टमाइज़ेशन फ़ंक्शन से, Fleet Engine से भेजे गए डेटा के आधार पर, ऑब्जेक्ट की अलग-अलग स्टाइलिंग की जा सकती है. वाहन की मौजूदा स्थिति के हिसाब से, फ़ंक्शन हर ऑब्जेक्ट की स्टाइल बदल सकता है. उदाहरण के लिए, Polyline ऑब्जेक्ट को ज़्यादा गहरा रंग देना या वाहन की रफ़्तार धीमी होने पर उसे मोटा बनाना. साथ ही, Fleet Engine के बाहर के सोर्स से भी शामिल हो सकते हैं और उस जानकारी के आधार पर Polyline ऑब्जेक्ट को स्टाइल कर सकते हैं.

FleetEngineTripLocationProviderOptions में दिए गए पैरामीटर का इस्तेमाल करके, कस्टमाइज़ेशन के बारे में बताया जा सकता है. आप वाहन की यात्रा में अलग-अलग रास्ते की स्थितियों के लिए पसंद के मुताबिक सेट कर सकते हैं--पहले यात्रा कर चुके हैं, सक्रिय रूप से यात्रा कर रहे हैं या अभी तक यात्रा नहीं की है. पैरामीटर यहां दिए गए हैं:

PolylineOptions का इस्तेमाल करके Polyline ऑब्जेक्ट की स्टाइल बदलें

नीचे दिए गए उदाहरण में, PolylineOptions के साथ Polyline ऑब्जेक्ट के लिए स्टाइल को कॉन्फ़िगर करने का तरीका बताया गया है. किसी भी Polyline ऑब्जेक्ट की स्टाइल को पसंद के मुताबिक बनाने के लिए, इस पैटर्न को अपनाएं. ऐसा करने के लिए, पहले से सूची में दिए गए किसी भी पॉलीलाइन कस्टमाइज़ेशन का इस्तेमाल करें.

JavaScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

TypeScript

activePolylineCustomization = {
  strokeWidth: 5,
  strokeColor: 'black',
};

पसंद के मुताबिक बनाने वाले फ़ंक्शन का इस्तेमाल करके, Polyline ऑब्जेक्ट की स्टाइल बदलें

इस उदाहरण में, चालू Polyline ऑब्जेक्ट की स्टाइलिंग को कॉन्फ़िगर करने का तरीका बताया गया है. किसी भी Polyline ऑब्जेक्ट की स्टाइल को पसंद के मुताबिक बनाने के लिए, इस पैटर्न को अपनाएं. ऐसा करने के लिए, पहले से दिए गए पॉलीलाइन कस्टमाइज़ेशन पैरामीटर में से किसी का भी इस्तेमाल करें.

JavaScript

// 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'});
      });
    }
  };

TypeScript

// 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 प्रॉपर्टी सेट करें:

JavaScript

remainingPolylineCustomization = {visible: false};

TypeScript

remainingPolylineCustomization = {visible: false};

ट्रैफ़िक की जानकारी देने वाले Polyline ऑब्जेक्ट रेंडर करें

फ़्लीट इंजन, फ़ॉलो किए जा रहे वाहन के लिए चालू और बचे हुए रास्तों के लिए, ट्रैफ़िक की स्पीड का डेटा दिखाता है. इस जानकारी का इस्तेमाल करके, Polyline ऑब्जेक्ट को उनकी ट्रैफ़िक स्पीड के हिसाब से स्टाइल किया जा सकता है:

JavaScript

// 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'});
      }
    }
  };

TypeScript

// 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 बनाने और उसे वाहन के मार्कर से जोड़ने का तरीका बताया गया है:

JavaScript

// 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();

TypeScript

// 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();

अपने-आप फ़िट होने की सुविधा बंद करें

अपने-आप फ़िट होने वाली सुविधा बंद करके, मैप को व्यूपोर्ट को वाहन और अनुमानित रास्ते से अपने-आप फ़िट होने से रोका जा सकता है. इस उदाहरण में, यात्रा की जानकारी को कॉन्फ़िगर करने और मैप व्यू का ऑर्डर देने के दौरान, अपने-आप फ़िट होने की सुविधा को बंद करने का तरीका बताया गया है.

JavaScript

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

TypeScript

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

कोई मौजूदा मैप बदलें

आप उस मौजूदा मैप को बदलने के लिए JavaScript 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>

JavaScript SDK टूल जोड़ने के लिए:

  1. पुष्टि करने वाले टोकन की फ़ैक्ट्री के लिए कोड जोड़ें.
  2. initMap() फ़ंक्शन में जगह की जानकारी देने वाली सेवा शुरू करें.
  3. initMap() फ़ंक्शन में मैप व्यू शुरू करें. व्यू में मैप शामिल होता है.
  4. मैप व्यू शुरू करने के लिए, कस्टमाइज़ेशन को कॉलबैक फ़ंक्शन में ले जाएं.
  5. एपीआई लोडर में लोकेशन लाइब्रेरी जोड़ें.

यहां दिए गए उदाहरण में, किए जाने वाले बदलावों को दिखाया गया है:

<!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>

अगर आप Uluru के पास तय आईडी से यात्रा करते हैं, तो अब इसे मैप पर रेंडर किया जाएगा.