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

खास जानकारी

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

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

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

YouTube पर शुरुआत करना

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

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

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

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

कीमत

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

नीतियां

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

दिशा-निर्देशों के लिए अनुरोध

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

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

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

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

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

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

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

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

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

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

  • optimizeWaypoints (ज़रूरी नहीं) बताता है कि waypoints दिए गए रास्ते का इस्तेमाल करके, वेपॉइंट को ज़्यादा बेहतर क्रम में व्यवस्थित करके ऑप्टिमाइज़ किया जा सकता है. अगर true, निर्देश देने वाली सेवा, क्रम में लगाई गई waypoints को waypoint_order फ़ील्ड में दिखाएगी.(ज़्यादा जानकारी के लिए, नीचे दिए गए रूट में वेपॉइंट का इस्तेमाल करना देखें.)
  • true पर सेट किए जाने पर (ज़रूरी नहीं) यह बताता है कि निर्देश देने वाली सेवा, जवाब में एक से ज़्यादा रास्तों का विकल्प दे सकती है.provideRouteAlternatives ध्यान दें कि रूट के विकल्प देने से सर्वर से रिस्पॉन्स मिलने का समय बढ़ सकता है. यह सिर्फ़ उन अनुरोधों के लिए उपलब्ध है जिनमें इंटरमीडिएट वेपॉइंट नहीं होते.
  • जब true पर सेट किया जाता है, तो avoidFerries (ज़रूरी नहीं) यह बताता है कि अगर संभव हो, तो आपके दिए गए रास्ते(रास्ते) से फ़ेरी से बचना चाहिए.
  • जब true पर सेट किया जाता है, तो avoidHighways (ज़रूरी नहीं) यह बताता है कि अगर मुमकिन हो, तो आपके दिए गए रास्ते में, मुख्य हाइवे दिखने से बचें.
  • true पर सेट किए गए avoidTolls (ज़रूरी नहीं) से पता चलता है कि आपके दिए गए रास्ते में, टोल रोड से बचना चाहिए.
  • 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/ लोड करते हैं, इसलिए यह अमेरिका का एक अन्य डोमेन सेट करता है.) अगर किसी ऐसे डोमेन से बूटस्ट्रैप लोड किया जाता है जो Google पर काम करता है, तो आपको उस डोमेन से प्रभावित नतीजे मिलेंगे. उदाहरण के लिए, "सैन फ़्रांसिस्को" के लिए की गई खोज, http://maps.google.es/ (स्पेन) के लोड होने वाले ऐप्लिकेशन (https://maps.googleapis.com/) के लोड होने वाले ऐप्लिकेशन से अलग नतीजे दिखा सकती है.

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

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

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

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

रेंडरिंग के लिए निर्देश

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

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

Directions का नतीजा दिखाना

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

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

  1. DirectionsRenderer ऑब्जेक्ट बनाएं.
  2. पास किए गए मैप से जोड़ने के लिए, रेंडरर पर setMap() को कॉल करें.
  3. ऊपर बताए गए तरीके से DirectionsResult को पास करते हुए, रेंडर करने वाले पर setDirections() को कॉल करें. रेंडरर 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 पैरामीटर का इस्तेमाल करके, भाषा की जानकारी दी जाएगी. (ज़्यादा जानकारी के लिए, स्थानीय भाषा बदलना देखें.) ट्रांज़िट दिशा-निर्देशों के मामले में, वह समय उस ट्रांज़िट समय के समय क्षेत्र में दिखाया जाएगा.

यह उदाहरण ऊपर दिखाए गए तरीके से मिलता-जुलता है, लेकिन दिशा-निर्देश दिखाने के लिए <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>

उदाहरण देखें

निर्देश से जुड़ा ऑब्जेक्ट

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

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

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

निर्देश वाले वेकोड किए गए वेपॉइंट

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

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

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

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

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

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

दिशा-निर्देश वाले रास्ते

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

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

DirectionsRoute एक ऑब्जेक्ट है, जिसमें इन फ़ील्ड को शामिल किया गया है:

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

दिशा निर्देश पैर

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

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

DirectionsLeg एक ऑब्जेक्ट है, जिसे इन फ़ील्ड में बांटा गया है:

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

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

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

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

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

    • value सेकंड में कुल समय दिखाता है.
    • text में कुल समय का स्ट्रिंग प्रतिनिधित्व होता है.

    अगर अवधि की जानकारी नहीं है, तो ये फ़ील्ड तय नहीं किए जा सकते.

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

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

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

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

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

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

निर्देश पाने का तरीका

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

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

DirectionsStep एक ऑब्जेक्ट है, जिसे इन फ़ील्ड में बांटा गया है:

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

ट्रांज़िट से जुड़ी खास जानकारी

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

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

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

  • arrival_stop में TransitStop एक ऑब्जेक्ट है, जो इन प्रॉपर्टी के साथ आने वाले स्टेशन/स्टॉप का प्रतिनिधित्व करता है:
    • name ट्रांज़िट स्टेशन/स्टॉप का नाम. जैसे "यूनियन स्क्वेयर".
    • location ट्रांज़िट स्टेशन/स्टॉप वाली जगह है, जिसे LatLng दिखाया गया है.
  • departure_stop में एक TransitStop ऑब्जेक्ट होता है, जो डिपार्चर स्टेशन/स्टॉप को दिखाता है.
  • arrival_time के पहुंचने का समय Time है. इसमें तीन प्रॉपर्टी होती हैं:
    • value JavaScript Date ऑब्जेक्ट के तौर पर बताया गया समय.
    • स्ट्रिंग के तौर पर text बार बताया गया. वह समय ट्रांज़िट स्टॉप के समय क्षेत्र में दिखाया जाता है.
    • time_zone में इस स्टेशन का समय क्षेत्र शामिल है. वैल्यू में, उस समय क्षेत्र का नाम बताया गया है जिसके बारे में IANA टाइम ज़ोन डेटाबेस में बताया गया है. जैसे, "अमेरिका/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 में इस पंक्ति वाले वाहन का नाम होता है. जैसे "सबवे."
    • type में इस तरह की गाड़ी का टाइप शामिल है. इस्तेमाल की जा सकने वाली वैल्यू की पूरी सूची देखने के लिए, वाहन का टाइप दस्तावेज़ देखें.
    • icon में आम तौर पर, इस तरह के वाहन के आइकॉन से जुड़ा यूआरएल शामिल होता है.
    • local_icon में इस वाहन से जुड़े आइकॉन का यूआरएल है. यह आइकॉन, स्थानीय परिवहन के साइनेज के आधार पर दिखाया जाता है.

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

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

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

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

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

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

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

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

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

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

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

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

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

function calcRoute() {

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

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

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

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

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

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

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

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

उदाहरण देखें

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

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

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

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

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

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

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

TypeScript

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

  directionsRenderer.setMap(map);

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

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

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

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

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

      summaryPanel.innerHTML = "";

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

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

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

JavaScript

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

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

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

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

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

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

      summaryPanel.innerHTML = "";

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

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

window.initMap = initMap;
index.js

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

इस्तेमाल करने की ये सीमाएं और पाबंदियां लागू हैं:

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

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

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

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

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

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

TypeScript

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

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

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

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

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

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

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

  if (!myroute) {
    return;
  }

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

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

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

JavaScript

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

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

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

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

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

  if (!myroute) {
    return;
  }

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

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

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

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