Directions Service

खास जानकारी

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

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

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

शुरू करना

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

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

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

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

कीमत

Maps, Routes, और Places के लिए, 16 जुलाई, 2018 से 'इस्तेमाल के हिसाब से पैसे चुकाएं' वाला नया प्लान लागू हो गया है. JavaScript Directions सेवा के इस्तेमाल के लिए, कीमत और इस्तेमाल की नई सीमाओं के बारे में ज़्यादा जानने के लिए, Directions API के लिए इस्तेमाल और बिलिंग देखें.

नीतियां

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

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

निर्देशों की सेवा को ऐसिंक्रोनस तरीके से ऐक्सेस किया जाता है, क्योंकि 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 API में, जियोकोडिंग, जगह की खोज, और जगह के शुरुआती अक्षर लिखने पर पूरा नाम सुझाने की सेवाओं से, जगह के आईडी हासिल किए जा सकते हैं. किसी जगह के शुरुआती अक्षर लिखने पर पूरा नाम सुझाने की सुविधा से मिले प्लेस आईडी का इस्तेमाल करने का उदाहरण देखने के लिए, किसी जगह के शुरुआती अक्षर लिखने पर पूरा नाम सुझाने की सुविधा और निर्देश देखें.
  • destination (ज़रूरी है) से उस जगह की जानकारी मिलती है जहां तक जाने के लिए, दिशा-निर्देशों का हिसाब लगाया जाना है. ये विकल्प, ऊपर बताए गए origin फ़ील्ड के विकल्पों जैसे ही हैं.
  • travelMode (ज़रूरी है) से पता चलता है कि निर्देशों का हिसाब लगाते समय, किस तरह के परिवहन का इस्तेमाल करना है. मान्य वैल्यू, यहां दिए गए यात्रा के तरीकों में दी गई हैं.
  • transitOptions (ज़रूरी नहीं) में ऐसी वैल्यू दी जाती हैं जो सिर्फ़ उन अनुरोधों पर लागू होती हैं जिनमें travelMode की वैल्यू TRANSIT होती है. मान्य वैल्यू के बारे में यहां ट्रांज़िट के विकल्प में बताया गया है.
  • drivingOptions (ज़रूरी नहीं) में ऐसी वैल्यू दी जाती हैं जो सिर्फ़ उन अनुरोधों पर लागू होती हैं जिनमें travelMode की वैल्यू DRIVING होती है. मान्य वैल्यू के बारे में यहां ड्राइविंग के विकल्प में बताया गया है.

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

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

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

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

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

यहां 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 की Directions Service, पते के ऐसे नतीजे दिखाती है जिन पर उस डोमेन (इलाके या देश) का असर पड़ता है जहां से आपने 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 फ़ॉर्मैट) का इस्तेमाल करें. अन्य सभी इनपुट से गड़बड़ियां होंगी.

क्षेत्र के हिसाब से, सिर्फ़ उन देशों और इलाकों के लिए अनुवाद की सुविधा उपलब्ध है जहां निर्देशों की सुविधा काम करती है. Directions API की अंतरराष्ट्रीय कवरेज देखने के लिए, 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 ऑब्जेक्ट, नतीजे को मैप पर अपने-आप दिखा सकता है.

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

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

नीचे दिए गए उदाहरण में, Route 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 के अन्य एपीआई के साथ किया जा सकता है. उदाहरण के लिए, किसी स्थानीय कारोबार की जानकारी पाने के लिए, place_id का इस्तेमाल Google Places API लाइब्रेरी के साथ किया जा सकता है. जैसे, फ़ोन नंबर, कारोबार के खुले होने का समय, उपयोगकर्ताओं की समीक्षाएं वगैरह. जगह की जानकारी वाले आईडी के बारे में खास जानकारी देखें.
  • 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: किराये की कुल रकम, ऊपर बताई गई मुद्रा में.

Directions Legs

ध्यान दें: लेगसी 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 है.
    • अनुरोध खास तौर पर ड्राइविंग के निर्देशों के लिए है—mode को driving पर सेट किया गया है.
    • departureTime को अनुरोध में, drivingOptions फ़ील्ड के हिस्से के तौर पर शामिल किया जाता है.
    • आपने जिस रास्ते के लिए अनुरोध किया है उसके लिए ट्रैफ़िक की जानकारी उपलब्ध हो.

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

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

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

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

निर्देशों के चरण

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

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

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 बस, मेट्रो वगैरह के स्टेशन/स्टॉप का नाम. जैसे "Union Square".
    • location ट्रांज़िट स्टेशन/स्टॉप की जगह, जिसे LatLng के तौर पर दिखाया जाता है.
  • departure_stop में TransitStop ऑब्जेक्ट होता है, जो सफ़र के स्टेशन/स्टॉप की जानकारी देता है.
  • arrival_time में, ऑब्जेक्ट के तौर पर बताया गया, पहुंचने का समय होता है. यह ऑब्जेक्ट, तीन प्रॉपर्टी वाला Time होता है:
    • value समय, JavaScript ऑब्जेक्ट के तौर पर दिया गया Date हो.
    • text स्ट्रिंग के तौर पर तय किया गया समय. समय, बस स्टॉप के टाइम ज़ोन में दिखाया जाता है.
    • time_zone में इस स्टेशन का टाइम ज़ोन होता है. वैल्यू, आईएएनए टाइम ज़ोन डेटाबेस में बताए गए टाइम ज़ोन का नाम है. जैसे, "America/New_York".
  • departure_time में, Time ऑब्जेक्ट के तौर पर बताया गया, ऑफ़र के शुरू होने का समय होता है.
  • headsign से पता चलता है कि इस लाइन पर किस दिशा में यात्रा करनी है, जैसा कि वाहन पर या जाने के स्टॉप पर मार्क किया गया है. आम तौर पर, यह टर्मिनस स्टेशन होता है.
  • headway उपलब्ध होने पर, इससे पता चलता है कि एक ही स्टॉप से, एक के बाद एक बसें कितने सेकंड के अंतराल पर चलती हैं. उदाहरण के लिए, अगर headway की वैल्यू 600 है, तो बस छूटने पर आपको 10 मिनट इंतज़ार करना पड़ सकता है.
  • 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 अन्य सभी वाहनों के लिए यह वैल्यू दिखेगी.

जांच के निर्देशनतीजे

किसी भी निर्देश के जवाब को पार्स करते समय, 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 पर सेट होते हैं.

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

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

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

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