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

खास जानकारी

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

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

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

रिपोर्ट का इस्तेमाल करना

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

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

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

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

कीमत

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

नीतियां

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

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

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

Maps JavaScript API में निर्देशों का इस्तेमाल करने के लिए, DirectionsService टाइप का ऑब्जेक्ट बनाएं और DirectionsService.route() को कॉल करके, निर्देश सेवा को अनुरोध भेजें. साथ ही, इसे DirectionsRequest ऑब्जेक्ट लिटरल के तौर पर पास करें, जिसमें इनपुट शर्तें और रिस्पॉन्स मिलने पर एक कॉलबैक तरीका शामिल हो.

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

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

इन फ़ील्ड से जुड़ी जानकारी नीचे दी गई है:

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

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

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

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

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

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

निर्देश से जुड़े नतीजे दिखाए जा रहे हैं

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>

उदाहरण देखें

निर्देश से जुड़े नतीजे पाने वाला ऑब्जेक्ट

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

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

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

जियोकोड किए गए वेपॉइंट

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

function calcRoute() {

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

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

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

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

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

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

एचटीएमएल के मुख्य हिस्से में:

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

उदाहरण देखें

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

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

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

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

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

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

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

JavaScript

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

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

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

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

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

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

      summaryPanel.innerHTML = "";

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

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

window.initMap = initMap;

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

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

  • Maps JavaScript API में निर्देश सेवा का इस्तेमाल करते समय, ज़्यादा से ज़्यादा 25 वेपॉइंट हो सकते हैं. साथ ही, इसमें ऑरिजिन और डेस्टिनेशन की जानकारी भी शामिल होती है. दिशा-निर्देश एपीआई वेब सेवा के लिए भी ये सीमाएं एक जैसी होती हैं.
  • निर्देशों एपीआई वेब सेवा के लिए, ग्राहकों को 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;
उदाहरण देखें

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