इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

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

घटक

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

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

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

फ़्लीट ट्रैकिंग मैप व्यू
उदाहरण

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

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

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

वाहन की जगह की जानकारी देने वाला संगठन, एक वाहन की जगह की जानकारी दिखाता है. इसमें वाहन की जगह और को असाइन की गई मौजूदा यात्रा की जानकारी है वाहन.

फ़्लीट लोकेशन प्रोवाइडर

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

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

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

वाहन

कोई वाहन, फ़्लीट इंजन में बनते ही दिख जाता है और वह दिखने लगता है जबvehicle_state की वैल्यू Online हो. इसका मतलब है कि वाहन सभी विज्ञापनों को दिख सकता है जब वाहन के लिए कोई मौजूदा यात्रा असाइन न की गई हो.

वेपॉइंट लोकेशन मार्कर

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

शुरुआत की जगह - वाहन की यात्रा शुरू करने की जगह बताती है
इंटरमीडिएट - वाहन यात्रा के स्टॉपओवर की जानकारी देता है
गंतव्य - वाहन यात्रा के लिए अंतिम स्थान दिखाता है

वाहन के लिए प्लान बनाए गए वेपॉइंट, मैप पर ऑरिजिन, इंटरमीडिएट, और डेस्टिनेशन मार्कर.

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

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

यात्रा का आईडी और वाहन के आईडी पर दावा करें

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

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

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

{
  "alg": "RS256",
  "typ": "JWT",
  "kid": "private_key_id_of_consumer_service_account"
}
.
{
  "iss": "superuser@yourgcpproject.iam.gserviceaccount.com",
  "sub": "superuser@yourgcpproject.iam.gserviceaccount.com",
  "aud": "https://fleetengine.googleapis.com/",
  "iat": 1511900000,
  "exp": 1511903600,
  "scope": "https://www.googleapis.com/auth/xapi",
  "authorization": {
    "tripid": "*",
    "vehicleid": "*",
  }
}

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

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

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

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

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

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

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

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

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 आपके बैकएंड लागू करने के तरीके पर निर्भर करता है. ये उदाहरण URL:
- https://SERVER_URL/token/driver/VEHICLE_ID
- https://SERVER_URL/token/consumer/TRIP_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&v=beta" defer></script>

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

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

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

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

JavaScript

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

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

TypeScript

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

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

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

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

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

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

TypeScript

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

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

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

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

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

JavaScript

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

TypeScript

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

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

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

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.vehicleId = '';

TypeScript

locationProvider.vehicleId = '';

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

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

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

वाहन का फ़्लीट देखें

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

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

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

JavaScript

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

          // Optionally, specify location bounds to
          // limit which vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which vehicles are retrieved.
          vehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

TypeScript

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

          // Optionally, specify location bounds to
          // limit which vehicles are
          // retrieved and immediately start tracking.
          locationRestriction: {
            north: 37.3,
            east: -121.8,
            south: 37.1,
            west: -122,
          },
          // Optionally, specify a filter to limit
          // which vehicles are retrieved.
          vehicleFilter:
            'attributes.foo = "bar" AND attributes.baz = "qux"',
        });

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

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

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

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

JavaScript

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

TypeScript

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

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

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

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

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

JavaScript

locationProvider.locationRestriction = null;

TypeScript

locationProvider.locationRestriction = null;

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

JavaScript

mapView.removeLocationProvider(locationProvider);

TypeScript

mapView.removeLocationProvider(locationProvider);

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

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

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

क्लाउड-आधारित मैप स्टाइलिंग आपको 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) मार्कर पर क्लिक करें.

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

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

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

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

JavaScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

TypeScript

vehicleMarkerCustomization = {
  cursor: 'grab'
};

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

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

JavaScript

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

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.waypoints.length;
    params.marker.setLabel(`${remainingWaypoints}`);
  };

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

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

JavaScript

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

TypeScript

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

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

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

JavaScript

vehicleMarkerCustomization =
  (params) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
      if (remainingWaypoints > 10) {
        params.marker.setVisible(false);
      }
  };

TypeScript

vehicleMarkerCustomization =
  (params: VehicleMarkerCustomizationFunctionParams) => {
    var remainingWaypoints = params.vehicle.remainingWaypoints.length;
    if (remainingWaypoints > 10) {
      params.marker.setVisible(false);
    }
  };

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

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

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

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

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

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

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

इस उदाहरण में, Polyline ऑब्जेक्ट के लिए स्टाइल को कॉन्फ़िगर करने का तरीका बताया गया है के साथ PolylineOptions. किसी भी 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.vehicle.waypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

TypeScript

// Color the Polyline objects in green if the vehicle is nearby.
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    const distance = params.vehicle.waypoints[0].distanceMeters;
    if (distance < 1000) {

      // params.polylines contains an ordered list of Polyline objects for
      // the path.
      for (const polylineObject of params.polylines) {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

कंट्रोल करें कि `Polyline` ऑब्जेक्ट किसको दिखें

डिफ़ॉल्ट रूप से, सभी Polyline ऑब्जेक्ट दिखते हैं. Polyline ऑब्जेक्ट बनाने के लिए दिखाई नहीं दे रहा है, तो उसका visible प्रॉपर्टी:

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 =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

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 =
  FleetEngineVehicleLocationProvider.
      TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION;

// Or alter the objects further after the customization function has been
// run -- in this example, change the blue for normal to green:
activePolylineCustomization =
  (params: VehiclePolylineCustomizationFunctionParams) => {
    FleetEngineVehicleLocationProvider.
        TRAFFIC_AWARE_ACTIVE_POLYLINE_CUSTOMIZATION_FUNCTION(params);
    for (const polylineObject of params.polylines) {
      if (polylineObject.get('strokeColor') === '#05f') {
        polylineObject.setOptions({strokeColor: 'green'});
      }
    }
  };

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

Google आपके यूआरएल पैरामीटर को कैसे इस्तेमाल करेगा, यह तय करने के लिए InfoWindow का इस्तेमाल करें.

नीचे दिए गए उदाहरण में, InfoWindow बनाने और उसे किसी व्हीकल मार्कर.

JavaScript

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

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

    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

TypeScript

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

// (Assumes a vehicle location provider.)
locationProvider.addListener('update', (e: google.maps.journeySharing.FleetEngineVehicleLocationProviderUpdateEvent) => {
  if (e.vehicle) {
    const distance =
          e.vehicle.remainingDistanceMeters;
    infoWindow.setContent(
        `Your vehicle is ${distance}m away from the next drop-off.`);
    // 2. Attach the info window to a vehicle marker.
    // This property can return multiple markers.
    const marker = mapView.vehicleMarkers[0];
    infoWindow.open(mapView.map, marker);
  }
});

// 3. Close the info window.
infoWindow.close();

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

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

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 Oracle Park Stadium
        var oraclePark = { lat: 37.780087547237365, lng: -122.38948437884427 };,
        // The map, initially centered at Mountain View, CA.
        var map = new google.maps.Map(document.getElementById("map"));
        map.setOptions({ center: { lat: 37.424069, lng: -122.0916944 }, zoom: 14 });

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

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

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

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

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Set the size of the div element that contains the map */
      #map {
        height: 400px; /* The height is 400 pixels */
        width: 100%; /* The width is the width of the web page */
      }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
      let locationProvider;

      // (1) Authentication Token Fetcher
      function authTokenFetcher(options) {
        // options is a record containing two keys called
        // serviceType and context. The developer should
        // generate the correct SERVER_TOKEN_URL and request
        // based on the values of these fields.
        const response = await fetch(SERVER_TOKEN_URL);
            if (!response.ok) {
              throw new Error(response.statusText);
            }
            const data = await response.json();
            return {
              token: data.Token,
              expiresInSeconds: data.ExpiresInSeconds
            };
      }

      // Initialize and add the map
      function initMap() {
        // (2) Initialize location provider. Use FleetEngineVehicleLocationProvider
        // as appropriate.
        locationProvider = new google.maps.journeySharing.FleetEngineVehicleLocationProvider({
          YOUR_PROVIDER_ID,
          authTokenFetcher,
        });

        // (3) Initialize map view (which contains the map).
        const mapView = new google.maps.journeySharing.JourneySharingMapView({
          element: document.getElementById('map'),
          locationProviders: [locationProvider],
          // any styling options
        });

      mapView.addListener('ready', () => {
        locationProvider.vehicleId = VEHICLE_ID;

          // (4) Add customizations like before.

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

अगर आप Oracle पार्क के पास तय आईडी वाला वाहन चलाते हैं, तो यह मैप.

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

घटक

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

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

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

फ़्लीट लोकेशन प्रोवाइडर

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

वाहन

वेपॉइंट लोकेशन मार्कर

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

यात्रा का आईडी और वाहन के आईडी पर दावा करें

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

JavaScript

TypeScript

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

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

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

JavaScript

TypeScript

वाहन का फ़्लीट देखें

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

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

JavaScript

TypeScript

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

JavaScript

TypeScript

मार्कर की पसंद के मुताबिक बनाने की सुविधा का इस्तेमाल करना

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

JavaScript

TypeScript

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

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

JavaScript

TypeScript

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

JavaScript

TypeScript

कंट्रोल करें कि Polyline ऑब्जेक्ट किसको दिखें

JavaScript

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

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

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

कंट्रोल करें कि `Polyline` ऑब्जेक्ट किसको दिखें

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

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