दिशा बताने वाली सेवा

संग्रह की मदद से व्यवस्थित रहें अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.

खास जानकारी

DirectionsService ऑब्जेक्ट का इस्तेमाल करके, निर्देशों का हिसाब लगाया जा सकता है. इसके लिए, कई तरह के परिवहन का इस्तेमाल किया जाता है. यह ऑब्जेक्ट, Google Maps API डायरेक्शन सर्विस के साथ काम करता है. इससे निर्देश पाने के लिए अनुरोध किया जाता है और बेहतर रास्ता दिखाया जाता है. यात्रा का समय, ऑप्टिमाइज़ किया गया मुख्य वजह होती है. हालांकि, कई चीज़ों पर ध्यान दिया जा सकता है. जैसे, दूरी, मोड़ों की संख्या वगैरह. इन निर्देशों के नतीजों को खुद मैनेज करें या इन्हें रेंडर करने के लिए, DirectionsRenderer ऑब्जेक्ट का इस्तेमाल करें.

दिशा-निर्देश के अनुरोध में शुरुआत की जगह या मंज़िल के बारे में बताते समय, आप क्वेरी स्ट्रिंग (जैसे, "मुंबई, आईएल" या "डारविन, एनएसडब्ल्यू, ऑस्ट्रेलिया"), LatLng वैल्यू या जगह ऑब्जेक्ट की जानकारी दे सकते हैं.

निर्देश सेवा, एक से ज़्यादा हिस्सों वाले निर्देश दे सकती है. इसके लिए, वेपॉइंट की सीरीज़ इस्तेमाल करती है. मैप पर, निर्देशों को पॉलीलाइन ड्रॉइंग के तौर पर या <div> एलिमेंट में टेक्स्ट के तौर पर दी गई जानकारी के तौर पर दिखाया जाता है. उदाहरण के लिए, "विलियमबर्ग ब्रिज रैंप पर दाईं ओर घुमाएं".

रिपोर्ट का इस्तेमाल करने के बारे में जानकारी

Maps JavaScript एपीआई में निर्देश देने वाली सेवा इस्तेमाल करने से पहले, पक्का करें कि Google Cloud Console में निर्देश एपीआई उसी प्रोजेक्ट में चालू हो जिसमें आपने JavaScript JavaScript एपीआई सेट अप किया था.

चालू किए गए एपीआई की सूची देखने के लिए:

  1. Google Cloud Console पर जाएं.
  2. प्रोजेक्ट चुनें बटन पर क्लिक करें. इसके बाद, वही प्रोजेक्ट चुनें जिसे आपने Maps JavaScript एपीआई के लिए सेट अप किया था और खोलें पर क्लिक करें.
  3. डैशबोर्ड पर एपीआई की सूची में, निर्देश एपीआई देखें.
  4. अगर आपको सूची में एपीआई दिखता है, तो आप पूरी तरह से तैयार हैं. अगर एपीआई सूची में नहीं है, तो इसे चालू करें:
    1. पेज पर सबसे ऊपर, लाइब्रेरी टैब दिखाने के लिए, एपीआई चालू करें चुनें. इसके अलावा, बाईं ओर दिए गए मेन्यू से, लाइब्रेरी चुनें.
    2. निर्देशों की एपीआई खोजें, फिर उसे नतीजों की सूची से चुनें.
    3. चालू करें को चुनें. यह प्रोसेस खत्म होने के बाद, डैशबोर्ड पर डायरेक्ट्री एपीआई, एपीआई की सूची में दिखता है.

कीमत और नीतियां

कीमत

16 जुलाई, 2018 से, 'आप जहां भी हैं' के हिसाब से कीमत तय करने वाली नई योजना Maps, रास्ते, और जगहों पर लागू हो गई थी. JavaScript निर्देश सेवा के आपके इस्तेमाल के लिए नई कीमत और इस्तेमाल की सीमाओं के बारे में ज़्यादा जानने के लिए, दिशा-निर्देश एपीआई के लिए इस्तेमाल और बिलिंग देखें.

नीतियां

निर्देश पाने की सेवा का इस्तेमाल, निर्देशों के एपीआई के लिए बताई गई नीतियों के मुताबिक होना चाहिए.

रास्ते के लिए निर्देश पाने के अनुरोध

निर्देश सेवा का इस्तेमाल करना एसिंक्रोनस है. ऐसा इसलिए है, क्योंकि Google Maps API को बाहरी सर्वर पर कॉल करना होगा. इसलिए, अनुरोध पूरा होने पर, आपको एक कॉलबैक तरीका पास करना होगा. इस कॉलबैक तरीके को, नतीजों को प्रोसेस करना चाहिए. ध्यान दें कि दिशा-निर्देश सेवा एक अलग से routes[] के क्रम में एक से ज़्यादा संभावित यात्रा कार्यक्रम लौटा सकती है.

Maps JavaScript API में दिशा-निर्देशों का इस्तेमाल करने के लिए, DirectionsService टाइप का एक ऑब्जेक्ट बनाएं और DirectionsService.route() को कॉल करें. इससे वह, दिशा-निर्देश सेवा को अनुरोध भेजता है. साथ ही, ऑब्जेक्ट के लिए, DirectionsRequest ऑब्जेक्ट लिटरल, जिसमें इनपुट की शर्तें शामिल होती हैं, और रिस्पॉन्स मिलने पर कॉलबैक का तरीका अपनाने का विकल्प भी होता है.

DirectionsRequest ऑब्जेक्ट लिटरल में ये फ़ील्ड शामिल हैं:

{
  origin: LatLng | String | google.maps.Place,
  destination: LatLng | String | google.maps.Place,
  travelMode: TravelMode,
  transitOptions: TransitOptions,
  drivingOptions: DrivingOptions,
  unitSystem: UnitSystem,
  waypoints[]: DirectionsWaypoint,
  optimizeWaypoints: Boolean,
  provideRouteAlternatives: Boolean,
  avoidFerries: Boolean,
  avoidHighways: Boolean,
  avoidTolls: Boolean,
  region: String
}

इन फ़ील्ड के बारे में नीचे बताया गया है:

  • origin (ज़रूरी है) उस शुरुआती जगह के बारे में बताता है जहां से निर्देशों का हिसाब लगाना है. यह वैल्यू, String (जैसे, "शिकागो, आईएल") के तौर पर, LatLng वैल्यू या जगह ऑब्जेक्ट के तौर पर बताई जा सकती है. अगर किसी जगह ऑब्जेक्ट का इस्तेमाल किया जाता है, तो प्लेस आईडी, क्वेरी स्ट्रिंग या LatLng जगह की जानकारी दी जा सकती है. Maps JavaScript एपीआई में, जगह की जानकारी देने वाली खोज, प्लेस खोज, और जगह की जानकारी अपने-आप पूरी होने की सुविधा से, जगह के आईडी पाए जा सकते हैं. प्लेस ऑटोकंप्लीट की मदद से जगह के आईडी का इस्तेमाल करने वाले उदाहरण के लिए, जगह का अपने-आप पूरा होना और निर्देश देखें.
  • destination (ज़रूरी है) उस आखिरी जगह के बारे में बताता है जहां तक निर्देशों को कैलकुलेट करना है. ये विकल्प ऊपर बताए गए origin फ़ील्ड के लिए दिए गए विकल्प जैसे ही हैं.
  • travelMode (ज़रूरी है) यह बताता है कि निर्देशों का हिसाब लगाते समय, यात्रा के किस मोड का इस्तेमाल करना चाहिए. नीचे यात्रा मोड में मान्य वैल्यू दी गई हैं.
  • transitOptions (ज़रूरी नहीं) उन मानों को तय करता है जो सिर्फ़ उन अनुरोधों पर लागू होते हैं जहां travelMode, TRANSIT है. मान्य वैल्यू नीचे ट्रांज़िट विकल्प में दी गई हैं.
  • drivingOptions (ज़रूरी नहीं) उन मानों को तय करता है जो सिर्फ़ उन अनुरोधों पर लागू होते हैं जहां travelMode, DRIVING है. सही वैल्यू, नीचे ड्राइविंग के विकल्प में दी गई हैं.

  • unitSystem (ज़रूरी नहीं) बताता है कि नतीजे दिखाते समय किस यूनिट सिस्टम का इस्तेमाल करना है. मान्य वैल्यू, नीचे दिए गए यूनिट सिस्टम में दी गई हैं.

  • waypoints[] (ज़रूरी नहीं) DirectionsWaypoint की श्रेणी बताता है. वेपॉइंट, बताई गई जगह(जगहों) से रूट करके, रूट में बदलाव करते हैं. वेपॉइंट को लिटरल ऑब्जेक्ट के तौर पर बताया जाता है, जिसमें नीचे दिए गए फ़ील्ड होते हैं:

    • location से वेपॉइंट की जगह की जानकारी मिलती है. इसमें LatLng के तौर पर, जगह ऑब्जेक्ट या String के तौर पर जगह दिखाई जाती है, जिसे वेब-जेड किया जाएगा.
    • stopover एक बूलियन है, जो यह दिखाता है कि वेपॉइंट, रास्ते पर एक स्टॉप है. इससे रास्ते को दो रास्तों में बांटा जा सकता है.

    (वेपॉइंट के बारे में ज़्यादा जानने के लिए, नीचे दिए गए रकम के वेपॉइंट इस्तेमाल करना देखें.)

  • optimizeWaypoints (ज़रूरी नहीं) यह बताता है कि waypoints का इस्तेमाल करके जो रास्ता दिया गया है उसे बेहतर तरीके से वेपॉइंट को फिर से व्यवस्थित करके ऑप्टिमाइज़ किया जा सकता है. अगर true, निर्देश सेवा waypoint_order फ़ील्ड में फिर से क्रम में लगाई गई waypoints जानकारी देगी.(ज़्यादा जानकारी के लिए, नीचे रास्तों में वेपॉइंट का इस्तेमाल करना देखें.)
  • true पर सेट होने पर provideRouteAlternatives (ज़रूरी नहीं) बताता है कि निर्देश सेवा रिस्पॉन्स में एक से ज़्यादा रास्ते का विकल्प दे सकती है. ध्यान दें कि रूट के दूसरे विकल्प देने से, सर्वर से रिस्पॉन्स मिलने में लगने वाला समय बढ़ सकता है. यह सिर्फ़ उन अनुरोधों के लिए उपलब्ध है जिनमें इंटरमीडिएट वेपॉइंट नहीं होते.
  • avoidFerries (ज़रूरी नहीं) अगर इसे true पर सेट किया गया हो, तो इससे पता चलता है कि आपके दिए गए फ़ॉर्मूला के आधार पर तैयार किए गए रास्ते(जों) को फ़ेरी से बचना चाहिए.
  • avoidHighways (ज़रूरी नहीं है), जब इसे true पर सेट किया जाता है, तो इससे पता चलता है कि अगर संभव हो, तो आपके दिए गए फ़ॉर्मूला के आधार पर तैयार किए गए रास्ते, मुख्य हाइवे से बचें.
  • avoidTolls (ज़रूरी नहीं है), जब इसे true पर सेट किया जाता है, तो इससे पता चलता है कि आपके दिए गए फ़ॉर्मूला के आधार पर, तय किए गए रास्तों को टोल रोड से बचना चाहिए.
  • region (ज़रूरी नहीं) इलाके का कोड बताता है. इसे ccTLD (टॉप लेवल डोमेन) के तौर पर बताया गया है, इसमें दो वर्णों की वैल्यू होती है. (ज़्यादा जानकारी के लिए क्षेत्र के हिसाब से मापदंड तय करना देखें.)

नीचे एक नमूना DirectionsRequest दिया गया है:

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  waypoints: [
    {
      location: 'Joplin, MO',
      stopover: false
    },{
      location: 'Oklahoma City, OK',
      stopover: true
    }],
  provideRouteAlternatives: false,
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(/* now, or future date */),
    trafficModel: 'pessimistic'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}

यात्रा के मोड

निर्देशों का हिसाब लगाते समय, आपको यह बताना होगा कि कौनसा परिवहन मोड इस्तेमाल करना है. फ़िलहाल, नीचे दिए गए यात्रा मोड का इस्तेमाल किया जा सकता है:

  • DRIVING (डिफ़ॉल्ट) सड़क नेटवर्क का इस्तेमाल करके मानक ड्राइविंग दिशा निर्देश दिखाता है.
  • BICYCLING, साइकल चलाने के रास्तों और पसंदीदा सड़कों से जाने का अनुरोध करता है.
  • TRANSIT सार्वजनिक परिवहन के रास्तों के ज़रिए निर्देशों का अनुरोध करता है.
  • WALKING पैदल चलने के रास्तों और साइडवॉक से पैदल चलने के दिशा-निर्देशों का अनुरोध करता है.

यह जानने के लिए कि देश किस दिशा में काम कर रहा है, Google Maps Platform कवरेज की जानकारी देखें. अगर आप किसी ऐसे इलाके के लिए दिशा-निर्देश का अनुरोध करते हैं जिसमें वह दिशा निर्देश उपलब्ध नहीं है, तो जवाब में DirectionsStatus="ZERO_RESULTS" दिखेगा.

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

ट्रांज़िट विकल्प

दिशा-निर्देशों के अनुरोध के लिए उपलब्ध विकल्प, यात्रा के मोड के बीच अलग-अलग होते हैं. सार्वजनिक परिवहन के निर्देशों का अनुरोध करने पर avoidHighways, avoidTolls, waypoints[], और optimizeWaypoints के विकल्पों को अनदेखा कर दिया जाएगा. TransitOptions ऑब्जेक्ट लिटरल तरीके से, ट्रांज़िट के खास रूटिंग के विकल्प तय किए जा सकते हैं.

ट्रांज़िट दिशानिर्देश समय के प्रति संवेदनशील होते हैं. निर्देश सिर्फ़ आने वाले समय में दिखाए जाएंगे.

TransitOptions ऑब्जेक्ट लिटरल में ये फ़ील्ड शामिल हैं:

{
  arrivalTime: Date,
  departureTime: Date,
  modes[]: TransitMode,
  routingPreference: TransitRoutePreference
}

इन फ़ील्ड के बारे में नीचे बताया गया है:

  • arrivalTime (ज़रूरी नहीं) आने का पसंदीदा समय Date ऑब्जेक्ट के तौर पर बताता है. अगर मंज़िल पर पहुंचने का समय बताया गया है, तो फ़्लाइट के जाने के समय को नज़रअंदाज़ कर दिया जाएगा.
  • departureTime (वैकल्पिक) जाने का समय Date ऑब्जेक्ट के तौर पर बताता है. अगर arrivalTime बताया गया है, तो departureTime को अनदेखा कर दिया जाएगा. अगर departureTime या arrivalTime के लिए कोई वैल्यू नहीं दी गई है, तो डिफ़ॉल्ट वैल्यू अब डिफ़ॉल्ट वैल्यू बनी रहेगी.
  • modes[] (ज़रूरी नहीं) एक श्रेणी है जिसमें एक या एक से ज़्यादा TransitMode ऑब्जेक्ट लिटरल हैं. इस फ़ील्ड को सिर्फ़ तब शामिल किया जा सकता है, जब एपीआई कुंजी में अनुरोध शामिल हो. हर TransitMode, ट्रांज़िट का पसंदीदा मोड बताता है. ये वैल्यू इस्तेमाल की जा सकती हैं:
    • BUS से पता चलता है कि आपके दिए गए फ़ॉर्मूला के आधार पर तैयार किए गए रास्ते को बस से यात्रा करना ज़्यादा पसंद है.
    • RAIL से पता चलता है कि आपके दिए गए फ़ॉर्मूला के आधार पर तैयार किए गए रास्ते को ट्रेन, ट्राम, लाइट रेल, और सबवे से यात्रा करना बेहतर होगा.
    • SUBWAY से पता चलता है कि आपके दिए गए फ़ॉर्मूला के आधार पर तैयार किए गए रास्ते पर, मेट्रो से यात्रा करने को प्राथमिकता दी जानी चाहिए.
    • TRAIN बताता है कि आपके दिए गए फ़ॉर्मूला के आधार पर तैयार किए गए रास्ते को, ट्रेन से यात्रा करने को प्राथमिकता देनी चाहिए.
    • TRAM से पता चलता है कि आपके दिए गए फ़ॉर्मूला के आधार पर तैयार किए गए रास्ते को, ट्राम और लाइट रेल से यात्रा करने को प्राथमिकता देनी चाहिए.
  • routingPreference (ज़रूरी नहीं) सार्वजनिक परिवहन के रूट के लिए प्राथमिकताएं तय करता है. इस विकल्प का इस्तेमाल करके, एपीआई से चुने गए डिफ़ॉल्ट सबसे अच्छे रास्ते को स्वीकार करने के बजाय, दिए गए विकल्पों का मापदंड तय किया जा सकता है. इस फ़ील्ड को सिर्फ़ तब जोड़ा जा सकता है, जब अनुरोध में एपीआई कुंजी शामिल हो. ये वैल्यू इस्तेमाल की जा सकती हैं:
    • FEWER_TRANSFERS यह बताता है कि आपके दिए गए फ़ॉर्मूला के आधार पर तैयार किए गए रास्ते को, सीमित संख्या में ट्रांसफ़र को प्राथमिकता देनी चाहिए.
    • LESS_WALKING यह बताता है कि आपके दिए गए फ़ॉर्मूला के आधार पर तैयार किए गए रास्ते में, तय संख्या में पैदल चलने की सुविधा होनी चाहिए.

ट्रांज़िट के आधार पर DirectionsRequest का नमूना नीचे दिखाया गया है:

{
  origin: 'Hoboken NJ',
  destination: 'Carroll Gardens, Brooklyn',
  travelMode: 'TRANSIT',
  transitOptions: {
    departureTime: new Date(1337675679473),
    modes: ['BUS'],
    routingPreference: 'FEWER_TRANSFERS'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}

ड्राइविंग के विकल्प

DrivingOptions ऑब्जेक्ट से, ड्राइविंग के दिशा-निर्देशों के लिए रूटिंग के विकल्प तय किए जा सकते हैं.

DrivingOptions ऑब्जेक्ट में ये फ़ील्ड शामिल हैं:

{
  departureTime: Date,
  trafficModel: TrafficModel
}

इन फ़ील्ड के बारे में नीचे बताया गया है:

  • departureTime (drivingOptions ऑब्जेक्ट लिटरल होने के लिए ज़रूरी है) Date ऑब्जेक्ट के तौर पर, जाने के समय की जानकारी देता है. वैल्यू को मौजूदा समय या आने वाले समय में सेट किया जाना चाहिए. यह पुरानी तारीख नहीं हो सकती. (एपीआई सभी तारीखों को यूटीसी में बदल देता है, ताकि समय क्षेत्रों के हिसाब से डेटा को एक जैसा देखा जा सके.) Google Maps Platform के प्रीमियम प्लान के ग्राहकों के लिए, अगर अनुरोध में departureTime को शामिल किया जाता है, तो एपीआई उस समय ट्रैफ़िक के सही तरीके बताने पर, सबसे अच्छा रास्ता दिखाता है. साथ ही, जवाब में ट्रैफ़िक का अनुमानित समय (duration_in_traffic) भी दिखाता है. अगर आप रवानगी का समय नहीं बताते हैं (यानी, अगर अनुरोध में drivingOptions शामिल नहीं है), तो वापस किया गया रास्ता आम तौर पर, ट्रैफ़िक की स्थितियों को ध्यान में रखे बिना एक अच्छा रास्ता होता है.
  • trafficModel (ज़रूरी नहीं) ट्रैफ़िक में समय का हिसाब लगाते समय इस्तेमाल किए जाने वाले अनुमानों के बारे में बताता है. यह सेटिंग रिस्पॉन्स में duration_in_traffic फ़ील्ड में दी गई वैल्यू पर असर डालती है, जिसमें पुराने औसत के आधार पर, ट्रैफ़िक में अनुमानित समय शामिल होता है. bestguess पर डिफ़ॉल्ट. ये वैल्यू इस्तेमाल की जा सकती हैं:
    • bestguess (डिफ़ॉल्ट) से पता चलता है कि दिखाया गया duration_in_traffic, यात्रा के समय का सबसे अच्छा अनुमान होना चाहिए. यह अनुमान इस बात से लगाया जाता है कि ट्रैफ़िक की पुरानी स्थितियों और लाइव ट्रैफ़िक, दोनों के बारे में क्या पता है. departureTime अब जितना नज़दीक है उतना ही लाइव ट्रैफ़िक ज़्यादा ज़रूरी हो गया है.
    • pessimistic से यह पता चलता है कि दिखाया गया duration_in_traffic ज़्यादातर दिनों में, यात्रा के असल समय से ज़्यादा होना चाहिए. हालांकि, कभी-कभी ऐसा भी हो सकता है कि ट्रैफ़िक के कुछ खराब हाल हों, लेकिन इससे ज़्यादा.
    • optimistic से यह पता चलता है कि दिखाया गया duration_in_traffic ज़्यादातर दिनों में, यात्रा के असल समय से कम होना चाहिए. हालांकि, कभी-कभी खास तौर पर अच्छा ट्रैफ़िक आने वाले दिनों की संख्या, इस वैल्यू से ज़्यादा तेज़ी से हो सकती है.

ड्राइविंग दिशा निर्देशों के लिए नीचे एक नमूना DirectionsRequest दिया गया है:

{
  origin: 'Chicago, IL',
  destination: 'Los Angeles, CA',
  travelMode: 'DRIVING',
  drivingOptions: {
    departureTime: new Date(Date.now() + N),  // for the time N milliseconds from now.
    trafficModel: 'optimistic'
  }
}

यूनिट सिस्टम

डिफ़ॉल्ट रूप से, दिशा-निर्देशों को कैलकुलेट करने के लिए, उन्हें दिखाया जाता है. इसके लिए, मूल देश के यूनिट सिस्टम का इस्तेमाल किया जाता है. (ध्यान दें: जिन इकाइयों के पतों को अक्षांश/देशांतर निर्देशांकों का इस्तेमाल करके दिखाया जाता है उनके बजाय पतों की जगह हमेशा डिफ़ॉल्ट रूप से मेट्रिक इकाइयों का इस्तेमाल किया जाता है.) उदाहरण के लिए, "मुंबई, आईएल" से "टोरंटो, ओएनटी" तक का रास्ता मील में दिखाया जाएगा, जबकि रिवर्स रास्ता किलोमीटर में दिखेगा. नीचे दिए गए किसी एक UnitSystem मान का इस्तेमाल करके, अनुरोध को साफ़ तौर पर सेट करके, इस सिस्टम को बदला जा सकता है:

  • UnitSystem.METRIC मेट्रिक सिस्टम के इस्तेमाल के बारे में बताता है. दूरियों को किलोमीटर का इस्तेमाल करके दिखाया जाता है.
  • UnitSystem.IMPERIAL में इंपीरियल (अंग्रेज़ी) सिस्टम के इस्तेमाल की जानकारी दी गई है. दूरियां मील का उपयोग करके दिखाई जाती हैं.

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

निर्देश के लिए मापदंड तय करना

Google Maps API डायरेक्शन सर्विस, पते के उन नतीजों को दिखाती है जिन पर उस डोमेन (क्षेत्र या देश) का असर पड़ता है जहां से आपने JavaScript का बूटस्ट्रैप लोड किया था. ज़्यादातर उपयोगकर्ता https://maps.googleapis.com/ लोड करते हैं. इसलिए, यह अमेरिका के लिए एक इंप्लिसिट डोमेन सेट करता है. अगर किसी ऐसे डोमेन से बूटस्ट्रैप लोड किया जाता है जिस पर यह सुविधा काम करती है, तो आपको उस डोमेन के हिसाब से नतीजे मिलेंगे. उदाहरण के लिए, हो सकता है कि "सैन फ़्रांसिस्को" के लिए की गई खोज के नतीजे, https://maps.googleapis.com/ (अमेरिका) पर लोड होने वाले ऐप्लिकेशन और http://maps.google.es/ (स्पेन) को लोड करने वाले ऐप्लिकेशन से अलग हों.

साथ ही, region पैरामीटर का इस्तेमाल करके, निर्देश देने वाली सेवा को किसी खास इलाके के नतीजों के आधार पर नतीजे दिखाने के लिए सेट किया जा सकता है. यह पैरामीटर, क्षेत्र कोड को लेता है. साथ ही, इसे दो-वर्ण (गैर-न्यूमेरिक) यूनिकोड क्षेत्र सब-टैग के तौर पर दिखाया जाता है. ज़्यादातर मामलों में, ये टैग सीधे ccTLD (टॉप लेवल डोमेन) दो वर्णों वाले मान पर मैप करते हैं, जैसे कि "co.uk" में "uk". कुछ मामलों में, region टैग ISO-3166-1 कोड के साथ भी काम करता है. यह कोड ccTLD वैल्यू से अलग होता है, जैसे कि "ग्रेट ब्रिटेन" के लिए "GB".

region पैरामीटर का इस्तेमाल करते समय:

  • सिर्फ़ एक देश या इलाका चुनें. एक से ज़्यादा वैल्यू को अनदेखा कर दिया जाता है और इसकी वजह से अनुरोध पूरा नहीं किया जा सकता.
  • सिर्फ़ दो वर्णों वाले क्षेत्र के सबटैग (यूनिकोड CLDR फ़ॉर्मैट) का इस्तेमाल करें. अन्य सभी इनपुट की वजह से गड़बड़ियां होंगी.

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

रेंडरिंग के बारे में निर्देश

route() तरीके से DirectionsService को रास्ते के बारे में अनुरोध भेजने के लिए, कॉलबैक ज़रूरी होता है. सेवा देने का अनुरोध पूरा होने पर, इसे लागू किया जाता है. यह कॉलबैक रिस्पॉन्स में DirectionsResult और DirectionsStatus कोड दिखाएगा.

निर्देश क्वेरी की स्थिति

DirectionsStatus ये वैल्यू दिखा सकता है:

  • OK बताता है कि जवाब में एक मान्य DirectionsResult मौजूद है.
  • NOT_FOUND से पता चलता है कि अनुरोध के ऑरिजिन, डेस्टिनेशन या वेपॉइंट में से कम से कम एक जगह को वेब पते से कनेक्ट नहीं किया जा सका.
  • ZERO_RESULTS बताता है कि शुरुआत की जगह और मंज़िल के बीच कोई रास्ता नहीं मिला.
  • MAX_WAYPOINTS_EXCEEDED से पता चलता है कि DirectionsRequest में बहुत ज़्यादा DirectionsWaypoint फ़ील्ड दिए गए हैं. पॉइंट बनाने की सीमाओं के बारे में जानने के लिए, नीचे दिया गया सेक्शन देखें.
  • MAX_ROUTE_LENGTH_EXCEEDED यह बताता है कि अनुरोध किया गया रास्ता बहुत लंबा है और इसे प्रोसेस नहीं किया जा सकता. यह गड़बड़ी तब होती है, जब ज़्यादा मुश्किल निर्देश दिए जाते हैं. वेपॉइंट, मोड़ या निर्देशों की संख्या कम करके देखें.
  • INVALID_REQUEST बताता है कि दिया गया DirectionsRequest अमान्य था. इस गड़बड़ी कोड की सबसे आम वजहों में ऐसे अनुरोध शामिल होते हैं जो मूल जगह या डेस्टिनेशन में मौजूद नहीं होते. इसके अलावा, इनमें वे ट्रांज़िट अनुरोध शामिल होते हैं जिनमें वेपॉइंट शामिल होते हैं.
  • OVER_QUERY_LIMIT यह बताता है कि वेबपेज ने तय समय के अंदर बहुत ज़्यादा अनुरोध भेजे हैं.
  • REQUEST_DENIED यह बताता है कि वेबपेज को निर्देश सेवा का इस्तेमाल करने की अनुमति नहीं है.
  • UNKNOWN_ERROR बताता है कि सर्वर की गड़बड़ी की वजह से, निर्देश पाने के अनुरोध को प्रोसेस नहीं किया जा सका. आपके दोबारा कोशिश करने पर, अनुरोध पूरा हो सकता है.

नतीजे को प्रोसेस करने से पहले, आपको यह पक्का करना होगा कि दिशा-निर्देश क्वेरी से मान्य नतीजे दिखाए गए हों.

DirectionsResult दिखाना

DirectionsResult में निर्देश क्वेरी का नतीजा होता है, जिसे आप या तो खुद हैंडल कर सकते हैं या DirectionsRenderer ऑब्जेक्ट को पास कर सकते हैं. यह नतीजा मैप पर अपने-आप नतीजे दिखा सकता है.

DirectionsRenderer का इस्तेमाल करके DirectionsResult दिखाने के लिए, आपको ये काम करने होंगे:

  1. DirectionsRenderer ऑब्जेक्ट बनाएं.
  2. पास किए गए मैप से जोड़ने के लिए, रेंडरर पर setMap() को कॉल करें.
  3. रेंडरर पर setDirections() को कॉल करें, जैसा कि ऊपर बताया गया है कि उसे DirectionsResult पास करें. रेंडरर एक MVCObject है, इसलिए यह अपनी प्रॉपर्टी में किसी भी बदलाव का अपने-आप पता लगा लेगा और मैप से जुड़े निर्देशों में बदलाव होने पर उसे मैप में अपडेट कर देगा.

इस उदाहरण में, रूट 66 पर दो जगहों के बीच के दिशा-निर्देशों का हिसाब लगाया गया है. इसमें, ड्रॉपडाउन सूचियों में दी गई "start" और "end" वैल्यू के मुताबिक, शुरुआत की जगह और मंज़िल को सेट किया गया है. DirectionsRenderer, बताई गई जगहों के बीच पॉलीलाइन दिखाने और शुरुआत की जगह, डेस्टिनेशन, और अगर लागू हो, तो किसी भी वेपॉइंट पर मार्कर का प्लेसमेंट दिखाता है.

function initMap() {
  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    center: chicago
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsRenderer.setMap(map);
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
    origin: start,
    destination: end,
    travelMode: 'DRIVING'
  };
  directionsService.route(request, function(result, status) {
    if (status == 'OK') {
      directionsRenderer.setDirections(result);
    }
  });
}

एचटीएमएल बॉडी में:

<div>
<strong>Start: </strong>
<select id="start" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
<strong>End: </strong>
<select id="end" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
</div>

उदाहरण देखें

नीचे दिए गए उदाहरण में सैन फ़्रांसिस्को, कैलिफ़ोर्निया में हेट-ऐशबरी से ओशन बीच के बीच यात्रा के अलग-अलग मोड का इस्तेमाल करके दिशा-निर्देश दिखाया गया है:

function initMap() {
  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  var haight = new google.maps.LatLng(37.7699298, -122.4469157);
  var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205);
  var mapOptions = {
    zoom: 14,
    center: haight
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsRenderer.setMap(map);
}

function calcRoute() {
  var selectedMode = document.getElementById('mode').value;
  var request = {
      origin: haight,
      destination: oceanBeach,
      // Note that JavaScript allows us to access the constant
      // using square brackets and a string value as its
      // "property."
      travelMode: google.maps.TravelMode[selectedMode]
  };
  directionsService.route(request, function(response, status) {
    if (status == 'OK') {
      directionsRenderer.setDirections(response);
    }
  });
}

एचटीएमएल बॉडी में:

<div>
<strong>Mode of Travel: </strong>
<select id="mode" onchange="calcRoute();">
  <option value="DRIVING">Driving</option>
  <option value="WALKING">Walking</option>
  <option value="BICYCLING">Bicycling</option>
  <option value="TRANSIT">Transit</option>
</select>
</div>

उदाहरण देखें

DirectionsRenderer न सिर्फ़ पॉलीलाइन और उससे जुड़े सभी मार्कर को दिखाता है, बल्कि दिशा-निर्देशों को टेक्स्ट के तौर पर भी दिखाता है. ऐसा करने के लिए, अपने DirectionsRenderer पर setPanel() को कॉल करें. इस <div> को पास करें, जिसमें यह जानकारी दिखाई जानी चाहिए. ऐसा करने से, यह भी पक्का होता है कि आप कॉपीराइट से जुड़ी सही जानकारी और नतीजों से जुड़ी सभी चेतावनियां दिखाएं.

टेक्स्ट के लिए निर्देश, ब्राउज़र की पसंदीदा भाषा की सेटिंग का इस्तेमाल करके या language पैरामीटर का इस्तेमाल करके, एपीआई JavaScript को लोड करते समय दी जाएगी. (ज़्यादा जानकारी के लिए, लोकलाइज़ेशन देखें.) ट्रांज़िट निर्देशों के मामले में, समय को उस ट्रांज़िट समय के समय क्षेत्र में दिखाया जाएगा.

यह उदाहरण ऊपर दिए गए उदाहरण से मिलता-जुलता है, लेकिन इसमें एक <div> पैनल शामिल है जिसमें निर्देश दिखाने हैं:

function initMap() {
  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    center: chicago
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsRenderer.setMap(map);
  directionsRenderer.setPanel(document.getElementById('directionsPanel'));
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
    origin:start,
    destination:end,
    travelMode: 'DRIVING'
  };
  directionsService.route(request, function(response, status) {
    if (status == 'OK') {
      directionsRenderer.setDirections(response);
    }
  });
}

एचटीएमएल बॉडी में:

<div id="map" style="float:left;width:70%;height:100%"></div>
<div id="directionsPanel" style="float:right;width:30%;height:100%"></div>

उदाहरण देखें

DirectionsResult ऑब्जेक्ट

DirectionsService पर रास्ते के निर्देश भेजने का अनुरोध मिलने पर, आपको एक स्थिति कोड वाला रिस्पॉन्स मिलता है. इस नतीजे को DirectionsResult ऑब्जेक्ट कहा जाता है. DirectionsResult एक लिटरल है जिसमें ये फ़ील्ड शामिल हैं:

  • geocoded_waypoints[] में DirectionsGeocodedWaypoint ऑब्जेक्ट का कलेक्शन होता है. हर ऑब्जेक्ट में ऑरिजिन की जगह, डेस्टिनेशन, और वेपॉइंट की जानकारी शामिल होती है.
  • routes[] में DirectionsRoute ऑब्जेक्ट की कैटगरी है. हर रूट, ऑरिजिन से DirectionsRequest में दिए गए डेस्टिनेशन तक पहुंचने का तरीका बताता है. आम तौर पर, दिए गए अनुरोध के लिए सिर्फ़ एक रास्ता दिखाया जाता है. हालांकि, अगर अनुरोध के provideRouteAlternatives फ़ील्ड को true पर सेट नहीं किया गया है, तो एक से ज़्यादा रास्ते दिखाए जा सकते हैं.

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

दिशा-निर्देश वाले जियोकोड वाले वेपॉइंट

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

DirectionsGeocodedWaypoint एक लिटरल है जिसमें ये फ़ील्ड शामिल हैं:

  • geocoder_status, जियोकोडिंग ऑपरेशन से बना स्टेटस कोड दिखाता है. इस फ़ील्ड में ये वैल्यू हो सकती हैं.
    • "OK" से पता चलता है कि कोई गड़बड़ी नहीं हुई है. इसका पता पार्स हो गया है और कम से कम एक वेब पेज मिला है.
    • "ZERO_RESULTS" से यह पता चलता है कि इंट्रानेट सफल रहा, लेकिन कोई परिणाम नहीं मिला. ऐसा तब हो सकता है, जब एन्कोडर को address की मदद से पास नहीं किया गया था.

  • partial_match से यह पता चलता है कि इंट्रानेट ने मूल अनुरोध के लिए कोई सटीक मिलान नहीं दिया था, हालांकि यह अनुरोध किए गए पते के एक हिस्से से मेल खाता था. हो सकता है कि आप गलत स्पेलिंग के लिए किए गए मूल अनुरोध और/या अधूरे पते की जांच करना चाहें.

    आंशिक मिलान अक्सर उन मोहल्ले के पतों के लिए होते हैं जो उस इलाके में मौजूद नहीं होते हैं जिसे आप अनुरोध में पास करते हैं. आंशिक मिलानों का जवाब तब भी दिया जा सकता है, जब कोई अनुरोध एक ही इलाके में दो या उससे ज़्यादा जगहों से मेल खाता है. उदाहरण के लिए, "Hillpar St, Bristol, UK" हेनरी स्ट्रीट और हेनरीटा स्ट्रीट, दोनों के लिए एक आंशिक मिलान लौटाएगा. ध्यान दें कि अगर किसी अनुरोध में पते की गलत स्पेलिंग शामिल होती है, तो जियोकोडिंग सेवा किसी दूसरे पते का सुझाव दे सकती है. इस तरह से ट्रिगर किए गए सुझावों को भी आंशिक मिलान के रूप में चिह्नित किया जाएगा.

  • place_id किसी जगह का यूनीक आइडेंटिफ़ायर होता है. इसका इस्तेमाल, अन्य Google API के साथ किया जा सकता है. उदाहरण के लिए, आप Google Places API लाइब्रेरी के साथ place_id का इस्तेमाल करके किसी स्थानीय कारोबार, जैसे कि फ़ोन नंबर, कारोबार के खुले होने का समय, उपयोगकर्ताओं की समीक्षाओं वगैरह का ब्यौरा पा सकते हैं. जगह के आईडी की खास जानकारी देखें.
  • types[], दिए गए नतीजे का टाइप बताने वाली श्रेणी है. इस श्रेणी में शून्य या ज़्यादा टैग का एक सेट होता है जो नतीजे में मिली सुविधा के टाइप की पहचान करता है. उदाहरण के लिए, "मुंबई" का भौगोलिक स्थान "शहर" दिखाता है जो दिखाता है कि "शिकागो" एक शहर है. साथ ही, यह "राजनैतिक" भी दिखाता है, जो बताता है कि यह एक राजनैतिक इकाई है.

रास्ते के निर्देश

ध्यान दें: लेगसी DirectionsTrip ऑब्जेक्ट का नाम बदलकर, DirectionsRoute कर दिया गया है. ध्यान दें कि एक रास्ता अब पैरंट यात्रा के एक चरण के बजाय, सीधे शुरू से आखिर तक के सफ़र के बारे में बताता है.

DirectionsRoute में तय किए गए मूल स्रोत और डेस्टिनेशन में से एक नतीजा शामिल होता है. इस रास्ते में एक या एक से ज़्यादा फ़ुट (DirectionsLeg टाइप के) हो सकते हैं. यह इस बात पर निर्भर करता है कि कहीं वेपॉइंट तय किए गए थे या नहीं. साथ ही, इस रास्ते में कॉपीराइट और चेतावनी से जुड़ी जानकारी भी होती है. यह जानकारी उपयोगकर्ता को रूटिंग की जानकारी के साथ-साथ दिखाई जानी चाहिए.

DirectionsRoute एक लिटरल है जिसमें ये फ़ील्ड शामिल हैं:

  • legs[] में DirectionsLeg ऑब्जेक्ट का कलेक्शन होता है. हर ऑब्जेक्ट में, रास्ते के एक हिस्से के बारे में जानकारी होती है. इसमें, किसी रूट में मौजूद दो जगहों की जानकारी शामिल होती है. हर वेपॉइंट या डेस्टिनेशन के लिए एक अलग पैर मौजूद होगा. (बिना रास्ते वाले रास्ते में ठीक एक DirectionsLeg शामिल होगा.) हर चरण में DirectionStep की एक सीरीज़ है.
  • waypoint_order में एक कैटगरी होती है, जिससे आपके दिए गए फ़ॉर्मूला के आधार पर तैयार किए गए रास्ते के लिए, किसी भी वेपॉइंट का क्रम पता चलता है. अगर DirectionsRequest को optimizeWaypoints: true पास किया गया था, तो इस श्रेणी में बदला गया ऑर्डर हो सकता है.
  • overview_path में LatLng की कैटगरी होती है जो नतीजे के दिशा-निर्देशों का अनुमानित (स्मूद) पाथ दिखाती है.
  • overview_polyline में एक points ऑब्जेक्ट होता है जिसमें रूट की एन्कोड की गई पॉलीलाइन होती है. यह पॉलीलाइन, नतीजे पाने के निर्देशों का अनुमानित (स्मूद) पाथ है.
  • bounds में एक LatLngBounds होता है, जो इस रास्ते पर मौजूद पॉलीलाइन की सीमाओं को दिखाता है.
  • copyrights में इस रास्ते के लिए दिखाया जाने वाला कॉपीराइट टेक्स्ट शामिल है.
  • इन निर्देशों को दिखाते समय, warnings[] में कई तरह की चेतावनियां दिखाई जाएंगी. अगर दिए गए DirectionsRenderer ऑब्जेक्ट का इस्तेमाल नहीं किया जाता है, तो आपको इन चेतावनियों को खुद ही हैंडल करना और दिखाना होगा.
  • fare में इस रास्ते का कुल किराया (यानी, टिकट की कुल कीमत) शामिल है. यह प्रॉपर्टी सिर्फ़ सार्वजनिक परिवहन के अनुरोधों के लिए दी जाती है. साथ ही, यह सिर्फ़ उन रास्तों के लिए दिखती है जहां सार्वजनिक परिवहन के सभी हिस्सों के लिए किराये की जानकारी उपलब्ध है. इस जानकारी में ये चीज़ें शामिल हैं:
    • currency एक ISO 4217 मुद्रा कोड, जो उस मुद्रा को दिखाता है जिसमें रकम दिखाई गई है.
    • value: ऊपर बताई गई मुद्रा में किराये की कुल रकम.

निर्देश लेग

ध्यान दें: लेगसी DirectionsRoute ऑब्जेक्ट का नाम बदलकर, DirectionsLeg कर दिया गया है.

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

DirectionsLeg एक ऑब्जेक्ट लिटरल है जिसमें ये फ़ील्ड शामिल हैं:

  • steps[] में DirectionsStep ऑब्जेक्ट का एक कलेक्शन है, जिसमें यात्रा के हर चरण के बारे में जानकारी दी गई है.

  • distance, इस फ़ॉर्म के ज़रिए तय की गई कुल दूरी दिखाता है. इसे इस फ़ॉर्म के Distance ऑब्जेक्ट के तौर पर दिखाया जाता है:

    • value मीटर में दूरी दिखाता है
    • text में दूरी को स्ट्रिंग के रूप में दिखाया जाता है. यह डिफ़ॉल्ट रूप से, इकाइयों में दिखता है जैसा कि ऑरिजिन में इस्तेमाल किया गया है. (उदाहरण के लिए, अमेरिका में किसी भी ऑरिजिन के लिए मील का इस्तेमाल किया जाएगा.) मूल क्वेरी में खास तौर पर UnitSystem को सेट करके, इस सिस्टम सिस्टम को बदला जा सकता है. ध्यान दें कि आप चाहे किसी भी यूनिट सिस्टम का इस्तेमाल करें, distance.value फ़ील्ड में हमेशा एक वैल्यू होती है, जिसे मीटर में दिखाया जाता है.

    अगर दूरी के बारे में जानकारी नहीं है, तो ये फ़ील्ड तय नहीं हो सकते.

  • duration, इस लेग की कुल अवधि को दिखाता है. यह नीचे दिए गए फ़ॉर्म का Duration ऑब्जेक्ट होता है:

    • value से सेकंड में अवधि दिखाई जाती है.
    • text में, अवधि के बारे में बताने वाली स्ट्रिंग मौजूद होती है.

    अवधि की जानकारी न होने पर, इन फ़ील्ड के बारे में जानकारी नहीं दी जा सकती.

  • ट्रैफ़िक की मौजूदा स्थितियों को ध्यान में रखते हुए, duration_in_traffic में इस लेग की कुल अवधि दिखती है. duration_in_traffic तब ही दिखाया जाता है, जब ये सभी चीज़ें सही हों:

    • इस अनुरोध में, वेओवर पॉइंट शामिल नहीं हैं. इसका मतलब है कि इसमें ऐसे पॉइंट शामिल नहीं हैं जिनमें stopover, true हो.
    • यह अनुरोध खास तौर पर ड्राइविंग दिशा निर्देशों के लिए है— driving को mode पर सेट किया गया है.
    • departureTime को अनुरोध में drivingOptions फ़ील्ड के हिस्से के रूप में शामिल किया गया है.
    • अनुरोध किए गए रास्ते के लिए, ट्रैफ़िक का हाल उपलब्ध है.

    duration_in_traffic में ये फ़ील्ड शामिल हैं:

    • value से शुरू होने का समय सेकंड में दिखाता है.
    • text में, इस अवधि को दिखाने वाला ऐसा टेक्स्ट शामिल होता है जिसे इंसान पढ़ सकते हैं.
  • arrival_time में इस चरण तक पहुंचने का अनुमानित समय शामिल है. इस प्रॉपर्टी को सिर्फ़ सार्वजनिक परिवहन के निर्देशों के लिए दिखाया जाता है. नतीजे को तीन ऑब्जेक्ट वाले Time ऑब्जेक्ट के तौर पर दिखाया जाता है:
    • value JavaScript के तौर पर बताया गया समय Date ऑब्जेक्ट.
    • स्ट्रिंग के तौर पर दिया गया text समय. ट्रांज़िट समय के समय क्षेत्र में समय दिखाया जाता है.
    • time_zone में इस स्टेशन का समय क्षेत्र शामिल है. वैल्यू उस समय क्षेत्र का नाम है जैसा कि आईएएनए के समय क्षेत्र के डेटाबेस में बताया गया है, जैसे कि "अमेरिका/New_York".
  • departure_time में, इस लेग के लिए जाने का अनुमानित समय शामिल है. इसे Time ऑब्जेक्ट के तौर पर दिखाया गया है. departure_time सिर्फ़ सार्वजनिक परिवहन के निर्देशों के लिए उपलब्ध है.
  • start_location में, इस लेग के ऑरिजिन का LatLng शामिल है. निर्देश पाने की सेवा, शुरू और खत्म होने के समय पास की यात्रा के सबसे नज़दीकी विकल्प (आम तौर पर, सड़क) का इस्तेमाल करके जगहों के बीच के निर्देशों का हिसाब लगाती है. इसलिए, हो सकता है कि start_location, इस लेग के लिए दिए गए ऑरिजिन से अलग हो. उदाहरण के लिए, अगर कोई सड़क मूल जगह के आस-पास न हो.
  • end_location में, इस लेग के डेस्टिनेशन के LatLng शामिल हैं. शुरू और खत्म होने के समय पास की यात्रा के विकल्प (आम तौर पर एक सड़क) का इस्तेमाल करके DirectionsService, जगहों के बीच के दिशा-निर्देशों का हिसाब लगाता है, इसलिए हो सकता है कि end_location सड़क की जगह के पास न हो. उदाहरण के लिए, अगर सड़क घूमने की जगह के आस-पास न हो.
  • start_address में, इस पैर की शुरुआत में इंसान का पढ़ने लायक पता (आम तौर पर मोहल्ले का पता) होता है.

    इस कॉन्टेंट को ज्यों का त्यों पढ़ना चाहिए. फ़ॉर्मैट किए गए पते को प्रोग्रामैटिक रूप से पार्स न करें.
  • end_address में, इस पैर के आखिर का पता (आम तौर पर, मोहल्ले का पता) होता है, जिसे लोग आसानी से पढ़ सकते हैं.

    इस कॉन्टेंट को ज्यों का त्यों पढ़ना चाहिए. फ़ॉर्मैट किए गए पते को प्रोग्रामैटिक रूप से पार्स न करें.

दिशा-निर्देश चरण

DirectionsStep, किसी रास्ते पर पड़ने वाली सबसे परमाणु इकाई है. इसमें एक ही चरण, यात्रा से जुड़े खास निर्देश शामिल होते हैं. उदाहरण के लिए, "बाएं मुड़ें डब्ल्यू. चौथा सेंट" इस चरण से न सिर्फ़ निर्देश का पता चलता है, बल्कि दूरी और कुल समय की जानकारी भी मिलती है. यह जानकारी इस चरण से मेल खाती है. उदाहरण के लिए, "I-80 वेस्ट पर मर्ज करें" के रूप में दिखाए गए चरण में "37 मील" और "40 मिनट" की अवधि शामिल हो सकती है, जो दिखाती है कि अगला चरण इस चरण से 37 मील/40 मिनट है.

'दिशा-निर्देश' सेवा का इस्तेमाल करके सार्वजनिक परिवहन के निर्देश खोजने पर, 'जानकारी' कैटगरी में transit ऑब्जेक्ट के तौर पर, सार्वजनिक परिवहन की खास जानकारी शामिल की जाएगी. अगर निर्देशों में यात्रा के लिए एक से ज़्यादा मोड शामिल हैं, तो steps[] कैटगरी में पैदल या गाड़ी से जाने के लिए सिलसिलेवार निर्देश दिए जाएंगे. उदाहरण के लिए, पैदल चलने के चरण में शुरू और खत्म होने की जगहों से निर्देश शामिल होंगे: "Ins Ave और Fitch St तक चलें". इस चरण में, steps[] श्रेणी में दिए गए रास्ते के लिए, पैदल चलने के पूरे निर्देश शामिल होंगे. जैसे: "उत्तर-पश्चिम दिशा की ओर बढ़ो", "एरियलस वॉकर पर बाएं जाओ", और "इंनेस ऐवे पर बाईं ओर घुमाएं".

DirectionsStep एक ऑब्जेक्ट लिटरल है जिसमें ये फ़ील्ड शामिल हैं:

  • instructions में टेक्स्ट स्ट्रिंग के अंदर, इस चरण के लिए निर्देश शामिल हैं.
  • distance में, Distance ऑब्जेक्ट के तौर पर, अगले चरण तक इस चरण में तय की गई दूरी शामिल होती है. (ऊपर DirectionsLeg में ब्यौरा देखें.) अगर दूरी के बारे में जानकारी नहीं है, तो यह फ़ील्ड तय नहीं हो सकता.
  • duration में अगले चरण तक, Duration ऑब्जेक्ट के तौर पर चरण पूरा करने के लिए लगने वाले समय का अनुमान शामिल होता है. (ऊपर DirectionsLeg में जानकारी देखें.) अगर अवधि की जानकारी नहीं है, तो यह फ़ील्ड तय नहीं हो सकता.
  • start_location में, इस चरण के शुरुआत की जगह का जियोकोड किया गया LatLng शामिल है.
  • end_location में इस चरण के आखिरी पॉइंट का LatLng शामिल होता है.
  • polyline में एक points ऑब्जेक्ट होता है, जिसमें एन्कोड किया गया पॉलीलाइन होता है, जो इस चरण को दिखाता है. यह पॉलीलाइन, चरण का अनुमानित (स्मूद) पाथ है.
  • steps[] DirectionsStep ऑब्जेक्ट के बारे में जानकारी देता है. इसमें, सार्वजनिक परिवहन के निर्देश के मुताबिक, पैदल चलने या गाड़ी चलाने से जुड़े निर्देश शामिल होते हैं. उप-चरणों का इस्तेमाल सिर्फ़ सार्वजनिक परिवहन के निर्देशों के लिए किया जा सकता है.
  • travel_mode में इस चरण में इस्तेमाल किया गया TravelMode शामिल है. सार्वजनिक परिवहन के निर्देशों में पैदल चलने और सार्वजनिक परिवहन के निर्देशों का मेल शामिल हो सकता है.
  • path में LatLngs की एक श्रेणी शामिल है जिसमें इस चरण के बारे में बताया गया है.
  • transit में सार्वजनिक परिवहन की खास जानकारी शामिल होती है. जैसे, आने और जाने के समय की जानकारी, और ट्रांज़िट लाइन का नाम.

ट्रांज़िट विशिष्ट जानकारी

सार्वजनिक परिवहन के निर्देशों में ऐसी अन्य जानकारी दिखती है जो परिवहन के दूसरे साधनों के लिए काम की नहीं होती. ये अन्य प्रॉपर्टी, TransitDetails ऑब्जेक्ट से सार्वजनिक की जाती हैं. इन्हें DirectionsStep की प्रॉपर्टी के तौर पर दिखाया जाता है. TransitDetails ऑब्जेक्ट से TransitStop, TransitLine, TransitAgency, और VehicleType ऑब्जेक्ट के लिए ज़्यादा जानकारी ऐक्सेस की जा सकती है, जैसा कि यहां बताया गया है.

ट्रांज़िट विवरण

TransitDetails ऑब्जेक्ट से ये प्रॉपर्टी का पता चलता है:

  • arrival_stop में आने वाले स्टेशन/स्टॉप के बारे में जानकारी देने वाला एक TransitStop ऑब्जेक्ट है. इसमें ये प्रॉपर्टी मौजूद हैं:
    • name ट्रांज़िट स्टेशन/स्टॉप का नाम. जैसे "यूनियन स्क्वेयर".
    • location ट्रांज़िट स्टेशन/स्टॉप की जगह, जिसे LatLng के तौर पर दिखाया गया है.
  • departure_stop में एक TransitStop ऑब्जेक्ट है, जो जाने के स्टेशन/स्टॉप को दिखाता है.
  • arrival_time में पहुंचने का समय होता है, जिसे Time तीन प्रॉपर्टी वाले ऑब्जेक्ट के तौर पर बताया जाता है:
    • value JavaScript के तौर पर बताया गया समय Date ऑब्जेक्ट.
    • स्ट्रिंग के तौर पर दिया गया text समय. ट्रांज़िट समय के समय क्षेत्र में समय दिखाया जाता है.
    • time_zone में इस स्टेशन का समय क्षेत्र शामिल है. वैल्यू उस समय क्षेत्र का नाम है जैसा कि आईएएनए के समय क्षेत्र के डेटाबेस में बताया गया है, जैसे कि "अमेरिका/New_York".
  • departure_time में जाने का समय, Time ऑब्जेक्ट के तौर पर बताया गया है.
  • headsign से पता चलता है कि इस लाइन पर किस दिशा में सफ़र करना है, क्योंकि यह वाहन या वाहन के स्टॉप पर मौजूद होता है. यह अक्सर टर्मिनस स्टेशन होगा.
  • headway उपलब्ध होने पर, यह एक ही स्टॉप से इतने समय के अंतर पर रवाना होने के बीच के सेकंड की अनुमानित संख्या के बारे में बताता है. उदाहरण के लिए, अगर आपकी बस 600 है, तो headway के लिए आपको बस दस मिनट का इंतज़ार करना होगा.
  • line में एक TransitLine ऑब्जेक्ट लिटरल है, जिसमें इस चरण में इस्तेमाल की गई ट्रांज़िट लाइन की जानकारी है. TransitLine, TransitLine रेफ़रंस दस्तावेज़ में बताई गई अन्य प्रॉपर्टी के साथ लाइन का नाम और ऑपरेटर दिखाता है.
  • num_stops में इस चरण के दौरान स्टॉप की संख्या मौजूद है. इसमें, पहुंचने का स्टॉप शामिल है, लेकिन जाने वाली फ़्लाइट का स्टॉप नहीं. उदाहरण के लिए, अगर आपके निर्देशों में स्टॉप A से निकलना, स्टॉप B और C से गुज़रना, और स्टॉप D पर पहुंचना शामिल है, तो num_stops 3 देगा.

ट्रां‍ज़िट लाइन

TransitLine ऑब्जेक्ट इन प्रॉपर्टी को दिखाता है:

  • name में इस ट्रांज़िट लाइन का पूरा नाम है. उदाहरण के लिए, "7 Avenue Express" या "14th St Crosstown".
  • short_name में इस ट्रांज़िट लाइन का छोटा नाम है. आम तौर पर, यह एक लाइन नंबर होता है, जैसे कि "2" या "M14".
  • agencies एक कैटगरी है जिसमें एक TransitAgency ऑब्जेक्ट होता है. TransitAgency ऑब्जेक्ट, इस प्रॉपर्टी के ऑपरेटर के बारे में जानकारी देता है. इसमें, ये प्रॉपर्टी भी शामिल हैं:
    • name में सार्वजनिक परिवहन एजेंसी का नाम है.
    • phone में सार्वजनिक परिवहन एजेंसी का फ़ोन नंबर है.
    • url में सार्वजनिक परिवहन एजेंसी का यूआरएल है.

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

  • url में सार्वजनिक परिवहन एजेंसी के दिए गए, इस ट्रांज़िट लाइन का यूआरएल है.
  • icon में इस लाइन से जुड़े आइकॉन का यूआरएल शामिल है. ज़्यादातर शहर, सामान्य आइकॉन का इस्तेमाल करेंगे. ये आइकॉन, वाहन के टाइप के हिसाब से अलग-अलग होते हैं. कुछ ट्रांज़िट लाइन, जैसे कि न्यूयॉर्क सबवे सिस्टम में उस लाइन के लिए खास आइकॉन होते हैं.
  • color में आम तौर पर, इस सार्वजनिक परिवहन के साइनेज में इस्तेमाल होने वाला रंग शामिल होता है. रंग को हेक्स स्ट्रिंग के रूप में दिखाया जाएगा, जैसे कि: #FF0033.
  • text_color में टेक्स्ट का रंग शामिल किया जाता है. आम तौर पर, इसका इस्तेमाल लाइन के साइनेज के लिए किया जाता है. रंग को हेक्स स्ट्रिंग के रूप में तय किया जाएगा.
  • vehicle में एक Vehicle ऑब्जेक्ट होता है, जिसमें ये प्रॉपर्टी शामिल होती हैं:
    • name में इस रास्ते पर मौजूद वाहन का नाम है. जैसे "सबवे."
    • type में इस लाइन में इस्तेमाल किए गए वाहन का टाइप बताया गया है. इस्तेमाल की जा सकने वाली वैल्यू की पूरी सूची देखने के लिए, वाहन के टाइप से जुड़े दस्तावेज़ देखें.
    • icon में उस आइकॉन का यूआरएल होता है जो आम तौर पर इस वाहन टाइप से जुड़ा होता है.
    • स्थानीय परिवहन साइनेज के आधार पर, local_icon में वाहन के टाइप से जुड़े आइकॉन का यूआरएल शामिल होता है.

वाहन का प्रकार

VehicleType ऑब्जेक्ट से ये प्रॉपर्टी का पता चलता है:

वैल्यू परिभाषा
VehicleType.RAIL रेल.
VehicleType.METRO_RAIL लाइट रेल ट्रांज़िट.
VehicleType.SUBWAY अंडरग्राउंड लाइट रेल.
VehicleType.TRAM ग्राउंड लाइट रेल के ऊपर.
VehicleType.MONORAIL मोनोरेल.
VehicleType.HEAVY_RAIL भारी रेल.
VehicleType.COMMUTER_TRAIN यात्री रेल.
VehicleType.HIGH_SPEED_TRAIN हाई स्पीड ट्रेन.
VehicleType.BUS बस.
VehicleType.INTERCITY_BUS एक शहर से दूसरे शहर जाने वाली बस.
VehicleType.TROLLEYBUS ट्रॉलीबस.
VehicleType.SHARE_TAXI शेयर टैक्सी एक तरह की बस है. इसकी मदद से रूट पर यात्रियों को छोड़ा और चुना जा सकता है.
VehicleType.FERRY फ़ेरी.
VehicleType.CABLE_CAR केबल की मदद से चलने वाला वाहन, जो आम तौर पर ज़मीन पर चलता है. एरियल केबल कारें VehicleType.GONDOLA_LIFT हो सकती हैं.
VehicleType.GONDOLA_LIFT एरियल केबल कार.
VehicleType.FUNICULAR ऐसा वाहन जिसमें केबल से खड़ी चढ़ाई वाला पुल बनाया जाता है. फ़्यूनिक्यूलर में आम तौर पर दो कार होती हैं. हर कार एक कार के काउंटरवेट के तौर पर काम करती है.
VehicleType.OTHER अन्य सभी वाहन इस तरह की जानकारी दिखाएंगे.

Directions के नतीजों की जांच करना

DirectionsResults कॉम्पोनेंट — DirectionsRoute, DirectionsLeg, DirectionsStep, और TransitDetails की जांच की जा सकती है. साथ ही, उनका इस्तेमाल किसी भी निर्देश को पार्स करते समय किया जा सकता है.

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

नीचे दिए गए उदाहरण में, न्यूयॉर्क शहर में पर्यटकों के घूमने-फिरने की कुछ खास जगहों तक पैदल जाने की जानकारी दी गई है. हम हर चरण के लिए मार्कर जोड़ने के लिए, रास्ते के DirectionsStep की जांच करते हैं और उस चरण के लिए, जानकारी देने वाले टेक्स्ट के साथ InfoWindow में जानकारी जोड़ते हैं.

ध्यान दें: हम पैदल चलने के निर्देशों की गिनती कर रहे हैं. इसलिए, हम उपयोगकर्ता को अलग <div> पैनल में चेतावनियां भी दिखाते हैं.

var map;
var directionsRenderer;
var directionsService;
var stepDisplay;
var markerArray = [];

function initMap() {
  // Instantiate a directions service.
  directionsService = new google.maps.DirectionsService();

  // Create a map and center it on Manhattan.
  var manhattan = new google.maps.LatLng(40.7711329, -73.9741874);
  var mapOptions = {
    zoom: 13,
    center: manhattan
  }
  map = new google.maps.Map(document.getElementById('map'), mapOptions);

  // Create a renderer for directions and bind it to the map.
  var rendererOptions = {
    map: map
  }
  directionsRenderer = new google.maps.DirectionsRenderer(rendererOptions)

  // Instantiate an info window to hold step text.
  stepDisplay = new google.maps.InfoWindow();
}

function calcRoute() {

  // First, clear out any existing markerArray
  // from previous calculations.
  for (i = 0; i < markerArray.length; i++) {
    markerArray[i].setMap(null);
  }

  // Retrieve the start and end locations and create
  // a DirectionsRequest using WALKING directions.
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
      origin: start,
      destination: end,
      travelMode: 'WALKING'
  };

  // Route the directions and pass the response to a
  // function to create markers for each step.
  directionsService.route(request, function(response, status) {
    if (status == "OK") {
      var warnings = document.getElementById("warnings_panel");
      warnings.innerHTML = "" + response.routes[0].warnings + "";
      directionsRenderer.setDirections(response);
      showSteps(response);
    }
  });
}

function showSteps(directionResult) {
  // For each step, place a marker, and add the text to the marker's
  // info window. Also attach the marker to an array so we
  // can keep track of it and remove it when calculating new
  // routes.
  var myRoute = directionResult.routes[0].legs[0];

  for (var i = 0; i < myRoute.steps.length; i++) {
      var marker = new google.maps.Marker({
        position: myRoute.steps[i].start_point,
        map: map
      });
      attachInstructionText(marker, myRoute.steps[i].instructions);
      markerArray[i] = marker;
  }
}

function attachInstructionText(marker, text) {
  google.maps.event.addListener(marker, 'click', function() {
    stepDisplay.setContent(text);
    stepDisplay.open(map, marker);
  });
}

एचटीएमएल बॉडी में:

<div>
<strong>Start: </strong>
<select id="start">
  <option value="penn station, new york, ny">Penn Station</option>
  <option value="grand central station, new york, ny">Grand Central Station</option>
  <option value="625 8th Avenue New York NY 10018">Port Authority Bus Terminal</option>
  <option value="staten island ferry terminal, new york, ny">Staten Island Ferry Terminal</option>
  <option value="101 E 125th Street, New York, NY">Harlem - 125th St Station</option>
</select>
<strong>End: </strong>
<select id="end" onchange="calcRoute();">
  <option value="260 Broadway New York NY 10007">City Hall</option>
  <option value="W 49th St & 5th Ave, New York, NY 10020">Rockefeller Center</option>
  <option value="moma, New York, NY">MOMA</option>
  <option value="350 5th Ave, New York, NY, 10118">Empire State Building</option>
  <option value="253 West 125th Street, New York, NY">Apollo Theatre</option>
  <option value="1 Wall St, New York, NY">Wall St</option>
</select>
<div>

उदाहरण देखें

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

जैसा कि DirectionsRequest में बताया गया है, पैदल चलने, साइकल चलाने या ड्राइविंग के लिए दिशा-निर्देश सेवा का इस्तेमाल करके, वेपॉइंट (DirectionsWaypoint टाइप का) भी तय किया जा सकता है. ट्रांज़िट दिशानिर्देश के लिए वेपॉइंट उपलब्ध नहीं हैं. वेपॉइंट, आपको अन्य जगहों से रूट का हिसाब लगाने की सुविधा देते हैं. इस स्थिति में, रिटर्न किया गया रास्ता दिए गए वेपॉइंट से होकर जाता है.

waypoint में ये फ़ील्ड शामिल होते हैं:

  • location (ज़रूरी है) वेपॉइंट का पता बताता है.
  • stopover (ज़रूरी नहीं) बताता है कि यह पॉइंट, रूट पर सही स्टॉप है (true) या इसके बजाय, यह सिर्फ़ बताएं गए रास्ते (false) से रूट करने की प्राथमिकता है. स्टॉपओवर डिफ़ॉल्ट रूप से true होते हैं.

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

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

नीचे दिया गया उदाहरण, पूरे अमेरिका के अलग-अलग देशों के रास्तों की गणना करने के लिए कई तरह के स्टार्ट पॉइंट, एंड पॉइंट, और वेपॉइंट का इस्तेमाल करता है. (एक से ज़्यादा वेपॉइंट चुनने के लिए, सूची में आइटम चुनते समय Ctrl-Click दबाएं.) ध्यान दें कि हम हर रूट के शुरुआती और आखिरी पॉइंट के लिए टेक्स्ट देने के लिए routes.start_address और routes.end_address की जांच करते हैं.

TypeScript

function initMap(): void {
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer();
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 6,
      center: { lat: 41.85, lng: -87.65 },
    }
  );

  directionsRenderer.setMap(map);

  (document.getElementById("submit") as HTMLElement).addEventListener(
    "click",
    () => {
      calculateAndDisplayRoute(directionsService, directionsRenderer);
    }
  );
}

function calculateAndDisplayRoute(
  directionsService: google.maps.DirectionsService,
  directionsRenderer: google.maps.DirectionsRenderer
) {
  const waypts: google.maps.DirectionsWaypoint[] = [];
  const checkboxArray = document.getElementById(
    "waypoints"
  ) as HTMLSelectElement;

  for (let i = 0; i < checkboxArray.length; i++) {
    if (checkboxArray.options[i].selected) {
      waypts.push({
        location: (checkboxArray[i] as HTMLOptionElement).value,
        stopover: true,
      });
    }
  }

  directionsService
    .route({
      origin: (document.getElementById("start") as HTMLInputElement).value,
      destination: (document.getElementById("end") as HTMLInputElement).value,
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING,
    })
    .then((response) => {
      directionsRenderer.setDirections(response);

      const route = response.routes[0];
      const summaryPanel = document.getElementById(
        "directions-panel"
      ) as HTMLElement;

      summaryPanel.innerHTML = "";

      // For each route, display summary information.
      for (let i = 0; i < route.legs.length; i++) {
        const routeSegment = i + 1;

        summaryPanel.innerHTML +=
          "<b>Route Segment: " + routeSegment + "</b><br>";
        summaryPanel.innerHTML += route.legs[i].start_address + " to ";
        summaryPanel.innerHTML += route.legs[i].end_address + "<br>";
        summaryPanel.innerHTML += route.legs[i].distance!.text + "<br><br>";
      }
    })
    .catch((e) => window.alert("Directions request failed due to " + status));
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

function initMap() {
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer();
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 6,
    center: { lat: 41.85, lng: -87.65 },
  });

  directionsRenderer.setMap(map);
  document.getElementById("submit").addEventListener("click", () => {
    calculateAndDisplayRoute(directionsService, directionsRenderer);
  });
}

function calculateAndDisplayRoute(directionsService, directionsRenderer) {
  const waypts = [];
  const checkboxArray = document.getElementById("waypoints");

  for (let i = 0; i < checkboxArray.length; i++) {
    if (checkboxArray.options[i].selected) {
      waypts.push({
        location: checkboxArray[i].value,
        stopover: true,
      });
    }
  }

  directionsService
    .route({
      origin: document.getElementById("start").value,
      destination: document.getElementById("end").value,
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING,
    })
    .then((response) => {
      directionsRenderer.setDirections(response);

      const route = response.routes[0];
      const summaryPanel = document.getElementById("directions-panel");

      summaryPanel.innerHTML = "";

      // For each route, display summary information.
      for (let i = 0; i < route.legs.length; i++) {
        const routeSegment = i + 1;

        summaryPanel.innerHTML +=
          "<b>Route Segment: " + routeSegment + "</b><br>";
        summaryPanel.innerHTML += route.legs[i].start_address + " to ";
        summaryPanel.innerHTML += route.legs[i].end_address + "<br>";
        summaryPanel.innerHTML += route.legs[i].distance.text + "<br><br>";
      }
    })
    .catch((e) => window.alert("Directions request failed due to " + status));
}

window.initMap = initMap;
index.js

वेपॉइंट के लिए सीमाएं और पाबंदियां

इस्तेमाल से जुड़ी ये सीमाएं और पाबंदियां लागू होती हैं:

  • Maps की JavaScript एपीआई में, निर्देश देने वाली सेवा का इस्तेमाल करते समय, ज़्यादा से ज़्यादा 25 जगहों के लिए ही पॉइंट इस्तेमाल किए जा सकते हैं. साथ ही, शुरुआत की जगह और मंज़िल की जानकारी भी दी जा सकती है. निर्देशों की एपीआई वेब सेवा के लिए भी यही सीमाएं लागू हैं.
  • निर्देश दिखाने वाली एपीआई की वेब सेवा के लिए, ग्राहकों को 25 वेपॉइंट इस्तेमाल करने की अनुमति होती है. जैसे, यात्रा की शुरुआत की जगह और मंज़िल.
  • Google Maps Platform के प्रीमियम प्लान के ग्राहकों को 25 वेपॉइंट, यात्रा शुरू करने की जगह, और मंज़िल की जानकारी दी जाती है.
  • वेपॉइंट, सार्वजनिक परिवहन के निर्देशों के लिए काम नहीं करते.

खींचने और छोड़ने लायक दिशा-निर्देश

अगर उपयोगकर्ता ड्रैग करने लायक हैं, तो वे डाइनैमिक तौर पर, DirectionsRenderer का इस्तेमाल करके साइकल, पैदल या ड्राइविंग से जुड़े दिशा-निर्देशों में बदलाव कर सकते हैं. इससे उपयोगकर्ता, मैप पर दिखने वाले पाथ पर क्लिक करके और छोड़कर, रास्तों को चुन सकते हैं और उनमें बदलाव कर सकते हैं. आपने अपनी draggable प्रॉपर्टी को true पर सेट करके, रेंडर करने वाले के डिसप्ले को खींचकर छोड़ने की जगह का पता लगाने का विकल्प दिया है. ट्रांज़िट दिशानिर्देश को खींचे जाने योग्य नहीं बनाया जा सकता.

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

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

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

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -24.345, lng: 134.46 }, // Australia.
    }
  );

  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer({
    draggable: true,
    map,
    panel: document.getElementById("panel") as HTMLElement,
  });

  directionsRenderer.addListener("directions_changed", () => {
    const directions = directionsRenderer.getDirections();

    if (directions) {
      computeTotalDistance(directions);
    }
  });

  displayRoute(
    "Perth, WA",
    "Sydney, NSW",
    directionsService,
    directionsRenderer
  );
}

function displayRoute(
  origin: string,
  destination: string,
  service: google.maps.DirectionsService,
  display: google.maps.DirectionsRenderer
) {
  service
    .route({
      origin: origin,
      destination: destination,
      waypoints: [
        { location: "Adelaide, SA" },
        { location: "Broken Hill, NSW" },
      ],
      travelMode: google.maps.TravelMode.DRIVING,
      avoidTolls: true,
    })
    .then((result: google.maps.DirectionsResult) => {
      display.setDirections(result);
    })
    .catch((e) => {
      alert("Could not display directions due to: " + e);
    });
}

function computeTotalDistance(result: google.maps.DirectionsResult) {
  let total = 0;
  const myroute = result.routes[0];

  if (!myroute) {
    return;
  }

  for (let i = 0; i < myroute.legs.length; i++) {
    total += myroute.legs[i]!.distance!.value;
  }

  total = total / 1000;
  (document.getElementById("total") as HTMLElement).innerHTML = total + " km";
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;
index.ts

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -24.345, lng: 134.46 }, // Australia.
  });
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer({
    draggable: true,
    map,
    panel: document.getElementById("panel"),
  });

  directionsRenderer.addListener("directions_changed", () => {
    const directions = directionsRenderer.getDirections();

    if (directions) {
      computeTotalDistance(directions);
    }
  });
  displayRoute(
    "Perth, WA",
    "Sydney, NSW",
    directionsService,
    directionsRenderer
  );
}

function displayRoute(origin, destination, service, display) {
  service
    .route({
      origin: origin,
      destination: destination,
      waypoints: [
        { location: "Adelaide, SA" },
        { location: "Broken Hill, NSW" },
      ],
      travelMode: google.maps.TravelMode.DRIVING,
      avoidTolls: true,
    })
    .then((result) => {
      display.setDirections(result);
    })
    .catch((e) => {
      alert("Could not display directions due to: " + e);
    });
}

function computeTotalDistance(result) {
  let total = 0;
  const myroute = result.routes[0];

  if (!myroute) {
    return;
  }

  for (let i = 0; i < myroute.legs.length; i++) {
    total += myroute.legs[i].distance.value;
  }

  total = total / 1000;
  document.getElementById("total").innerHTML = total + " km";
}

window.initMap = initMap;
index.js
उदाहरण देखें

सैंपल आज़माएं