Directions Service

यूरोपियन इकनॉमिक एरिया (ईईए) के डेवलपर
ध्यान दें: सर्वर-साइड लाइब्रेरी

खास जानकारी

DirectionsService ऑब्जेक्ट का इस्तेमाल करके, यात्रा के अलग-अलग तरीकों के लिए दिशाओं का हिसाब लगाया जा सकता है. यह ऑब्जेक्ट, Google Maps API Directions Service से कम्यूनिकेट करता है. यह सेवा, दिशा-निर्देशों के अनुरोधों को स्वीकार करती है और सबसे सही रास्ता दिखाती है. यात्रा में लगने वाले समय को सबसे ज़्यादा प्राथमिकता दी जाती है. हालांकि, दूरी, मोड़ की संख्या, और अन्य चीज़ों को भी ध्यान में रखा जा सकता है. आपके पास इन दिशा-निर्देशों के नतीजों को खुद मैनेज करने या इन नतीजों को रेंडर करने के लिए, 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. अगर आपको सूची में एपीआई दिखता है, तो आपको कोई कार्रवाई करने की ज़रूरत नहीं है. अगर एपीआई सूची में नहीं है, तो इसे https://console.cloud.google.com/apis/library/directions-backend.googleapis.com पर जाकर चालू करें

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

कीमत

JavaScript Directions सेवा की कीमत और इस्तेमाल से जुड़ी नीतियों के बारे में जानने के लिए, Directions API (लेगसी) के लिए इस्तेमाल और बिलिंग देखें.

नीतियां

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

रास्ते की जानकारी पाने के अनुरोध

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

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

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

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

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

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

  • optimizeWaypoints (ज़रूरी नहीं) से पता चलता है कि दिए गए waypoints का इस्तेमाल करके, रास्ते को ऑप्टिमाइज़ किया जा सकता है. इसके लिए, वेपॉइंट को ज़्यादा बेहतर क्रम में फिर से व्यवस्थित किया जा सकता है. अगर true, तो Directions सेवा, waypoint_order फ़ील्ड में क्रम से लगाए गए waypoints दिखाएगी. ज़्यादा जानकारी के लिए, नीचे दिया गया रास्तों में वेपॉइंट इस्तेमाल करना लेख पढ़ें.
  • provideRouteAlternatives (ज़रूरी नहीं) को true पर सेट करने से यह पता चलता है कि Directions API, जवाब में एक से ज़्यादा वैकल्पिक रास्ते दे सकता है. ध्यान दें कि रास्ते के अन्य विकल्प देने से, सर्वर से जवाब मिलने में ज़्यादा समय लग सकता है. यह सुविधा सिर्फ़ उन अनुरोधों के लिए उपलब्ध है जिनमें बीच के वेपॉइंट नहीं होते.
  • 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 Premium Plan के ग्राहकों के लिए, अगर आपने अनुरोध में 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 पैरामीटर का इस्तेमाल करके, Directions सेवा को किसी खास क्षेत्र के हिसाब से नतीजे दिखाने के लिए भी सेट किया जा सकता है. इस पैरामीटर में, क्षेत्र का कोड शामिल होता है. इसे दो वर्णों वाले (बिना अंक वाले) यूनिकोड क्षेत्र के सबटैग के तौर पर तय किया जाता है. ज़्यादातर मामलों में, ये टैग सीधे तौर पर 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 का इस्तेमाल करके 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> पास करें जिसमें यह जानकारी दिखानी है. ऐसा करने से, यह भी पक्का किया जा सकता है कि आपने कॉपीराइट की सही जानकारी दिखाई हो. साथ ही, आपने नतीजे से जुड़ी चेतावनियां भी दिखाई हों.

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

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

रास्ते के जियोकोड किए गए वेपॉइंट

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

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

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

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

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

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

रास्ते की जानकारी

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

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

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

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

  • name में इस बस, मेट्रो वगैरह का रूट मैप का पूरा नाम होता है. उदाहरण के लिए, "7 एवेन्यू एक्सप्रेस" या "14वीं स्ट्रीट क्रॉसटाउन".
  • 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 अन्य सभी वाहनों के लिए, यह टाइप दिखेगा.

Inspecting DirectionsResults

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 होते हैं.

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

अगर आपने Directions सेवा को वेपॉइंट के क्रम को ऑप्टिमाइज़ करने का निर्देश दिया है, तो उनका क्रम 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;

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;

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

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

  • Maps JavaScript API में, दिशा बताने वाली सेवा का इस्तेमाल करते समय, ज़्यादा से ज़्यादा 25 वेपॉइंट इस्तेमाल किए जा सकते हैं. इसके अलावा, शुरुआती जगह और मंज़िल की जानकारी भी दी जा सकती है. ये सीमाएं, Directions API (लेगसी) वेब सेवा के लिए भी लागू होती हैं.
  • Directions API (लेगसी) वेब सेवा के लिए, ग्राहकों को 25 वेपॉइंट के साथ-साथ शुरुआती और मंज़िल की जगह की जानकारी देने की अनुमति है.
  • Google Maps Platform Premium Plan के ग्राहकों को 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;

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;
उदाहरण देखें