JavaScript फ़्लीट ट्रैकिंग लाइब्रेरी की मदद से अपने डिवाइसों को ट्रैक करें

JavaScript फ़्लीट ट्रैकिंग लाइब्रेरी की मदद से जगहों को विज़ुअलाइज़ किया जा सकता है करीब-करीब रीयल टाइम में सभी वाहनों को हटा दिया जाता है. लाइब्रेरी, डिलीवरी एपीआई इससे डिलीवरी वाहनों और टास्क को पूरा करने में मदद मिलती है. पसंद करें JavaScript शिपमेंट ट्रैकिंग लाइब्रेरी, इसमें एक JavaScript मैप घटक है, जो ड्रॉप-इन प्रतिस्थापन है कनेक्ट करने के लिए, स्टैंडर्ड google.maps.Map इकाई और डेटा कॉम्पोनेंट के लिए फ़्लीट इंजन के साथ.

घटक

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

फ़्लीट ट्रैकिंग मैप व्यू

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

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

जगह की जानकारी देने वाली कंपनियां, जगह की जानकारी भेजने के लिए Fleet Engine में सेव की गई जानकारी के साथ काम करती हैं सफ़र की जानकारी देने वाले मैप में, ट्रैक किए गए ऑब्जेक्ट की जानकारी.

डिलीवरी के लिए वाहन की जगह की जानकारी देने वाली कंपनी

डिलीवरी करने वाले वाहन की जगह की जानकारी देने वाली कंपनी, एक ही डिलीवरी वाहन का पता लगाती है जगह की जानकारी. इसमें वाहन की जगह की जानकारी और ऐसे टास्क जो डिलीवरी वाहन ने पूरे किए.

डिलीवरी की जगह की जानकारी देने वाली कंपनी

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

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

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

डिलीवरी करने वाले वाहन

डिलीवरी वाहन को, Fleet Engine में बनाते ही वह दिख जाता है, और यह पूरे रास्ते में दिखता है, चाहे इसका टास्क कुछ भी हो.

टास्क के लिए जगह के मार्कर

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

टास्क के नतीजों की जगह, टास्क के नतीजे दिखाने वाले मार्कर के साथ दिखाई जाती है. हॉप वाले नतीजे वाले टास्क, सफल टास्क मार्कर के साथ दिखाए जाते हैं, जबकि बाकी सभी टास्क, पूरे नहीं हो सके टास्क मार्कर के साथ दिखते हैं.

JavaScript फ़्लीट ट्रैकिंग लाइब्रेरी का इस्तेमाल करना शुरू करें

JavaScript फ़्लीट ट्रैकिंग लाइब्रेरी का इस्तेमाल करने से पहले, पक्का करें कि फ़्लीट इंजन के बारे में जानकारी और एपीआई पासकोड हासिल करने से बचें. इसके बाद, टास्क आईडी और डिलीवरी वाले वाहन के आईडी पर दावा करें.

टास्क आईडी और डिलीवरी में लगने वाले वाहन के आईडी पर दावा करें

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

JWT पेलोड बनाने के लिए, अनुमति देने वाले सेक्शन में अतिरिक्त दावा जोड़ें taskid और deliveryvehicleid की मदद से वैल्यू सेट करें * तक ले जाने के लिए, हर कुंजी का इस्तेमाल करें. टोकन फ़्लीट इंजन का इस्तेमाल करके बनाया जाना चाहिए सेवा का सुपर उपयोगकर्ता Cloud IAM की भूमिका. ध्यान दें कि इससे आपको कई सुविधाओं का ऐक्सेस मिलता है फ़्लीट इंजन इकाइयां बनाने, पढ़ने, और उनमें बदलाव करने के लिए. इसे सिर्फ़ शेयर किया जाना चाहिए भरोसेमंद उपयोगकर्ता होते हैं.

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

{
  "alg": "RS256",
  "typ": "JWT",
  "kid": "private_key_id_of_consumer_service_account"
}
.
{
  "iss": "[e-mail]",
  "sub": "[e-mail]",
  "aud": "https://fleetengine.googleapis.com/",
  "iat": 1511900000,
  "exp": 1511903600,
  "scope": "https://www.googleapis.com/auth/xapi",
  "authorization": {
     "taskid": "*",
     "deliveryvehicleid": "*",
   }
}

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

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

फ़ेचर को डेटा स्ट्रक्चर दिखाना चाहिए प्रॉमिस में रैप किया हुआ दो फ़ील्ड:

• token स्ट्रिंग.
• संख्या expiresInSeconds. इस अवधि के बाद टोकन की समयसीमा खत्म हो जाती है फ़ेच करना.

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

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

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

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

JavaScript

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.token,
    expiresInSeconds: data.expiration_timestamp_ms - Date.now(),
  };
}

टोकन को मिंट करने के लिए, सर्वर-साइड एंडपॉइंट लागू करते समय, इन बातों का ध्यान रखें:

• एंडपॉइंट को टोकन के खत्म होने का समय दिखाना चाहिए; उदाहरण में ऊपर, इसे data.ExpiresInSeconds के रूप में दिया गया है.
• प्रमाणीकरण टोकन फ़ेचर को समय-सीमा समाप्ति समय (सेकंड में, लाने के समय से लाइब्रेरी में) जोड़ा जा सकता है, जैसा कि उदाहरण में दिखाया गया है.
• Server_TOKEN_URL, आपके बैकएंड लागू करने के तरीके पर निर्भर करता है. ये सैंपल ऐप्लिकेशन बैकएंड के यूआरएल हैं:
  • https://SERVER_URL/token/delivery_driver/DELIVERY_VEHICLE_ID
  • https://SERVER_URL/token/delivery_consumer/TRACKING_ID
  • https://SERVER_URL/token/fleet_reader

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

यहां दिए गए उदाहरण में, JavaScript के सफ़र को शेयर करने की सुविधा को लोड करने का तरीका बताया गया है लाइब्रेरी से लिंक करें. callback पैरामीटर, initMap को एक्ज़ीक्यूट करता है एपीआई लोड होने के बाद काम करता है. defer विशेषता ब्राउज़र को एपीआई के लोड होने तक, अपने बाकी पेज को रेंडर करते रहें.

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

डिलीवरी वाहन को फ़ॉलो करें

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

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

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

JavaScript

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

          // Optionally, you may specify 
          // deliveryVehicleId to immediately start
          // tracking.
          deliveryVehicleId: 'your-delivery-id',
});

TypeScript

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

          // Optionally, you may specify
          // deliveryVehicleId to immediately start
          // tracking.
          deliveryVehicleId: 'your-delivery-id',
});

मैप व्यू शुरू करें

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

JavaScript

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 delivery vehicle ID in the 
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId 
                        = 'your-delivery-vehicle-id';

// Give the map an initial viewport to allow it to 
// initialize; otherwise the 'ready' event above may 
// not fire. The user also has access to the mapView
// object to customize as they wish.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

TypeScript

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

// If you did not specify a delivery vehicle ID in the 
// location provider constructor, you may do so here.
// Location tracking will start as soon as this is set.
locationProvider.deliveryVehicleId 
                        = 'your-delivery-vehicle-id';

// Give the map an initial viewport to allow it to 
// initialize; otherwise the 'ready' event above may 
// not fire. The user also has access to the mapView 
// object to customize as they wish.
mapView.map.setCenter('Times Square, New York, NY');
mapView.map.setZoom(14);

बदलाव से जुड़े इवेंट सुनना

deliveryVehicle ऑब्जेक्ट से, किसी टास्क की मेटा जानकारी हासिल की जा सकती है अपने डिवाइस पर इंस्टॉल करें. मेटा जानकारी में ETA और वाहन के अगले पिकअप या उतरने से पहले की बची हुई दूरी. बदलाव टैग करने से update इवेंट ट्रिगर होता है. यह उदाहरण दिखाता है कि इन बदलने वाले इवेंट को कैसे सुनें.

JavaScript

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

TypeScript

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

गड़बड़ियां सुनें

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

JavaScript

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

TypeScript

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

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

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

JavaScript

locationProvider.deliveryVehicleId = '';

TypeScript

locationProvider.deliveryVehicleId = '';

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

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

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

डिलीवरी फ़्लीट देखना

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

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

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

JavaScript

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

          // Optionally, specify location bounds to
          // limit which delivery 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 delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

TypeScript

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

          // Optionally, specify location bounds to
          // limit which delivery 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 delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

deliveryVehicleFilter ऐसी क्वेरी के बारे में बताता है जिसका इस्तेमाल, दिखाए जाने वाले वाहनों को फ़िल्टर करने के लिए किया जाता है मैप. यह फ़िल्टर सीधे Fleet Engine को पास किया जाता है. यहां जाएं: ListDeliveryVehiclesRequest.filter इस्तेमाल कर सकते हैं.

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

जगह की जानकारी देने वाले का टूल बन जाने के बाद, मैप व्यू शुरू करना.

मैप व्यूपोर्ट का इस्तेमाल करके जगह की पाबंदी सेट करें

मौजूदा इलाके के हिसाब से, locationRestriction के बाउंड को कॉन्फ़िगर किया जा सकता है मैप दृश्य में दृश्यमान होता है.

JavaScript

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

TypeScript

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

बदलाव से जुड़े इवेंट सुनना

फ़्लीट के बारे में मेटा जानकारी deliveryVehicles से वापस पाई जा सकती है ऑब्जेक्ट को ढूंढने की सुविधा देता है. मेटा जानकारी में वाहन शामिल है नेविगेशन की स्थिति, बची हुई दूरी, और कस्टम एट्रिब्यूट जैसी प्रॉपर्टी; देखें रेफ़रंस दस्तावेज़ देखें. मेटा जानकारी में बदलाव करने से, update इवेंट ट्रिगर होता है. कॉन्टेंट बनाने नीचे दिए गए उदाहरण में, इन बदलाव इवेंट को सुनने का तरीका बताया गया है.

JavaScript

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

TypeScript

locationProvider.addListener('update',
    (e: google.maps.journeySharing.FleetEngineDeliveryFleetLocationProviderUpdateEvent) => {
  // e.deliveryVehicles contains data that may be
  // useful to the rest of the UI.
  if (e.deliveryVehicles) {
    for (vehicle of e.deliveryVehicles) {
      console.log(vehicle.remainingDistanceMeters);
    }
  }
});

गड़बड़ियां सुनें

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

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

जगह की जानकारी देने वाली कंपनी को डिलीवरी फ़्लीट ट्रैक करने से रोकने के लिए, सीमाएं सेट करें अमान्य हो जाएगा.

JavaScript

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

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

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

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

डिलीवरी फ़्लीट देखते समय, डिलीवरी वाहन को ट्रैक करें

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

JavaScript

deliveryFleetLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery 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 delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

deliveryVehicleLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher
        });

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [
    deliveryFleetLocationProvider,
    deliveryVehicleLocationProvider,
  ],
  // Any other options
});

TypeScript

deliveryFleetLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryFleetLocationProvider({
          projectId,
          authTokenFetcher,

          // Optionally, specify location bounds to
          // limit which delivery 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 delivery vehicles are retrieved.
          deliveryVehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

deliveryVehicleLocationProvider =
    new google.maps.journeySharing
        .FleetEngineDeliveryVehicleLocationProvider({
          projectId,
          authTokenFetcher
        });

const mapView = new
    google.maps.journeySharing.JourneySharingMapView({
  element: document.getElementById('map_canvas'),
  locationProviders: [
    deliveryFleetLocationProvider,
    deliveryVehicleLocationProvider,
  ],
  // Any other options
});

डिलीवरी की जगह की जानकारी देने वाली कंपनी, डिलीवरी वाहन दिखाने के लिए इस पेज का इस्तेमाल कर सकती है: मैप. डिलीवरी वाहन की जगह की जानकारी देने के लिए, मार्कर को पसंद के मुताबिक बनाने की सुविधा का इस्तेमाल करें जब डिलीवरी वाहन के मार्कर पर क्लिक हो जाएगा, तब डिलीवरी वाहन को ट्रैक करने की सेवा देने वाली कंपनी:

JavaScript

// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // params.vehicle.name follows the format
        // "providers/{provider}/deliveryVehicles/{vehicleId}".
        // Only the vehicleId portion is used for the delivery vehicle
        // location provider.
        deliveryVehicleLocationProvider.deliveryVehicleId =
            params.vehicle.name.split('/').pop();
      });
    }
  };

TypeScript

// Specify the customization function either separately, or as a field in
// the options for the delivery fleet location provider constructor.
deliveryFleetLocationProvider.deliveryVehicleMarkerCustomization =
  (params: google.maps.journeySharing.DeliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.addListener('click', () => {
        // params.vehicle.name follows the format
        // "providers/{provider}/deliveryVehicles/{vehicleId}".
        // Only the vehicleId portion is used for the delivery vehicle
        // location provider.
        deliveryVehicleLocationProvider.deliveryVehicleId =
            params.vehicle.name.split('/').pop();
      });
    }
  };

रेंडरिंग रोकने के लिए, मार्कर को डिलीवरी वाले वाहन की जगह की जानकारी देने वाली कंपनी से छिपाएं एक ही वाहन के लिए दो मार्कर:

JavaScript

// Specify the customization function either separately, or as a field in 
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
  (params) => {
    if (params.isNew) {
      params.marker.setVisible(false);
    }
  };

TypeScript

// Specify the customization function either separately, or as a field in
// the options for the delivery vehicle location provider constructor.
deliveryVehicleLocationProvider.deliveryVehicleMarkerCustomization =
  (params: deliveryVehicleMarkerCustomizationFunctionParams) => {
    if (params.isNew) {
      params.marker.setVisible(false);
    }
  };

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

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

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

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

JavaScript

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

TypeScript

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

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

मैप शैली को पसंद के मुताबिक बनाने का एक और तरीका है, सेट करना mapOptions, जब JourneySharingMapView बनाएं.

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

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

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

इसके अलावा, मार्कर की विज़िबिलिटी को फ़िल्टर करने के लिए, कस्टमाइज़ेशन फ़ंक्शन का इस्तेमाल किया जा सकता है. ऐसा करने के लिए, कॉल करें setVisible(false) मार्कर पर क्लिक करें.

हालांकि, परफ़ॉर्मेंस की वजह से, हमारा सुझाव है कि आप नेटिव विज्ञापनों का इस्तेमाल करें फ़िल्टर करना, जैसे कि FleetEngineDeliveryFleetLocationProvider.deliveryVehicleFilter. हालांकि, जब आपको फ़िल्टर करने की अतिरिक्त सुविधा की ज़रूरत होती है, तो और मनमुताबिक बदलाव करने की सुविधा का इस्तेमाल करके फ़िल्टर कर सकते हैं.

फ़्लीट ट्रैकिंग लाइब्रेरी से, ये कस्टमाइज़ेशन पैरामीटर मिलते हैं:

• FleetEngineDeliveryVehicleLocationProviderOptions
  • deliveryVehicleMarkerCustomization
  • plannedStopMarkerCustomization
  • taskMarkerCustomization
  • taskOutcomeMarkerCustomization
• FleetEngineDeliveryFleetLocationProviderOptions
  • deliveryVehicleMarkerCustomization

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

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

JavaScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

deliveryVehicleMarkerCustomization = {
  cursor: 'grab'
};

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

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

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    params.marker.setLabel(`${stopsLeft}`);
  };

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

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

JavaScript

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

TypeScript

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

दिखने वाले मार्कर को फ़िल्टर करें

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

JavaScript

deliveryVehicleMarkerCustomization =
  (params) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

TypeScript

deliveryVehicleMarkerCustomization =
  (params: DeliveryVehicleMarkerCustomizationFunctionParams) => {
    var stopsLeft = params.vehicle.remainingVehicleJourneySegments.length;
    if (stopsLeft > 10) {
      params.marker.setVisible(false);
    }
  };

डिलीवरी वाहन फ़ॉलो करते समय पॉलीलाइन कस्टमाइज़ेशन का इस्तेमाल करें

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

मार्कर कस्टमाइज़ेशन की तरह, आप एक सेट तय कर सकते हैं PolylineOptions मिलान किए गए सभी Polyline ऑब्जेक्ट पर लागू होती है, जब वे बनाया या अपडेट किया गया.

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

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

• takenPolylineCustomization पहले से यात्रा किए जा चुके रास्ते के लिए;
• activePolylineCustomization सक्रिय रूप से यात्रा के पाथ के लिए;
• remainingPolylineCustomization जिस रास्ते पर अब तक यात्रा नहीं हुई है उसके लिए.

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

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

JavaScript

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

TypeScript

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

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

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

JavaScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    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: DeliveryVehiclePolylineCustomizationFunctionParams) => {
    const distance = params.deliveryVehicle.remainingDistanceMeters;
    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};

वाहन या जगह के मार्कर के लिए InfoWindow दिखाएं

InfoWindow का इस्तेमाल किया जा सकता है का इस्तेमाल करें.

नीचे दिए गए उदाहरण में, InfoWindow बनाने और उसे अटैच करने का तरीका बताया गया है मार्कर की टोन में लिखें.

JavaScript

// 1. Create an info window.
const infoWindow = new google.maps.InfoWindow(
    {disableAutoPan: true});

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', e => {
  if (e.deliveryVehicle) {
    const distance = 
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

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

// (Assumes a delivery vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProviderUpdateEvent) => {
  if (e.deliveryVehicle) {
    const distance = 
           e.deliveryVehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next task.`);

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

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

आप कोई ऐसा मौजूदा मैप बदल सकते हैं जिसमें मार्कर या अन्य कस्टमाइज़ेशन शामिल हों वह भी कस्टमाइज़ किया जा सकता है.

उदाहरण के लिए, मान लें कि आपके पास स्टैंडर्ड google.maps.Map वाला वेब पेज है वह इकाई जिस पर मार्कर दिखाया जाता है:

<!DOCTYPE html>
<html>
  <head>
    <style>
       /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
// Initialize and add the map
function initMap() {
  // The location of Uluru
  var uluru = {lat: -25.344, lng: 131.036};
  // The map, initially centered at Mountain View, CA.
  var map = new google.maps.Map(document.getElementById('map'));
  map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});

  // The marker, now positioned at Uluru
  var marker = new google.maps.Marker({position: uluru, map: map});
}
    </script>
    <!-- Load the API from the specified URL.
       * The async attribute allows the browser to render the page while the API loads.
       * The key parameter will contain your own API key (which is not needed for this tutorial).
       * The callback parameter executes the initMap() function.
    -->
    <script defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

JavaScript जर्नी शेयरिंग लाइब्रेरी, जिसमें फ़्लीट ट्रैकिंग शामिल है, जोड़ने के लिए:

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
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 FleetEngineDeliveryVehicleLocationProvider
  // as appropriate.
  locationProvider = new google.maps.journeySharing.FleetEngineDeliveryVehicleLocationProvider({
    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.deliveryVehicleId = DELIVERY_VEHICLE_ID;

    // (4) Add customizations like before.

    // The location of Uluru
    var uluru = {lat: -25.344, lng: 131.036};
    // The map, initially centered at Mountain View, CA.
    var map = mapView.map;
    map.setOptions({center: {lat: 37.424069, lng: -122.0916944}, zoom: 14});
    // The marker, now positioned at Uluru
    var marker = new google.maps.Marker({position: uluru, map: map});
  };
}
    </script>
    <!-- Load the API from the specified URL
      * The async attribute allows the browser to render the page while the API loads
      * The key parameter will contain your own API key (which is not needed for this tutorial)
      * The callback parameter executes the initMap() function
      *
      * (5) Add the journey sharing library to the API loader, which includes Fleet Tracking functionality.
    -->
    <script defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=journeySharing">
    </script>
  </body>
</html>

अगर डिलीवरी वाहन चलाने के लिए, Uluru के पास बताया गया है, तो अब इसे मैप पर रेंडर किया जाएगा.