खास जानकारी
DirectionsService
ऑब्जेक्ट का इस्तेमाल करके, निर्देशों का हिसाब लगाया जा सकता है. इसके लिए, कई तरह के परिवहन का इस्तेमाल किया जाता है. यह ऑब्जेक्ट, Google Maps API डायरेक्शन सर्विस
के साथ काम करता है.
इससे निर्देश पाने के लिए अनुरोध किया जाता है और बेहतर रास्ता दिखाया जाता है.
यात्रा का समय, ऑप्टिमाइज़ किया गया मुख्य वजह होती है. हालांकि, कई चीज़ों पर ध्यान दिया जा सकता है.
जैसे, दूरी, मोड़ों की संख्या वगैरह.
इन निर्देशों के नतीजों को खुद मैनेज करें या इन्हें रेंडर करने के लिए, DirectionsRenderer
ऑब्जेक्ट का इस्तेमाल करें.
दिशा-निर्देश के अनुरोध में शुरुआत की जगह या मंज़िल के बारे में बताते समय,
आप क्वेरी स्ट्रिंग (जैसे, "मुंबई, आईएल" या
"डारविन, एनएसडब्ल्यू, ऑस्ट्रेलिया"), LatLng
वैल्यू या
जगह ऑब्जेक्ट की जानकारी दे सकते हैं.
निर्देश सेवा, एक से ज़्यादा हिस्सों वाले निर्देश दे सकती है. इसके लिए, वेपॉइंट की सीरीज़ इस्तेमाल करती है. मैप पर, निर्देशों को पॉलीलाइन ड्रॉइंग के तौर पर या <div>
एलिमेंट में टेक्स्ट के तौर पर दी गई जानकारी के तौर पर दिखाया जाता है. उदाहरण के लिए, "विलियमबर्ग ब्रिज रैंप पर दाईं ओर घुमाएं".
रिपोर्ट का इस्तेमाल करने के बारे में जानकारी
Maps JavaScript एपीआई में निर्देश देने वाली सेवा इस्तेमाल करने से पहले, पक्का करें कि Google Cloud Console में निर्देश एपीआई उसी प्रोजेक्ट में चालू हो जिसमें आपने JavaScript JavaScript एपीआई सेट अप किया था.
चालू किए गए एपीआई की सूची देखने के लिए:
- Google Cloud Console पर जाएं.
- प्रोजेक्ट चुनें बटन पर क्लिक करें. इसके बाद, वही प्रोजेक्ट चुनें जिसे आपने Maps JavaScript एपीआई के लिए सेट अप किया था और खोलें पर क्लिक करें.
- डैशबोर्ड पर एपीआई की सूची में, निर्देश एपीआई देखें.
- अगर आपको सूची में एपीआई दिखता है, तो आप पूरी तरह से तैयार हैं. अगर एपीआई सूची में नहीं है, तो
इसे चालू करें:
- पेज पर सबसे ऊपर, लाइब्रेरी टैब दिखाने के लिए, एपीआई चालू करें चुनें. इसके अलावा, बाईं ओर दिए गए मेन्यू से, लाइब्रेरी चुनें.
- निर्देशों की एपीआई खोजें, फिर उसे नतीजों की सूची से चुनें.
- चालू करें को चुनें. यह प्रोसेस खत्म होने के बाद, डैशबोर्ड पर डायरेक्ट्री एपीआई, एपीआई की सूची में दिखता है.
कीमत और नीतियां
कीमत
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 एपीआई में, जगह की जानकारी देने वाली खोज, प्लेस खोज, और जगह की जानकारी अपने-आप पूरी होने की सुविधा से, जगह के आईडी पाए जा सकते हैं. प्लेस ऑटोकंप्लीट की मदद से जगह के आईडी का इस्तेमाल करने वाले उदाहरण के लिए, जगह का अपने-आप पूरा होना और निर्देश देखें.destination
(ज़रूरी है) उस आखिरी जगह के बारे में बताता है जहां तक निर्देशों को कैलकुलेट करना है. ये विकल्प ऊपर बताए गएorigin
फ़ील्ड के लिए दिए गए विकल्प जैसे ही हैं.travelMode
(ज़रूरी है) यह बताता है कि निर्देशों का हिसाब लगाते समय, यात्रा के किस मोड का इस्तेमाल करना चाहिए. नीचे यात्रा मोड में मान्य वैल्यू दी गई हैं.transitOptions
(ज़रूरी नहीं) उन मानों को तय करता है जो सिर्फ़ उन अनुरोधों पर लागू होते हैं जहांtravelMode
,TRANSIT
है. मान्य वैल्यू नीचे ट्रांज़िट विकल्प में दी गई हैं.drivingOptions
(ज़रूरी नहीं) उन मानों को तय करता है जो सिर्फ़ उन अनुरोधों पर लागू होते हैं जहांtravelMode
,DRIVING
है. सही वैल्यू, नीचे ड्राइविंग के विकल्प में दी गई हैं.unitSystem
(ज़रूरी नहीं) बताता है कि नतीजे दिखाते समय किस यूनिट सिस्टम का इस्तेमाल करना है. मान्य वैल्यू, नीचे दिए गए यूनिट सिस्टम में दी गई हैं.waypoints[]
(ज़रूरी नहीं)DirectionsWaypoint
की श्रेणी बताता है. वेपॉइंट, बताई गई जगह(जगहों) से रूट करके, रूट में बदलाव करते हैं. वेपॉइंट को लिटरल ऑब्जेक्ट के तौर पर बताया जाता है, जिसमें नीचे दिए गए फ़ील्ड होते हैं:location
से वेपॉइंट की जगह की जानकारी मिलती है. इसमेंLatLng
के तौर पर, जगह ऑब्जेक्ट याString
के तौर पर जगह दिखाई जाती है, जिसे वेब-जेड किया जाएगा.stopover
एक बूलियन है, जो यह दिखाता है कि वेपॉइंट, रास्ते पर एक स्टॉप है. इससे रास्ते को दो रास्तों में बांटा जा सकता है.
(वेपॉइंट के बारे में ज़्यादा जानने के लिए, नीचे दिए गए रकम के वेपॉइंट इस्तेमाल करना देखें.)
optimizeWaypoints
(ज़रूरी नहीं) यह बताता है किwaypoints
का इस्तेमाल करके जो रास्ता दिया गया है उसे बेहतर तरीके से वेपॉइंट को फिर से व्यवस्थित करके ऑप्टिमाइज़ किया जा सकता है. अगरtrue
, निर्देश सेवाwaypoint_order
फ़ील्ड में फिर से क्रम में लगाई गईwaypoints
जानकारी देगी.(ज़्यादा जानकारी के लिए, नीचे रास्तों में वेपॉइंट का इस्तेमाल करना देखें.)true
पर सेट होने परprovideRouteAlternatives
(ज़रूरी नहीं) बताता है कि निर्देश सेवा रिस्पॉन्स में एक से ज़्यादा रास्ते का विकल्प दे सकती है. ध्यान दें कि रूट के दूसरे विकल्प देने से, सर्वर से रिस्पॉन्स मिलने में लगने वाला समय बढ़ सकता है. यह सिर्फ़ उन अनुरोधों के लिए उपलब्ध है जिनमें इंटरमीडिएट वेपॉइंट नहीं होते.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 कवरेज की जानकारी देखें.
रेंडरिंग के बारे में निर्देश
route()
तरीके से
DirectionsService
को रास्ते के बारे में अनुरोध भेजने के लिए,
कॉलबैक ज़रूरी होता है. सेवा देने का अनुरोध पूरा होने पर,
इसे लागू किया जाता है. यह कॉलबैक रिस्पॉन्स में
DirectionsResult
और DirectionsStatus
कोड दिखाएगा.
निर्देश क्वेरी की स्थिति
DirectionsStatus
ये वैल्यू दिखा सकता है:
OK
बताता है कि जवाब में एक मान्यDirectionsResult
मौजूद है.NOT_FOUND
से पता चलता है कि अनुरोध के ऑरिजिन, डेस्टिनेशन या वेपॉइंट में से कम से कम एक जगह को वेब पते से कनेक्ट नहीं किया जा सका.ZERO_RESULTS
बताता है कि शुरुआत की जगह और मंज़िल के बीच कोई रास्ता नहीं मिला.MAX_WAYPOINTS_EXCEEDED
से पता चलता है किDirectionsRequest
में बहुत ज़्यादाDirectionsWaypoint
फ़ील्ड दिए गए हैं. पॉइंट बनाने की सीमाओं के बारे में जानने के लिए, नीचे दिया गया सेक्शन देखें.MAX_ROUTE_LENGTH_EXCEEDED
यह बताता है कि अनुरोध किया गया रास्ता बहुत लंबा है और इसे प्रोसेस नहीं किया जा सकता. यह गड़बड़ी तब होती है, जब ज़्यादा मुश्किल निर्देश दिए जाते हैं. वेपॉइंट, मोड़ या निर्देशों की संख्या कम करके देखें.INVALID_REQUEST
बताता है कि दिया गयाDirectionsRequest
अमान्य था. इस गड़बड़ी कोड की सबसे आम वजहों में ऐसे अनुरोध शामिल होते हैं जो मूल जगह या डेस्टिनेशन में मौजूद नहीं होते. इसके अलावा, इनमें वे ट्रांज़िट अनुरोध शामिल होते हैं जिनमें वेपॉइंट शामिल होते हैं.OVER_QUERY_LIMIT
यह बताता है कि वेबपेज ने तय समय के अंदर बहुत ज़्यादा अनुरोध भेजे हैं.REQUEST_DENIED
यह बताता है कि वेबपेज को निर्देश सेवा का इस्तेमाल करने की अनुमति नहीं है.UNKNOWN_ERROR
बताता है कि सर्वर की गड़बड़ी की वजह से, निर्देश पाने के अनुरोध को प्रोसेस नहीं किया जा सका. आपके दोबारा कोशिश करने पर, अनुरोध पूरा हो सकता है.
नतीजे को प्रोसेस करने से पहले, आपको यह पक्का करना होगा कि दिशा-निर्देश क्वेरी से मान्य नतीजे दिखाए गए हों.
DirectionsResult दिखाना
DirectionsResult
में निर्देश क्वेरी का नतीजा होता है, जिसे आप या तो खुद हैंडल कर सकते हैं या DirectionsRenderer
ऑब्जेक्ट को पास कर सकते हैं. यह नतीजा मैप पर अपने-आप नतीजे दिखा सकता है.
DirectionsRenderer
का इस्तेमाल करके DirectionsResult
दिखाने के लिए, आपको ये काम करने होंगे:
DirectionsRenderer
ऑब्जेक्ट बनाएं.- पास किए गए मैप से जोड़ने के लिए, रेंडरर पर
setMap()
को कॉल करें. - रेंडरर पर
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"
से पता चलता है कि कोई गड़बड़ी नहीं हुई है. इसका पता पार्स हो गया है और कम से कम एक वेब पेज मिला है."ZERO_RESULTS"
से यह पता चलता है कि इंट्रानेट सफल रहा, लेकिन कोई परिणाम नहीं मिला. ऐसा तब हो सकता है, जब एन्कोडर कोaddress
की मदद से पास नहीं किया गया था.
-
partial_match
से यह पता चलता है कि इंट्रानेट ने मूल अनुरोध के लिए कोई सटीक मिलान नहीं दिया था, हालांकि यह अनुरोध किए गए पते के एक हिस्से से मेल खाता था. हो सकता है कि आप गलत स्पेलिंग के लिए किए गए मूल अनुरोध और/या अधूरे पते की जांच करना चाहें.आंशिक मिलान अक्सर उन मोहल्ले के पतों के लिए होते हैं जो उस इलाके में मौजूद नहीं होते हैं जिसे आप अनुरोध में पास करते हैं. आंशिक मिलानों का जवाब तब भी दिया जा सकता है, जब कोई अनुरोध एक ही इलाके में दो या उससे ज़्यादा जगहों से मेल खाता है. उदाहरण के लिए, "Hillpar St, Bristol, UK" हेनरी स्ट्रीट और हेनरीटा स्ट्रीट, दोनों के लिए एक आंशिक मिलान लौटाएगा. ध्यान दें कि अगर किसी अनुरोध में पते की गलत स्पेलिंग शामिल होती है, तो जियोकोडिंग सेवा किसी दूसरे पते का सुझाव दे सकती है. इस तरह से ट्रिगर किए गए सुझावों को भी आंशिक मिलान के रूप में चिह्नित किया जाएगा.
place_id
किसी जगह का यूनीक आइडेंटिफ़ायर होता है. इसका इस्तेमाल, अन्य Google API के साथ किया जा सकता है. उदाहरण के लिए, आप Google Places API लाइब्रेरी के साथ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
हो. - यह अनुरोध खास तौर पर ड्राइविंग दिशा निर्देशों के लिए है—
driving
कोmode
पर सेट किया गया है. 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
, किसी रास्ते पर पड़ने वाली सबसे
परमाणु इकाई है. इसमें एक ही चरण, यात्रा से जुड़े खास निर्देश शामिल होते हैं. उदाहरण के लिए, "बाएं मुड़ें डब्ल्यू. चौथा सेंट" इस चरण से न सिर्फ़ निर्देश का पता चलता है, बल्कि दूरी और कुल समय की जानकारी भी मिलती है. यह जानकारी इस चरण से मेल खाती है.
उदाहरण के लिए, "I-80 वेस्ट पर मर्ज करें" के रूप में दिखाए गए चरण में "37 मील" और "40 मिनट" की अवधि शामिल हो सकती है, जो दिखाती है कि अगला चरण इस चरण से 37 मील/40 मिनट है.
'दिशा-निर्देश' सेवा का इस्तेमाल करके सार्वजनिक परिवहन के निर्देश खोजने पर,
'जानकारी' कैटगरी में transit
ऑब्जेक्ट के तौर पर, सार्वजनिक परिवहन की खास जानकारी शामिल की जाएगी. अगर निर्देशों में यात्रा के लिए एक से ज़्यादा मोड शामिल हैं, तो steps[]
कैटगरी में पैदल या गाड़ी से जाने के लिए सिलसिलेवार निर्देश दिए जाएंगे.
उदाहरण के लिए, पैदल चलने के चरण में शुरू और खत्म होने की जगहों से निर्देश शामिल होंगे:
"Ins Ave और Fitch St तक चलें". इस चरण में, steps[]
श्रेणी में दिए गए रास्ते के लिए, पैदल चलने के पूरे निर्देश शामिल होंगे. जैसे: "उत्तर-पश्चिम दिशा की ओर बढ़ो", "एरियलस वॉकर पर बाएं जाओ", और
"इंनेस ऐवे पर बाईं ओर घुमाएं".
DirectionsStep
एक ऑब्जेक्ट लिटरल है जिसमें ये फ़ील्ड शामिल हैं:
instructions
में टेक्स्ट स्ट्रिंग के अंदर, इस चरण के लिए निर्देश शामिल हैं.distance
में,Distance
ऑब्जेक्ट के तौर पर, अगले चरण तक इस चरण में तय की गई दूरी शामिल होती है. (ऊपरDirectionsLeg
में ब्यौरा देखें.) अगर दूरी के बारे में जानकारी नहीं है, तो यह फ़ील्ड तय नहीं हो सकता.duration
में अगले चरण तक,Duration
ऑब्जेक्ट के तौर पर चरण पूरा करने के लिए लगने वाले समय का अनुमान शामिल होता है. (ऊपरDirectionsLeg
में जानकारी देखें.) अगर अवधि की जानकारी नहीं है, तो यह फ़ील्ड तय नहीं हो सकता.start_location
में, इस चरण के शुरुआत की जगह का जियोकोड किया गयाLatLng
शामिल है.end_location
में इस चरण के आखिरी पॉइंट काLatLng
शामिल होता है.polyline
में एकpoints
ऑब्जेक्ट होता है, जिसमें एन्कोड किया गया पॉलीलाइन होता है, जो इस चरण को दिखाता है. यह पॉलीलाइन, चरण का अनुमानित (स्मूद) पाथ है.steps[]
DirectionsStep
ऑब्जेक्ट के बारे में जानकारी देता है. इसमें, सार्वजनिक परिवहन के निर्देश के मुताबिक, पैदल चलने या गाड़ी चलाने से जुड़े निर्देश शामिल होते हैं. उप-चरणों का इस्तेमाल सिर्फ़ सार्वजनिक परिवहन के निर्देशों के लिए किया जा सकता है.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
उपलब्ध होने पर, यह एक ही स्टॉप से इतने समय के अंतर पर रवाना होने के बीच के सेकंड की अनुमानित संख्या के बारे में बताता है. उदाहरण के लिए, अगर आपकी बस 600 है, तोheadway
के लिए आपको बस दस मिनट का इंतज़ार करना होगा.line
में एकTransitLine
ऑब्जेक्ट लिटरल है, जिसमें इस चरण में इस्तेमाल की गई ट्रांज़िट लाइन की जानकारी है.TransitLine
,TransitLine
रेफ़रंस दस्तावेज़ में बताई गई अन्य प्रॉपर्टी के साथ लाइन का नाम और ऑपरेटर दिखाता है.num_stops
में इस चरण के दौरान स्टॉप की संख्या मौजूद है. इसमें, पहुंचने का स्टॉप शामिल है, लेकिन जाने वाली फ़्लाइट का स्टॉप नहीं. उदाहरण के लिए, अगर आपके निर्देशों में स्टॉप A से निकलना, स्टॉप B और C से गुज़रना, और स्टॉप D पर पहुंचना शामिल है, तोnum_stops
3 देगा.
ट्रांज़िट लाइन
TransitLine
ऑब्जेक्ट इन प्रॉपर्टी को दिखाता है:
name
में इस ट्रांज़िट लाइन का पूरा नाम है. उदाहरण के लिए, "7 Avenue Express" या "14th St Crosstown".short_name
में इस ट्रांज़िट लाइन का छोटा नाम है. आम तौर पर, यह एक लाइन नंबर होता है, जैसे कि "2" या "M14".agencies
एक कैटगरी है जिसमें एकTransitAgency
ऑब्जेक्ट होता है.TransitAgency
ऑब्जेक्ट, इस प्रॉपर्टी के ऑपरेटर के बारे में जानकारी देता है. इसमें, ये प्रॉपर्टी भी शामिल हैं:name
में सार्वजनिक परिवहन एजेंसी का नाम है.phone
में सार्वजनिक परिवहन एजेंसी का फ़ोन नंबर है.url
में सार्वजनिक परिवहन एजेंसी का यूआरएल है.
ध्यान दें: अगर आप
DirectionsRenderer
ऑब्जेक्ट का इस्तेमाल करने के बजाय, सार्वजनिक परिवहन के निर्देशों को मैन्युअल तरीके से रेंडर कर रहे हैं, तो आपको यात्रा के नतीजों की सेवा देने वाली सार्वजनिक परिवहन एजेंसियों के नाम और यूआरएल दिखाने होंगे.url
में सार्वजनिक परिवहन एजेंसी के दिए गए, इस ट्रांज़िट लाइन का यूआरएल है.icon
में इस लाइन से जुड़े आइकॉन का यूआरएल शामिल है. ज़्यादातर शहर, सामान्य आइकॉन का इस्तेमाल करेंगे. ये आइकॉन, वाहन के टाइप के हिसाब से अलग-अलग होते हैं. कुछ ट्रांज़िट लाइन, जैसे कि न्यूयॉर्क सबवे सिस्टम में उस लाइन के लिए खास आइकॉन होते हैं.color
में आम तौर पर, इस सार्वजनिक परिवहन के साइनेज में इस्तेमाल होने वाला रंग शामिल होता है. रंग को हेक्स स्ट्रिंग के रूप में दिखाया जाएगा, जैसे कि: #FF0033.text_color
में टेक्स्ट का रंग शामिल किया जाता है. आम तौर पर, इसका इस्तेमाल लाइन के साइनेज के लिए किया जाता है. रंग को हेक्स स्ट्रिंग के रूप में तय किया जाएगा.vehicle
में एकVehicle
ऑब्जेक्ट होता है, जिसमें ये प्रॉपर्टी शामिल होती हैं:name
में इस रास्ते पर मौजूद वाहन का नाम है. जैसे "सबवे."type
में इस लाइन में इस्तेमाल किए गए वाहन का टाइप बताया गया है. इस्तेमाल की जा सकने वाली वैल्यू की पूरी सूची देखने के लिए, वाहन के टाइप से जुड़े दस्तावेज़ देखें.icon
में उस आइकॉन का यूआरएल होता है जो आम तौर पर इस वाहन टाइप से जुड़ा होता है.- स्थानीय परिवहन साइनेज के आधार पर,
local_icon
में वाहन के टाइप से जुड़े आइकॉन का यूआरएल शामिल होता है.
वाहन का प्रकार
VehicleType
ऑब्जेक्ट से ये प्रॉपर्टी का पता चलता है:
वैल्यू | परिभाषा |
---|---|
VehicleType.RAIL |
रेल. |
VehicleType.METRO_RAIL |
लाइट रेल ट्रांज़िट. |
VehicleType.SUBWAY |
अंडरग्राउंड लाइट रेल. |
VehicleType.TRAM |
ग्राउंड लाइट रेल के ऊपर. |
VehicleType.MONORAIL |
मोनोरेल. |
VehicleType.HEAVY_RAIL |
भारी रेल. |
VehicleType.COMMUTER_TRAIN |
यात्री रेल. |
VehicleType.HIGH_SPEED_TRAIN |
हाई स्पीड ट्रेन. |
VehicleType.BUS |
बस. |
VehicleType.INTERCITY_BUS |
एक शहर से दूसरे शहर जाने वाली बस. |
VehicleType.TROLLEYBUS |
ट्रॉलीबस. |
VehicleType.SHARE_TAXI |
शेयर टैक्सी एक तरह की बस है. इसकी मदद से रूट पर यात्रियों को छोड़ा और चुना जा सकता है. |
VehicleType.FERRY |
फ़ेरी. |
VehicleType.CABLE_CAR |
केबल की मदद से चलने वाला वाहन, जो आम तौर पर ज़मीन पर चलता है. एरियल केबल कारें VehicleType.GONDOLA_LIFT हो सकती हैं. |
VehicleType.GONDOLA_LIFT |
एरियल केबल कार. |
VehicleType.FUNICULAR |
ऐसा वाहन जिसमें केबल से खड़ी चढ़ाई वाला पुल बनाया जाता है. फ़्यूनिक्यूलर में आम तौर पर दो कार होती हैं. हर कार एक कार के काउंटरवेट के तौर पर काम करती है. |
VehicleType.OTHER |
अन्य सभी वाहन इस तरह की जानकारी दिखाएंगे. |
Directions के नतीजों की जांच करना
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
होते हैं.
निर्देश सेवा डिफ़ॉल्ट रूप से, दिए गए वेपॉइंट से होकर जाने वाले रास्ते की गिनती करती है. अगर आप चाहें, तो 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 एपीआई में, निर्देश देने वाली सेवा का इस्तेमाल करते समय, ज़्यादा से ज़्यादा 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;