मैप को शैली में ढालें

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

  • क्लाउड पर मैप की स्टाइलिंग की सुविधा का इस्तेमाल करना
  • सीधे अपने कोड में मैप स्टाइल के विकल्प सेट करना

क्लाउड पर मैप की स्टाइलिंग की सुविधा का इस्तेमाल करके, मैप को स्टाइल करना

JavaScript उपभोक्ता के लिए यात्रा की जानकारी शेयर करने वाले मैप पर कोई मैप स्टाइल लागू करने के लिए, JourneySharingMapView बनाते समय mapId और कोई अन्य mapOptions तय करें.

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

JavaScript

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

TypeScript

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

सीधे अपने कोड में मैप को स्टाइल करें

JourneySharingMapView बनाते समय, मैप के विकल्प सेट करके भी मैप की स्टाइल को पसंद के मुताबिक बनाया जा सकता है. यहां दिए गए उदाहरणों में, मैप के विकल्पों का इस्तेमाल करके मैप को स्टाइल करने का तरीका बताया गया है. मैप के लिए कौनसे विकल्प सेट किए जा सकते हैं, इस बारे में ज़्यादा जानने के लिए, Google Maps JavaScript API के रेफ़रंस में 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" }
        ]
      }
    ]
  }
});

एसडीके के लिए, टास्क के डेटा को दिखने की सेटिंग कंट्रोल करना

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

टास्क के डेटा के दिखने की डिफ़ॉल्ट सेटिंग

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

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

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

वाहन से जुड़े अधूरे टास्क दिखने की सेटिंग को पसंद के मुताबिक बनाना

TaskTrackingInfo इंटरफ़ेस, टास्क से जुड़े डेटा के कई एलिमेंट उपलब्ध कराता है. इन्हें Consumer SDK की मदद से दिखाया जा सकता है.

टास्क के डेटा एलिमेंट को पसंद के मुताबिक बनाने की सुविधा

रास्ते की पॉलीलाइन

पहुंचने में लगने वाला अनुमानित समय

टास्क पूरा होने में लगने वाला अनुमानित समय

टास्क की जगह तक पहुंचने के लिए बची हुई दूरी

बचे हुए स्टॉप की संख्या

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

हर टास्क के लिए, विज़िबिलिटी के विकल्प

Fleet Engine में कोई टास्क बनाते या अपडेट करते समय, TaskTrackingViewConfig को सेट करके, हर टास्क के हिसाब से जानकारी दिखने की सेटिंग को पसंद के मुताबिक बनाया जा सकता है. टास्क एलिमेंट की विज़िबिलिटी तय करने के लिए, यहां दिए गए विज़िबिलिटी विकल्पों का इस्तेमाल करके शर्तें बनाएं:

विज़िबिलिटी के विकल्प

बचे हुए स्टॉप की संख्या

मंज़िल तक पहुंचने में लगने वाला अनुमानित समय

तय की जाने वाली बाकी दूरी

हमेशा दिखेगा

कभी नहीं दिखेगा

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

डेटा एलिमेंट में बदलाव करना किसको दिखे मानदंड
रास्ते की पॉलीलाइन दिखाएं वाहन तीन स्टॉप दूर है.
ईटीए दिखाएं ड्राइविंग की बची हुई दूरी 5,000 मीटर से कम है.
बचे हुए स्टॉप की संख्या कभी न दिखाएं वाहन तीन स्टॉप दूर है.

यहां दिए गए उदाहरण में यह कॉन्फ़िगरेशन दिखाया गया है:

"taskTrackingViewConfig": {
  "routePolylinePointsVisibility": {
    "remainingStopCountThreshold": 3
  },
  "estimatedArrivalTimeVisibility": {
    "remainingDrivingDistanceMetersThreshold": 5000
  },
  "remainingStopCountVisibility": {
    "never": true
  }
}

रूट की पॉलीलाइन और वाहन की जगह की जानकारी दिखने से जुड़े नियम

रास्ते की पॉलीलाइन तब तक नहीं दिख सकतीं, जब तक वाहन की जगह की जानकारी भी न दिखे. ऐसा न होने पर, पॉलीलाइन के आखिर में वाहन की जगह की जानकारी का पता लगाया जा सकता है.

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

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

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

    "taskTrackingViewConfig": {
      "routePolylinePointsVisibility": {
        "remainingStopCountThreshold": 3
      },
      "vehicleLocationVisibility": {
        "remainingStopCountThreshold": 5
      },
    }
    
'किसको दिखे' सेटिंग के अलग-अलग विकल्प प्रॉडक्ट दिखने से जुड़ी ज़रूरी शर्तें दिशा-निर्देश
वाहन की जगह की जानकारी दिख रही है

ऐसा सिर्फ़ तब होता है, जब वाहन की जगह की जानकारी और पॉलीलाइन दिखने के विकल्प, दोनों शर्तें पूरी करते हों. उदाहरण के लिए:

  "taskTrackingViewConfig": {
    "routePolylinePointsVisibility": {
      "remainingStopCountThreshold": 3
    },
    "vehicleLocationVisibility": {
      "remainingDrivingDistanceMetersThreshold": 3000
    },
  }

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

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

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

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

आगे क्या करना है