Directions Service (लेगसी)

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

खास जानकारी

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

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

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

शुरू करना

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

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

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

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

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

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

यहां DirectionsRequest का एक सैंपल दिया गया है:

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

यात्रा के मोड

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

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

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

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

बस, मेट्रो वगैरह के विकल्प

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

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

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

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

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

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

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

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

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

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

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

{
  departureTime: Date,
  trafficModel: TrafficModel
}

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

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

ड्राइविंग के लिए रास्ते के निर्देशों के लिए, DirectionsRequest का एक सैंपल यहां दिया गया है:

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

यूनिट सिस्टम

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

  • UnitSystem.METRIC से पता चलता है कि मेट्रिक सिस्टम का इस्तेमाल किया जा रहा है. दूरी को किलोमीटर में दिखाया जाता है.
  • UnitSystem.IMPERIAL से पता चलता है कि इंपीरियल (इंग्लिश) सिस्टम का इस्तेमाल किया जा रहा है. दूरी को मील में दिखाया गया है.

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

निर्देशों के लिए क्षेत्र के हिसाब से बायस करना

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

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

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

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

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

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

Directions Geocoded Waypoints

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" दिखाता है, जिससे पता चलता है कि यह एक राजनैतिक इकाई है.

Directions Routes

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

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

DirectionsRoute एक ऑब्जेक्ट लिटरल है, जिसमें ये फ़ील्ड होते हैं:

  • legs[] में DirectionsLeg ऑब्जेक्ट का एक कलेक्शन होता है. इनमें से हर ऑब्जेक्ट में, दिए गए रास्ते में मौजूद दो जगहों के बीच के रास्ते की जानकारी होती है. हर वेपॉइंट या डेस्टिनेशन के लिए, एक अलग लेग मौजूद होगा. (बिना वेपॉइंट वाले रास्ते में सिर्फ़ एक DirectionsLeg होगा.) हर लेग में DirectionStep की एक सीरीज़ होती है.
  • waypoint_order में एक कलेक्शन होता है, जो तय किए गए रास्ते में किसी भी वेपॉइंट का क्रम दिखाता है. अगर DirectionsRequest को optimizeWaypoints: true पास किया गया था, तो इस कलेक्शन में बदला हुआ क्रम हो सकता है.
  • overview_path में LatLngs की एक कैटगरी होती है. यह कैटगरी, नतीजों में मिलने वाले निर्देशों के अनुमानित (स्मूद) पाथ को दिखाती है.
  • 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 JavaScript Date ऑब्जेक्ट के तौर पर तय किया गया समय.
    • text स्ट्रिंग के तौर पर बताया गया समय. समय, बस, मेट्रो वगैरह के स्टॉप के टाइम ज़ोन में दिखाया जाता है.
    • time_zone में इस स्टेशन का टाइम ज़ोन शामिल है. वैल्यू, टाइम ज़ोन का नाम होती है.इसे आईएएनए टाइम ज़ोन डेटाबेस में तय किया जाता है. उदाहरण के लिए, "America/New_York".
  • departure_time में, इस लेग के लिए रवाना होने का अनुमानित समय शामिल होता है. इसे Time ऑब्जेक्ट के तौर पर बताया जाता है. departure_time सिर्फ़ बस, मेट्रो वगैरह के रास्ते के लिए निर्देश पाने की सुविधा के लिए उपलब्ध है.
  • start_location में इस लेग के ऑरिजिन का LatLng शामिल होता है. Directions Web Service, शुरुआती और आखिरी पॉइंट पर परिवहन के सबसे नज़दीकी विकल्प (आम तौर पर सड़क) का इस्तेमाल करके, जगहों के बीच के रास्ते का हिसाब लगाती है. इसलिए, हो सकता है कि start_location, इस लेग के लिए दी गई शुरुआती जगह से अलग हो. उदाहरण के लिए, अगर कोई सड़क शुरुआती जगह के पास नहीं है, तो ऐसा हो सकता है.
  • end_location में, इस लेग के डेस्टिनेशन का LatLng शामिल होता है. DirectionsService, शुरुआती और आखिरी पॉइंट पर परिवहन के सबसे नज़दीकी विकल्प (आम तौर पर सड़क) का इस्तेमाल करके, जगहों के बीच के निर्देशों का हिसाब लगाता है. इसलिए, हो सकता है कि end_location, इस लेग के लिए दी गई मंज़िल से अलग हो. उदाहरण के लिए, अगर मंज़िल के पास कोई सड़क नहीं है.
  • start_address में, इस लेग की शुरुआत का पता होता है. यह पता, किसी व्यक्ति के लिए आसानी से पढ़ा जा सकने वाला होता है. आम तौर पर, यह मोहल्ले का पता होता है.

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

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

रास्ते की जानकारी देने वाले चरण

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

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

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

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

सार्वजनिक परिवहन से जुड़ी खास जानकारी

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

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

TransitDetails ऑब्जेक्ट में ये प्रॉपर्टी दिखती हैं:

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

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

TransitLine ऑब्जेक्ट में ये प्रॉपर्टी दिखती हैं:

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

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

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

वाहन किस तरह का है

VehicleType ऑब्जेक्ट में ये प्रॉपर्टी दिखती हैं:

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

DirectionsResults की जांच करना

किसी भी निर्देश के रिस्पॉन्स को पार्स करते समय, 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>

उदाहरण देखें

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

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

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

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

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

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

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

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

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

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

TypeScript

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

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

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

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

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

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

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

  if (!myroute) {
    return;
  }

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

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

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

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