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

संग्रह की मदद से व्यवस्थित रहें अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.

खास जानकारी

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

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

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

शुरुआत करना

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

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

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

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

कीमत

16 जुलाई, 2018 से, पैसे चुकाने के लिए इस्तेमाल किया जाने वाला नया प्लान, Maps, रास्तों, और जगहों पर लागू हो गया. '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 (वैकल्पिक) इलाके के कोड के बारे में बताता है, जिसे सीसीटीएलडी (टॉप लेवल डोमेन) के तौर पर बताया गया है और इसमें दो वर्णों की वैल्यू होती है. (ज़्यादा जानकारी के लिए, नीचे क्षेत्र के हिसाब से मापदंड तय करना देखें.)

नीचे 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 वैल्यू से अलग होता है ("उदाहरण के लिए, " ग्रेट ब्रिटेन" के लिए "जीबी").

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

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

function initMap() {
  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    center: chicago
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsRenderer.setMap(map);
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
    origin: start,
    destination: end,
    travelMode: 'DRIVING'
  };
  directionsService.route(request, function(result, status) {
    if (status == 'OK') {
      directionsRenderer.setDirections(result);
    }
  });
}

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

<div>
<strong>Start: </strong>
<select id="start" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
<strong>End: </strong>
<select id="end" onchange="calcRoute();">
  <option value="chicago, il">Chicago</option>
  <option value="st louis, mo">St Louis</option>
  <option value="joplin, mo">Joplin, MO</option>
  <option value="oklahoma city, ok">Oklahoma City</option>
  <option value="amarillo, tx">Amarillo</option>
  <option value="gallup, nm">Gallup, NM</option>
  <option value="flagstaff, az">Flagstaff, AZ</option>
  <option value="winona, az">Winona</option>
  <option value="kingman, az">Kingman</option>
  <option value="barstow, ca">Barstow</option>
  <option value="san bernardino, ca">San Bernardino</option>
  <option value="los angeles, ca">Los Angeles</option>
</select>
</div>

उदाहरण देखें

नीचे दिए गए उदाहरण में, सैन फ़्रांसिस्को, सैन फ़्रांसिस्को में हैट-ऐशबरी और ओशन बीच के बीच यात्रा के अलग-अलग तरीकों का इस्तेमाल किया गया है:

function initMap() {
  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  var haight = new google.maps.LatLng(37.7699298, -122.4469157);
  var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205);
  var mapOptions = {
    zoom: 14,
    center: haight
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsRenderer.setMap(map);
}

function calcRoute() {
  var selectedMode = document.getElementById('mode').value;
  var request = {
      origin: haight,
      destination: oceanBeach,
      // Note that JavaScript allows us to access the constant
      // using square brackets and a string value as its
      // "property."
      travelMode: google.maps.TravelMode[selectedMode]
  };
  directionsService.route(request, function(response, status) {
    if (status == 'OK') {
      directionsRenderer.setDirections(response);
    }
  });
}

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

<div>
<strong>Mode of Travel: </strong>
<select id="mode" onchange="calcRoute();">
  <option value="DRIVING">Driving</option>
  <option value="WALKING">Walking</option>
  <option value="BICYCLING">Bicycling</option>
  <option value="TRANSIT">Transit</option>
</select>
</div>

उदाहरण देखें

DirectionsRenderer, सिर्फ़ पॉलीलाइन और उससे जुड़े मार्कर को दिखाने का काम नहीं करता, बल्कि निर्देशों के टेक्स्ट वाले डिसप्ले को चरणों की सीरीज़ के तौर पर भी हैंडल कर सकता है. ऐसा करने के लिए, अपने DirectionsRenderer पर setPanel() को कॉल करें. इस जानकारी को दिखाने के लिए <div> को पास करें. ऐसा करने से, कॉपीराइट से जुड़ी सही जानकारी दिखाने के साथ-साथ इससे जुड़ी चेतावनियां भी दिखती हैं.

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

यह उदाहरण ऊपर दिखाए गए उदाहरण के जैसा है, लेकिन इसमें <div> पैनल शामिल है जिसमें निर्देश दिखाने हैं:

function initMap() {
  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    center: chicago
  }
  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsRenderer.setMap(map);
  directionsRenderer.setPanel(document.getElementById('directionsPanel'));
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
    origin:start,
    destination:end,
    travelMode: 'DRIVING'
  };
  directionsService.route(request, function(response, status) {
    if (status == 'OK') {
      directionsRenderer.setDirections(response);
    }
  });
}

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

<div id="map" style="float:left;width:70%;height:100%"></div>
<div id="directionsPanel" style="float:right;width:30%;height:100%"></div>

उदाहरण देखें

DirectionsResult ऑब्जेक्ट

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

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

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

दिशा के भौगोलिक कोड वाले वेपॉइंट

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

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

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

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

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

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

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

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

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

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

DirectionsStep एक ऑब्जेक्ट है, जो इन फ़ील्ड की मदद से काम करता है:

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

ट्रांज़िट विशिष्ट जानकारी

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

ट्रांज़िट विवरण

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

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

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

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

  • name में इस सार्वजनिक परिवहन का पूरा नाम है. जैसे, "7 Avenue एक्सप्रेस" या "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 अन्य सभी वाहन इस तरह के नहीं रहेंगे.

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

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

अहम जानकारी: अगर आप 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>

उदाहरण देखें

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

जैसा कि Directions में बताया गया है, पैदल चलने, साइकल चलाने या गाड़ी से जाने के लिए निर्देश पाने की सेवा का इस्तेमाल करके, वेपॉइंट (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;

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

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