Directions Service

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

खास जानकारी

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

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

रास्ता दिखाने वाली सेवा, कई वेपॉइंट का इस्तेमाल करके, रास्ते की जानकारी को कई हिस्सों में बांटकर दिखा सकती है. रास्ते को मैप पर पॉलीलाइन ड्राइंग के तौर पर दिखाया जाता है. इसके अलावा, इसे <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 को कॉल करें. इसके लिए, DirectionsRequest ऑब्जेक्ट लिटरल पास करें. इसमें इनपुट शब्द और जवाब मिलने पर लागू होने वाली कॉलबैक विधि शामिल होती है.DirectionsService.route()

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

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

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

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

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

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

टेक्स्ट के तौर पर निर्देश, ब्राउज़र की पसंदीदा भाषा की सेटिंग का इस्तेमाल करके दिए जाएंगे. इसके अलावा, 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 और इससे ऊपर के वर्शन के लिए, 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: कुल किराया, ऊपर बताई गई मुद्रा में.

पैरों की दिशा

ध्यान दें: लेगसी 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 the time specified as a JavaScript Date object.
    • 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 ऑब्जेक्ट के ज़रिए दिखाई जाती हैं. इन्हें TransitDetails की प्रॉपर्टी के तौर पर दिखाया जाता है.DirectionsStep TransitDetails ऑब्जेक्ट से, TransitStop, TransitLine, TransitAgency, और VehicleType ऑब्जेक्ट के बारे में ज़्यादा जानकारी ऐक्सेस की जा सकती है. इसके बारे में यहां बताया गया है.

ट्रांज़िट की जानकारी

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

  • arrival_stop में एक TransitStop ऑब्जेक्ट होता है. यह ऑब्जेक्ट, पहुंचने वाले स्टेशन/स्टॉप को दिखाता है. इसमें ये प्रॉपर्टी होती हैं:
    • name बस, मेट्रो वगैरह के स्टेशन/स्टॉप का नाम. जैसे "यूनियन स्क्वेयर" पर है.
    • location ट्रांज़िट स्टेशन/स्टॉप की जगह की जानकारी, जिसे LatLng के तौर पर दिखाया गया है.
  • departure_stop में TransitStop ऑब्जेक्ट होता है. यह ऑब्जेक्ट, यात्रा शुरू होने वाले स्टेशन/स्टॉप के बारे में बताता है.
  • arrival_time में पहुंचने का समय होता है. इसे Time ऑब्जेक्ट के तौर पर दिखाया जाता है. इसमें तीन प्रॉपर्टी होती हैं:
    • value the time specified as a JavaScript Date object.
    • 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 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 की जांच करते हैं. साथ ही, हम उस चरण के लिए निर्देश वाले टेक्स्ट के साथ 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 में दिए गए निर्देशों के मुताबिक, पैदल, साइकल से या ड्राइविंग के दिशा-निर्देशों के लिए, Directions सेवा का इस्तेमाल करके रास्ते तय करते समय, waypoints (DirectionsWaypoint टाइप के) भी तय किए जा सकते हैं. सार्वजनिक परिवहन के निर्देशों के लिए, वेपॉइंट उपलब्ध नहीं हैं. वेपॉइंट की मदद से, अन्य जगहों के रास्ते का हिसाब लगाया जा सकता है. ऐसे में, लौटाया गया रास्ता दिए गए वेपॉइंट से होकर गुज़रता है.

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

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

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

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

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

रास्ते को खींचकर छोड़ने की सुविधा

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

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

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

यहां दिए गए कोड में, ऑस्ट्रेलिया के पश्चिमी तट पर मौजूद पर्थ से पूर्वी तट पर मौजूद सिडनी तक की यात्रा दिखाई गई है. यह कोड, 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
उदाहरण देखें

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