खास जानकारी
DirectionsService
ऑब्जेक्ट का इस्तेमाल करके, परिवहन के अलग-अलग तरीकों का इस्तेमाल करके, रास्ते की जानकारी
कैलकुलेट की जा सकती है. यह ऑब्जेक्ट, Google Maps API निर्देश सेवा से संपर्क करता है.
इससे रास्ते की जानकारी पाने के अनुरोध मिलते हैं और यह एक बेहतर पाथ देता है.
यात्रा में लगने वाले समय को ऑप्टिमाइज़ करने की प्रोसेस, सबसे अहम है. हालांकि, अन्य चीज़ों को ध्यान में रखा जा सकता है, जैसे कि दूरी, मोड़ों की संख्या वगैरह.
इन निर्देशों के नतीजों को खुद मैनेज किया जा सकता है या इन नतीजों को रेंडर करने के लिए, DirectionsRenderer
ऑब्जेक्ट का इस्तेमाल किया जा सकता है.
निर्देश के अनुरोध में, ऑरिजिन या डेस्टिनेशन की जानकारी देते समय, क्वेरी स्ट्रिंग (जैसे, "मुंबई, आईएल" या
"डारविन, एनएसडब्ल्यू, ऑस्ट्रेलिया"), LatLng
वैल्यू या जगह ऑब्जेक्ट की जानकारी दी जा सकती है.
निर्देश सेवा, वेपॉइंट की एक सीरीज़ का इस्तेमाल करके, कई हिस्सों में
दिशा-निर्देश दिखा सकती है. दिशा-निर्देश, मैप पर रास्ता दिखाने वाली पॉलीलाइन के तौर पर या <div>
एलिमेंट में टेक्स्ट वाले ब्यौरे की सीरीज़ के तौर पर दिखाए जाते हैं (उदाहरण के लिए,
"विलियमबर्ग ब्रिज रैंप पर दाएं मुड़ें").
रिपोर्ट का इस्तेमाल करना
Maps JavaScript API में निर्देश सेवा का इस्तेमाल करने से पहले, सबसे पहले यह पक्का करें कि Google Cloud Console में निर्देश API चालू किया गया हो. यह भी पक्का करें कि यह एपीआई उसी प्रोजेक्ट में चालू हो जिसे आपने Maps JavaScript API के लिए सेट अप किया है.
चालू एपीआई की सूची देखने के लिए:
- Google Cloud Console पर जाएं.
- प्रोजेक्ट चुनें बटन पर क्लिक करें. इसके बाद, उसी प्रोजेक्ट को चुनें जिसे आपने Maps JavaScript API के लिए सेट अप किया है और खोलें पर क्लिक करें.
- डैशबोर्ड पर एपीआई की सूची में, दिशा-निर्देश एपीआई खोजें.
- अगर आपको सूची में एपीआई दिखता है, तो इसका मतलब है कि अब आप इसे इस्तेमाल करने के लिए तैयार हैं. अगर एपीआई सूची में नहीं है,
तो उसे चालू करें:
- लाइब्रेरी टैब को दिखाने के लिए, पेज पर सबसे ऊपर मौजूद एपीआई चालू करें को चुनें. इसके अलावा, बाईं ओर दिए गए मेन्यू से, लाइब्रेरी चुनें.
- दिशा-निर्देश एपीआई खोजें. इसके बाद, नतीजों की सूची में से इसे चुनें.
- चालू करें को चुनें. प्रोसेस पूरी होने के बाद, डैशबोर्ड पर एपीआई की सूची में दिशा-निर्देश एपीआई दिखता है.
कीमत और नीतियां
कीमत
'मैप, रूट, और जगहें' के लिए 16 जुलाई, 2018 से 'जितना इस्तेमाल करें, सिर्फ़ उतने पैसे चुकाएं' वाली कीमत तय करने की नई योजना लागू की गई है. JavaScript निर्देश सेवा के अपने इस्तेमाल के लिए नई कीमतों और इस्तेमाल की सीमाओं के बारे में ज़्यादा जानने के लिए, निर्देश एपीआई के लिए इस्तेमाल और बिलिंग देखें.
नीतियां
निर्देश सेवा का इस्तेमाल, दिशा-निर्देश एपीआई के लिए बताई गई नीतियों के हिसाब से होना चाहिए.
दिशा-निर्देशों के अनुरोध
निर्देश सेवा को ऐक्सेस करना एसिंक्रोनस होता है, क्योंकि Google Maps API को बाहरी सर्वर को कॉल करने की
ज़रूरत होती है. इसलिए, अनुरोध पूरा होने पर उसे लागू करने के लिए, आपको कॉलबैक वाला तरीका पास करना होगा. इस
कॉलबैक तरीके को नतीजा(नतीजे) प्रोसेस करना चाहिए. ध्यान रखें कि
निर्देश सेवा अलग-अलग routes[]
की कैटगरी में, एक से ज़्यादा संभावित यात्रा की योजना
दिखा सकती है.
Maps JavaScript API में निर्देशों का इस्तेमाल करने के लिए,
DirectionsService
टाइप का ऑब्जेक्ट बनाएं और
DirectionsService.route()
को कॉल करके,
निर्देश सेवा को अनुरोध भेजें. साथ ही, इसे
DirectionsRequest
ऑब्जेक्ट लिटरल
के तौर पर पास करें, जिसमें इनपुट शर्तें और
रिस्पॉन्स मिलने पर एक कॉलबैक तरीका शामिल हो.
DirectionsRequest
ऑब्जेक्ट लिटरल में ये फ़ील्ड
शामिल होते हैं:
{ origin: LatLng | String | google.maps.Place, destination: LatLng | String | google.maps.Place, travelMode: TravelMode, transitOptions: TransitOptions, drivingOptions: DrivingOptions, unitSystem: UnitSystem, waypoints[]: DirectionsWaypoint, optimizeWaypoints: Boolean, provideRouteAlternatives: Boolean, avoidFerries: Boolean, avoidHighways: Boolean, avoidTolls: Boolean, region: String }
इन फ़ील्ड से जुड़ी जानकारी नीचे दी गई है:
origin
(ज़रूरी है) उस जगह की जानकारी देता है जहां से रास्ते की गिनती करनी है. इस वैल्यू कोString
(जैसे, "शिकागो, आईएल") के तौर पर दिखाया जा सकता है. इसेLatLng
की वैल्यू या जगह ऑब्जेक्ट के तौर पर दिखाया जा सकता है. अगर आप जगह ऑब्जेक्ट का इस्तेमाल करते हैं, तो आप जगह का आईडी, क्वेरी स्ट्रिंग याLatLng
जगह की जानकारी दे सकते हैं. Maps JavaScript API में जियोकोडिंग, जगह से जुड़ी खोज, और जगह ऑटोकंप्लीट की सुविधा से जगह के आईडी फिर से हासिल किए जा सकते हैं. जगह के ऑटोकंप्लीट की सुविधा से जगह के आईडी इस्तेमाल करने का उदाहरण देखने के लिए, जगह की जानकारी अपने-आप पूरा होना और निर्देश देखें.destination
(ज़रूरी है) उस आखिरी जगह की जानकारी देता है जहां तक पहुंचने के लिए निर्देशों की गिनती करनी है. ये विकल्प, ऊपर बताए गएorigin
फ़ील्ड के लिए दिए गए हैं.travelMode
(ज़रूरी है) से पता चलता है कि रास्ते की जानकारी देते समय, यात्रा के किस साधन का इस्तेमाल करना चाहिए. मान्य वैल्यू, नीचे ट्रैवल मोड में बताई गई हैं.transitOptions
(ज़रूरी नहीं है) से ऐसी वैल्यू का पता चलता है जो सिर्फ़ उन अनुरोधों पर लागू होती हैं जहांtravelMode
,TRANSIT
है. मान्य वैल्यू के बारे में नीचे, बस, मेट्रो वगैरह के विकल्प में बताया गया है.drivingOptions
(ज़रूरी नहीं है) से ऐसी वैल्यू का पता चलता है जो सिर्फ़ उन अनुरोधों पर लागू होती हैं जहांtravelMode
,DRIVING
है. मान्य वैल्यू के बारे में नीचे ड्राइविंग विकल्प में बताया गया है.unitSystem
(ज़रूरी नहीं है) से पता चलता है कि नतीजे दिखाने के लिए किस यूनिट सिस्टम का इस्तेमाल करना है. मान्य वैल्यू नीचे यूनिट सिस्टम में दी गई हैं.waypoints[]
(ज़रूरी नहीं है)DirectionsWaypoint
की कैटगरी के बारे में बताता है. वेपॉइंट, किसी रूट को तय की गई जगह(जगहों) से रूट करके उसमें बदलाव करते हैं. वेपॉइंट को ऑब्जेक्ट लिटरल के तौर पर दिखाया जाता है. इसमें फ़ील्ड दिखाए जाते हैं:location
वेपॉइंट के जगह कोLatLng
के तौर पर बताता है. इसे जगह ऑब्जेक्ट के तौर पर याString
के तौर पर इस्तेमाल किया जाता है, जिसे जियोकोड किया जाएगा.stopover
एक बूलियन है, जो बताता है कि वेपॉइंट, रास्ते का एक स्टॉप है. इसका असर, रास्ते को दो रास्तों में बांटता है.
वेपॉइंट के बारे में ज़्यादा जानने के लिए, रास्ते में वेपॉइंट का इस्तेमाल करना नीचे देखें.
optimizeWaypoints
(ज़रूरी नहीं) यह बताता है कि दिए गएwaypoints
का इस्तेमाल करके रूट को ऑप्टिमाइज़ किया जा सकता है. इसके लिए, वेपॉइंट को बेहतर क्रम में फिर से व्यवस्थित किया जा सकता है. अगरtrue
, तो निर्देश सेवाwaypoint_order
फ़ील्ड में फिर से क्रम में लगाए गएwaypoints
लौटा देगी.(ज़्यादा जानकारी के लिए, नीचे रास्ते में वेपॉइंट का इस्तेमाल करना देखें.)- जब
provideRouteAlternatives
(ज़रूरी नहीं) कोtrue
पर सेट किया जाता है, तो इससे पता चलता है कि निर्देश सेवा, रिस्पॉन्स में एक से ज़्यादा रूट के विकल्प दे सकती है. ध्यान दें कि रूट के विकल्प देने से सर्वर से जवाब देने में लगने वाला समय बढ़ सकता है. यह सिर्फ़ उन अनुरोधों के लिए उपलब्ध होता है जिनमें इंटरमीडिएट वेपॉइंट नहीं होता. - जब
avoidFerries
(ज़रूरी नहीं) कोtrue
पर सेट किया गया हो, तो इससे पता चलता है कि अगर मुमकिन हो, तो तय किए गए रूट में फ़ेरी से बचना चाहिए. - जब
avoidHighways
(ज़रूरी नहीं) कोtrue
पर सेट किया गया हो, तो इससे पता चलता है कि अगर मुमकिन हो, तो आपके दिए गए फ़ॉर्मूला के आधार पर तैयार किए गए रूट को मुख्य हाइवे से बचना चाहिए. - जब
avoidTolls
(ज़रूरी नहीं) कोtrue
पर सेट किया गया हो, तो इससे पता चलता है कि अगर मुमकिन हो, तो तय किए गए रूट में टोल सड़कों से बचना चाहिए. region
(ज़रूरी नहीं है) क्षेत्र के कोड के बारे में बताता है, जिसे ccTLD ("टॉप लेवल डोमेन") के तौर पर बताया गया है. यह वैल्यू दो वर्णों वाली होती है. (ज़्यादा जानकारी के लिए, क्षेत्र के हिसाब से अनुमान लगाना नीचे देखें.)
नीचे एक सैंपल DirectionsRequest
दिया गया है:
{ origin: 'Chicago, IL', destination: 'Los Angeles, CA', waypoints: [ { location: 'Joplin, MO', stopover: false },{ location: 'Oklahoma City, OK', stopover: true }], provideRouteAlternatives: false, travelMode: 'DRIVING', drivingOptions: { departureTime: new Date(/* now, or future date */), trafficModel: 'pessimistic' }, unitSystem: google.maps.UnitSystem.IMPERIAL }
यात्रा के मोड
दिशा-निर्देशों का हिसाब लगाते समय, आपको यह बताना होता है कि यात्रा के लिए किस साधन का इस्तेमाल करना है. फ़िलहाल, यात्रा के इन मोड का इस्तेमाल किया जा सकता है:
DRIVING
(डिफ़ॉल्ट) सड़क नेटवर्क का इस्तेमाल करके, स्टैंडर्ड ड्राइविंग दिशा-निर्देशों को दिखाता है.BICYCLING
ने साइकल के रास्तों और पसंदीदा सड़कों के ज़रिए साइकल चलाने के दिशा-निर्देशों का अनुरोध किया है.TRANSIT
ने सार्वजनिक परिवहन के रास्तों के ज़रिए दिशा-निर्देशों का अनुरोध किया है.WALKING
ने पैदल चलने के लिए बने रास्तों और फ़ुटपाथ से पैदल जाने की जानकारी मांगी है.
Google Maps Platform के कवरेज की जानकारी देखें.
इससे आपको पता चलता है कि किसी देश में, किस हद तक निर्देश देने की सुविधा उपलब्ध है. अगर किसी ऐसे इलाके के लिए निर्देशों का अनुरोध किया जाता है जहां उस तरह की जानकारी उपलब्ध नहीं है, तो रिस्पॉन्स के तौर पर DirectionsStatus
="ZERO_RESULTS
" का जवाब मिलेगा.
ध्यान दें: हो सकता है कि पैदल चलने के दिशा-निर्देशों में पैदल चलने के लिए साफ़-साफ़ रास्ते न हों. इसलिए, पैदल चलने के लिए दिशा-निर्देशों के लिए DirectionsResult
में चेतावनियां दिखेंगी. उपयोगकर्ताओं को ये चेतावनियां हमेशा दिखाई जानी चाहिए. अगर डिफ़ॉल्ट DirectionsRenderer
का इस्तेमाल नहीं किया जाता है, तो यह पक्का करना आपकी ज़िम्मेदारी है कि चेतावनियां दिखें.
बस, मेट्रो वगैरह के विकल्प
दिशा-निर्देश अनुरोध के लिए उपलब्ध विकल्प, यात्रा के मोड के हिसाब से अलग-अलग होते हैं.
बस, मेट्रो वगैरह के निर्देशों का अनुरोध करते समय, avoidHighways
, avoidTolls
, waypoints[]
, और optimizeWaypoints
विकल्पों को अनदेखा कर दिया जाएगा. TransitOptions
ऑब्जेक्ट लिटरल
के ज़रिए, ट्रांज़िट से जुड़े रूटिंग के विकल्प तय किए जा सकते हैं.
ट्रांज़िट दिशा-निर्देश समय के हिसाब से संवेदनशील होते हैं. निर्देश सिर्फ़ आने वाले समय के लिए लौटाए जाएंगे.
TransitOptions
ऑब्जेक्ट लिटरल में, ये फ़ील्ड
शामिल होते हैं:
{ arrivalTime: Date, departureTime: Date, modes[]: TransitMode, routingPreference: TransitRoutePreference }
इन फ़ील्ड से जुड़ी जानकारी नीचे दी गई है:
arrivalTime
(ज़रूरी नहीं है)Date
ऑब्जेक्ट के तौर पर, पहुंचने के मनचाहे समय की जानकारी देता है. अगर पहुंचने के समय की जानकारी दी गई है, तो निकलने के समय को अनदेखा कर दिया जाता है.departureTime
(ज़रूरी नहीं है)Date
ऑब्जेक्ट के तौर पर, जाने के सही समय की जानकारी देता है. अगरarrivalTime
दिया गया है, तोdepartureTime
को अनदेखा कर दिया जाएगा. अगरdepartureTime
याarrivalTime
के लिए कोई वैल्यू तय नहीं की गई है, तो डिफ़ॉल्ट तौर पर यह अब (यानी मौजूदा समय) पर सेट होता है.modes[]
(ज़रूरी नहीं है) एक कलेक्शन है, जिसमें एक या उससे ज़्यादाTransitMode
ऑब्जेक्ट लिटरल हैं. इस फ़ील्ड को सिर्फ़ तब शामिल किया जा सकता है, अगर अनुरोध में एपीआई पासकोड शामिल हो. हरTransitMode
, बस, मेट्रो वगैरह के लिए पसंदीदा मोड के बारे में बताता है. ये वैल्यू इस्तेमाल की जा सकती हैं:BUS
बताता है कि तय किए गए रास्ते के लिए बस से यात्रा को प्राथमिकता देनी चाहिए.RAIL
बताता है कि तय किए गए रूट में ट्रेन, ट्राम, लाइट रेल, और सबवे से यात्रा को प्राथमिकता दी जानी चाहिए.SUBWAY
बताता है कि तय किए गए रूट में सबवे से यात्रा को प्राथमिकता दी जानी चाहिए.TRAIN
बताता है कि तय किए गए रास्ते के लिए ट्रेन से यात्रा को प्राथमिकता देनी चाहिए.TRAM
बताता है कि तय किए गए रास्ते के लिए, ट्राम और लाइट रेल से यात्रा को प्राथमिकता देनी चाहिए.
routingPreference
(ज़रूरी नहीं है) सार्वजनिक परिवहन के रास्तों के लिए प्राथमिकताएं तय करता है. इस विकल्प का इस्तेमाल करके, एपीआई से चुने गए डिफ़ॉल्ट सबसे अच्छे रास्ते को स्वीकार करने के बजाय, दिखाए गए विकल्पों में पक्षपात किया जा सकता है. इस फ़ील्ड को सिर्फ़ तब शामिल किया जा सकता है, जब अनुरोध में एपीआई पासकोड शामिल हो. ये वैल्यू इस्तेमाल की जा सकती हैं:FEWER_TRANSFERS
बताता है कि तय किए गए रूट में बस सीमित संख्या में ही ट्रांसफ़र होने चाहिए.LESS_WALKING
बताता है कि तय किए गए रास्ते में कम पैदल चलना चाहिए.
बस, मेट्रो वगैरह के लिए DirectionsRequest
का नमूना नीचे दिखाया गया है:
{ origin: 'Hoboken NJ', destination: 'Carroll Gardens, Brooklyn', travelMode: 'TRANSIT', transitOptions: { departureTime: new Date(1337675679473), modes: ['BUS'], routingPreference: 'FEWER_TRANSFERS' }, unitSystem: google.maps.UnitSystem.IMPERIAL }
ड्राइविंग के विकल्प
DrivingOptions
ऑब्जेक्ट के ज़रिए, ड्राइविंग दिशा-निर्देशों के लिए रूटिंग के विकल्प तय किए जा सकते हैं.
DrivingOptions
ऑब्जेक्ट में ये फ़ील्ड शामिल होते हैं:
{ departureTime: Date, trafficModel: TrafficModel }
इन फ़ील्ड से जुड़ी जानकारी नीचे दी गई है:
departureTime
(drivingOptions
ऑब्जेक्ट लिटरल के मान्य होने के लिए ज़रूरी है), एकDate
ऑब्जेक्ट के रूप में, जाने के सही समय की जानकारी देता है. वैल्यू को मौजूदा समय या आगे के किसी समय पर सेट किया जाना चाहिए. यह बीते हुए समय में नहीं हो सकता. (यह एपीआई सभी तारीखों को यूटीसी में बदलता है, ताकि सभी टाइम ज़ोन में एक जैसी हैंडलिंग हो.) Google Maps Platform के प्रीमियम प्लान के ग्राहकों के लिए, अगर अनुरोध मेंdepartureTime
को शामिल किया जाता है, तो एपीआई, ट्रैफ़िक के हिसाब से उस समय सबसे अच्छा रास्ता दिखाता है. साथ ही, रिस्पॉन्स में ट्रैफ़िक में लगने वाले अनुमानित समय (duration_in_traffic
) की जानकारी भी देता है. अगर आप रवाना होने का समय नहीं बताते हैं (मतलब, अगर अनुरोध मेंdrivingOptions
शामिल न हो), तो वापस किया गया रास्ता आम तौर पर अच्छा माना जाता है, लेकिन ट्रैफ़िक की स्थितियों को ध्यान में नहीं रखा जाता.trafficModel
(ज़रूरी नहीं है) ट्रैफ़िक में लगने वाले समय का हिसाब लगाते समय इस्तेमाल किए जाने वाले अनुमानों को दिखाता है. यह सेटिंग, रिस्पॉन्स के तौर परduration_in_traffic
फ़ील्ड में दिखने वाली वैल्यू पर असर डालती है. इसमें, पुराने औसत के आधार पर ट्रैफ़िक में लगने वाला अनुमानित समय शामिल होता है. डिफ़ॉल्ट तौर पर, यह वैल्यूbestguess
होती है. ये वैल्यू इस्तेमाल की जा सकती हैं:bestguess
(डिफ़ॉल्ट) से पता चलता है कि वापस किए गएduration_in_traffic
को, यात्रा में लगने वाले समय का सबसे सही अनुमान होना चाहिए. यह अनुमान पुराने ट्रैफ़िक और लाइव ट्रैफ़िक, दोनों के बारे में पता होता है.departureTime
के नज़दीक आने पर लाइव ट्रैफ़िक और ज़रूरी हो जाता है.pessimistic
से पता चलता है किduration_in_traffic
को ज़्यादातर दिनों में, यात्रा में लगने वाले असल समय से ज़्यादा दिखाया जाना चाहिए. हालांकि, कभी-कभी खास तौर पर खराब ट्रैफ़िक वाले दिनों में, इस वैल्यू से ज़्यादा हो सकते हैं.optimistic
से पता चलता है कि लौटाया गयाduration_in_traffic
, ज़्यादातर दिनों में यात्रा के असल समय से कम होना चाहिए. हालांकि, खास तौर पर अच्छे ट्रैफ़िक वाले दिनों में, इस वैल्यू से कम समय भी चल सकता है.
ड्राइविंग दिशा-निर्देशों के लिए DirectionsRequest
का एक नमूना नीचे दिया गया है:
{ origin: 'Chicago, IL', destination: 'Los Angeles, CA', travelMode: 'DRIVING', drivingOptions: { departureTime: new Date(Date.now() + N), // for the time N milliseconds from now. trafficModel: 'optimistic' } }
यूनिट सिस्टम
डिफ़ॉल्ट रूप से, निर्देशों की गिनती और उन्हें दिखाने के लिए, मूल देश या इलाके के यूनिट सिस्टम का इस्तेमाल किया जाता है.
(ध्यान दें: जिन जगहों के बारे में जानकारी देने के लिए, अक्षांश/देशांतर निर्देशांक का इस्तेमाल किया जाता है, न कि पतों को डिफ़ॉल्ट रूप से मेट्रिक यूनिट के तौर पर.) उदाहरण के लिए, "शिकागो, इलिनॉय" से "टोरंटो, ओएनटी" तक के रूट पर नतीजे मील में दिखेंगे. वहीं, रिवर्स रूट पर नतीजे किलोमीटर में दिखेंगे. इस यूनिट सिस्टम को बदलने के लिए, इनमें से किसी एक UnitSystem
वैल्यू का इस्तेमाल करके, अनुरोध में साफ़ तौर पर कोई एक वैल्यू सेट की जा सकती है:
UnitSystem.METRIC
, मेट्रिक सिस्टम के इस्तेमाल के बारे में बताता है. दूरी को किलोमीटर का इस्तेमाल करके दिखाया जाता है.UnitSystem.IMPERIAL
, इंपीरियल (अंग्रेज़ी) सिस्टम के इस्तेमाल के बारे में बताता है. दूरी को मील में दिखाया गया है.
ध्यान दें: इस यूनिट सिस्टम सेटिंग का असर सिर्फ़ उपयोगकर्ता को दिखाए जाने वाले टेक्स्ट पर पड़ता है. निर्देश के नतीजे में, उपयोगकर्ता को दिखाई जाने वाली दूरी के वैल्यू भी शामिल होते हैं. इन्हें हमेशा मीटर में दिखाया जाता है.
निर्देशों के लिए क्षेत्र का मापदंड तय करना
Google Maps API निर्देश सेवा, उस डोमेन (इलाके या देश) के आधार पर पते के नतीजे दिखाती है
जिससे आपने JavaScript बूटस्ट्रैप लोड किया था. (ज़्यादातर उपयोगकर्ता https://maps.googleapis.com/
को लोड करते हैं,
इसलिए यह अमेरिका के लिए एक इंप्लिसिट डोमेन सेट करता है.) अगर
बूटस्ट्रैप को किसी ऐसे डोमेन से लोड किया जाता है जिस पर यह सुविधा काम करती है, तो आपको
उस डोमेन के हिसाब से नतीजे मिलेंगे. उदाहरण के लिए, "सैन फ़्रांसिस्को" के लिए खोज करने पर, एक
लोड होने वाले ऐप्लिकेशन के नतीजे https://maps.googleapis.com/
(अमेरिका) और
एक लोड होने वाले http://maps.google.es/
(स्पेन) के
अलग-अलग नतीजे दिख सकते हैं.
किसी इलाके के हिसाब से नतीजे दिखाने के लिए, निर्देश सेवा को भी सेट किया जा सकता है.
इसके लिए, region
पैरामीटर का इस्तेमाल करें. यह पैरामीटर
एक क्षेत्र कोड लेता है, जिसे दो-वर्ण (बिना संख्या वाले) यूनिकोड
क्षेत्र के सबटैग के तौर पर बताया जाता है. ज़्यादातर मामलों में, ये टैग सीधे ccTLD ("टॉप लेवल डोमेन") से मैप करते हैं. उदाहरण के लिए, "co.uk" में "uk" जैसे दो वर्ण वाली वैल्यू. कुछ
मामलों में, region
टैग, ISO-3166-1 कोड के साथ भी काम करता है, जो
कभी-कभी ccTLD वैल्यू से अलग होते हैं. जैसे, "ग्रेट ब्रिटेन" के लिए "GB".
region
पैरामीटर का इस्तेमाल करते समय:
- सिर्फ़ एक देश या इलाके का नाम डालें. एक से ज़्यादा वैल्यू को नज़रअंदाज़ कर दिया जाता है और इसकी वजह से अनुरोध फ़ेल हो सकता है.
- क्षेत्र के लिए सिर्फ़ दो वर्ण वाले सबटैग (यूनिकोड CLDR फ़ॉर्मैट) इस्तेमाल करें. अन्य सभी इनपुट की वजह से गड़बड़ियां होंगी.
क्षेत्र के हिसाब से अनुमान लगाने की सुविधा, सिर्फ़ उन देशों और इलाकों के लिए काम करती है जहां निर्देश देने की सुविधा उपलब्ध है. निर्देशों एपीआई के लिए अंतरराष्ट्रीय कवरेज देखने के लिए, Google Maps Platform के कवरेज की जानकारी देखें.
निर्देश रेंडरिंग
DirectionsService
को route()
तरीके की मदद से, निर्देशों का अनुरोध करने के लिए एक कॉलबैक पास करना ज़रूरी होता है. यह कॉलबैक सेवा का अनुरोध पूरा होने पर काम करता है. यह कॉलबैक, रिस्पॉन्स में
DirectionsResult
और DirectionsStatus
कोड दिखाएगा.
निर्देश क्वेरी की स्थिति
DirectionsStatus
ये वैल्यू दिखा सकता है:
OK
से पता चलता है कि जवाब में मान्यDirectionsResult
है.NOT_FOUND
से पता चलता है कि अनुरोध के शुरू होने की जगह, मंज़िल या वेपॉइंट में बताई गई कम से कम किसी एक जगह को जियोकोड नहीं किया जा सका.ZERO_RESULTS
से पता चलता है कि शुरुआत की जगह और मंज़िल के बीच कोई रास्ता नहीं मिला.MAX_WAYPOINTS_EXCEEDED
से पता चलता है किDirectionsRequest
में बहुत ज़्यादाDirectionsWaypoint
फ़ील्ड दिए गए थे. वे पॉइंट के लिए सीमाओं के बारे में नीचे दिया गया सेक्शन देखें.MAX_ROUTE_LENGTH_EXCEEDED
बताता है कि अनुरोध किया गया रास्ता बहुत लंबा है और इसे प्रोसेस नहीं किया जा सकता. यह गड़बड़ी तब होती है, जब ज़्यादा मुश्किल निर्देश दिखाए जाते हैं. वेपॉइंट, मोड़ या निर्देश कम करें.INVALID_REQUEST
बताता है कि दिया गयाDirectionsRequest
अमान्य था. इस गड़बड़ी कोड की सबसे आम वजहें वे अनुरोध हैं जिनमें ऑरिजिन या डेस्टिनेशन की जानकारी मौजूद नहीं होती है. इसके अलावा, वे ऐसे ट्रांज़िट अनुरोध होते हैं जिनमें वेपॉइंट शामिल होते हैं.OVER_QUERY_LIMIT
से पता चलता है कि वेबपेज ने तय समयावधि में बहुत ज़्यादा अनुरोध भेजे हैं.REQUEST_DENIED
बताता है कि वेबपेज को निर्देश सेवा का इस्तेमाल करने की अनुमति नहीं है.UNKNOWN_ERROR
से पता चलता है कि दिशा-निर्देशों के अनुरोध को सर्वर की गड़बड़ी की वजह से प्रोसेस नहीं किया जा सका. अगर आप फिर से कोशिश करते हैं, तो हो सकता है कि अनुरोध पूरा हो जाए.
नतीजे प्रोसेस करने से पहले, आपको यह पक्का करना होगा कि निर्देश क्वेरी से सही नतीजे मिले. इसके लिए, इस वैल्यू की जांच करें.
निर्देश से जुड़े नतीजे दिखाए जा रहे हैं
DirectionsResult
में निर्देश क्वेरी का नतीजा होता है, जिसे आप खुद इस्तेमाल कर सकते हैं या किसी DirectionsRenderer
ऑब्जेक्ट को पास कर सकते हैं. यह मैप पर नतीजे को अपने-आप दिखाता है.
DirectionsRenderer
का इस्तेमाल करके DirectionsResult
दिखाने के लिए, आपको ये काम करने होंगे:
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>
निर्देश से जुड़े नतीजे पाने वाला ऑब्जेक्ट
DirectionsService
पर निर्देशों का अनुरोध भेजते समय, आपको एक रिस्पॉन्स मिलता है. इसमें स्टेटस कोड होता है और एक नतीजा DirectionsResult
ऑब्जेक्ट होता है. DirectionsResult
एक ऑब्जेक्ट लिटरल है,
जिसमें ये फ़ील्ड होते हैं:
geocoded_waypoints[]
मेंDirectionsGeocodedWaypoint
ऑब्जेक्ट का कलेक्शन मौजूद होता है. हर ऑब्जेक्ट में, ऑरिजिन, डेस्टिनेशन, और वेपॉइंट की जियोकोडिंग होती है.routes[]
मेंDirectionsRoute
ऑब्जेक्ट की एक कैटगरी मौजूद है. हर रास्ता बताता है किDirectionsRequest
में दी गई मूल जगह से मंज़िल तक कैसे पहुंचा जा सकता है. आम तौर पर, किसी अनुरोध के लिए सिर्फ़ एक रास्ता दिखाया जाता है. हालांकि, अगर अनुरोध काprovideRouteAlternatives
फ़ील्ड,true
पर सेट है, तो एक से ज़्यादा रास्ते दिखाए जा सकते हैं.
ध्यान दें: दूसरे रास्तों के लिए via_waypoint
प्रॉपर्टी अब इस्तेमाल में नहीं है. वर्शन 3.27, एपीआई का आखिरी वर्शन है. इसमें दूसरे रास्तों के वेपॉइंट
के ज़रिए ज़्यादा सुविधाएं जोड़ी गई हैं. एपीआई के 3.28 और इससे ऊपर के वर्शन के लिए, निर्देश सेवा का इस्तेमाल करके, खींचने और छोड़ने लायक निर्देश लागू किए जा सकते हैं. इसके लिए, आपको दूसरे रास्तों को खींचने और छोड़ने की सुविधा बंद करनी होगी.
सिर्फ़ मुख्य रास्ते को ही खींचा जा सकता है. लोग मुख्य रास्ते को तब तक खींचकर छोड़ सकते हैं, जब तक वह किसी दूसरे रास्ते से मिल न जाए.
जियोकोड किए गए वेपॉइंट
DirectionsGeocodedWaypoint
में शुरुआत की जगह, मंज़िल, और वेपॉइंट की जियोकोडिंग होती है.
DirectionsGeocodedWaypoint
एक ऑब्जेक्ट लिटरल है, जिसमें
ये फ़ील्ड होते हैं:
geocoder_status
, जियोकोडिंग कार्रवाई से होने वाले स्टेटस कोड को दिखाता है. इस फ़ील्ड में ये वैल्यू हो सकती हैं."OK"
बताता है कि कोई गड़बड़ी नहीं हुई; पते को सफलतापूर्वक पार्स कर दिया गया था और कम से कम एक जियोकोड लौटाया गया."ZERO_RESULTS"
बताता है कि जियोकोड सफल था, लेकिन कोई नतीजा नहीं मिला. ऐसा तब हो सकता है, जब जियोकोडरaddress
मौजूद न हो.
-
partial_match
बताता है कि जियोकोडर ने मूल अनुरोध का सटीक मिलान नहीं किया, हालांकि यह अनुरोध किए गए पते के भाग से मेल खा रहा था. हो सकता है कि आप गलत स्पेलिंग और/या अधूरे पते के लिए, मूल अनुरोध की जांच करना चाहें.आंशिक मिलान अक्सर उन मोहल्ले के पतों के लिए होते हैं जो आपके अनुरोध में पास किए गए शहर में मौजूद नहीं होते. कुछ हद तक मैच करने वाले नतीजे तब भी दिखाए जा सकते हैं, जब कोई अनुरोध एक ही शहर में दो या उससे ज़्यादा जगहों से मेल खाता है. उदाहरण के लिए, "हिलपर स्ट्रीट, ब्रिस्टल, यूनाइटेड किंगडम", दोनों के लिए कुछ हद तक मैच करने वाला नतीजा: हेनरी स्ट्रीट और हेनरीटा स्ट्रीट, दोनों के लिए. ध्यान दें कि अगर किसी अनुरोध में गलत स्पेलिंग वाला पता कॉम्पोनेंट शामिल है, तो जियोकोडिंग सेवा दूसरे पते का सुझाव दे सकती है. इस तरह ट्रिगर किए जाने वाले सुझाव भी 'कुछ हद तक मैच करने वाले वाक्यांशों' के तौर पर मार्क कर दिए जाएंगे.
place_id
किसी जगह का यूनीक आइडेंटिफ़ायर है, जिसका इस्तेमाल दूसरे Google API के साथ किया जा सकता है. उदाहरण के लिए, किसी स्थानीय कारोबार की जानकारी पाने के लिए, Google स्थल एपीआई लाइब्रेरी के साथplace_id
का इस्तेमाल किया जा सकता है. जैसे, फ़ोन नंबर, कारोबार के खुले होने का समय, उपयोगकर्ताओं की समीक्षाएं वगैरह. जगह के आईडी की खास जानकारी देखें.types[]
एक कलेक्शन है. इससे यह पता चलता है कि नतीजे का टाइप दिखाया गया है या नहीं. इस कैटगरी में शून्य या उससे ज़्यादा टैग का एक सेट होता है, जो नतीजे में मिली सुविधा की पहचान करता है. उदाहरण के लिए, "शिकागो" का जियोकोड, "जगह" दिखाता है, जो बताता है कि "शिकागो" एक शहर है. साथ ही, यह भी बताता है कि "शिकागो" एक शहर है, जो बताता है कि यह एक राजनैतिक इकाई है.
निर्देश वाले रास्ते
ध्यान दें: लेगसी DirectionsTrip
ऑब्जेक्ट का
नाम बदलकर, DirectionsRoute
कर दिया गया है. ध्यान दें कि अब सफ़र के दौरान माता-पिता/अभिभावक की यात्रा के बजाय, रूट का इस्तेमाल शुरू से आखिर तक की पूरी यात्रा के बारे में बताया जाता है.
DirectionsRoute
में, किसी खास ऑरिजिन और डेस्टिनेशन से मिला एक नतीजा शामिल होता है. इस रास्ते में एक या ज़्यादा लेग (DirectionsLeg
वाले) हो सकते हैं. यह इस बात पर निर्भर करता है कि किसी तरह का वेपॉइंट दिया गया था या नहीं. साथ ही, रूट में कॉपीराइट और चेतावनी के बारे में भी जानकारी होती है, जो उपयोगकर्ता को रूटिंग की जानकारी के साथ दिखाई जानी चाहिए.
DirectionsRoute
एक ऑब्जेक्ट लिटरल है, जिसमें
ये फ़ील्ड होते हैं:
legs[]
मेंDirectionsLeg
ऑब्जेक्ट का कलेक्शन है. हर ऑब्जेक्ट में, किसी दिए गए रूट में मौजूद दो जगहों से, रास्ते के किसी पैदल हिस्से के बारे में जानकारी मिलती है. तय किए गए हर वेपॉइंट या डेस्टिनेशन के लिए एक अलग पैर मौजूद होगा. (बिना किसी वेपॉइंट वाले रूट में ठीक एकDirectionsLeg
होगा.) हर रूट परDirectionStep
की सीरीज़ होती है.waypoint_order
में एक कलेक्शन होता है, जो आपके दिए गए फ़ॉर्मूला के आधार पर तैयार किए गए रूट में मौजूद किसी भी वेपॉइंट के क्रम को दिखाता है. अगरDirectionsRequest
,optimizeWaypoints: true
को पास किया गया है, तो इस कैटगरी में बदला गया ऑर्डर हो सकता है.overview_path
मेंLatLng
का कलेक्शन होता है, जो मिलने वाले निर्देशों का अनुमानित (स्मूद) पाथ दिखाता है.overview_polyline
में एकpoints
ऑब्जेक्ट होता है, जिसमें रूट को कोड में बदला गया पॉलीलाइन दिखाया जाता है. यह पॉलीलाइन, मिलने वाले निर्देशों का पाथ अनुमानित (स्मूद) है.bounds
में एकLatLngBounds
होता है, जो इस दिए गए रास्ते की पॉलीलाइन की सीमाओं को दिखाता है.copyrights
में इस रास्ते के लिए दिखाया जाने वाला कॉपीराइट टेक्स्ट शामिल है.warnings[]
में कई तरह की चेतावनियां होती हैं, जो इन निर्देशों को दिखाते समय दिखती हैं. अगर आपने दिए गएDirectionsRenderer
ऑब्जेक्ट का इस्तेमाल नहीं किया है, तो आपको इन चेतावनियों को खुद मैनेज करना और दिखाना होगा.fare
में इस रास्ते का कुल किराया (यानी कि टिकट की कुल कीमत) शामिल होता है. यह प्रॉपर्टी सिर्फ़ सार्वजनिक परिवहन के अनुरोधों के लिए दी जाती है. इसे सिर्फ़ उन रास्तों के लिए दिखाया जाता है जहां सभी ट्रांज़िट पैरों के लिए किराये की जानकारी उपलब्ध होती है. इसमें ये चीज़ें शामिल होती हैं:currency
: ISO 4217 मुद्रा कोड, जो उस मुद्रा को दिखाता है जिसमें रकम दिखाई गई है.value
: ऊपर बताई गई मुद्रा में, किराये की कुल रकम.
रास्ते के पैर
ध्यान दें: लेगसी DirectionsRoute
ऑब्जेक्ट का
नाम बदलकर, DirectionsLeg
कर दिया गया है.
DirectionsLeg
, आपके दिए गए फ़ॉर्मूला के आधार पर तय किए गए रास्ते में, शुरुआत से लेकर मंज़िल तक की यात्रा के एक रास्ते के बारे में बताता है.
जिन रास्तों में कोई भी वेपॉइंट नहीं है उनके लिए, रूट में एक "लेग" होगा. हालांकि, जिन रूट में एक या इससे ज़्यादा वेपॉइंट तय किए जाते हैं उनके लिए, रूट में एक या ज़्यादा वेपॉइंट होंगे जो यात्रा के खास लेग से जुड़े होंगे.
DirectionsLeg
एक ऑब्जेक्ट लिटरल है, जिसमें
ये फ़ील्ड होते हैं:
steps[]
मेंDirectionsStep
ऑब्जेक्ट का कलेक्शन मौजूद है, जो यात्रा के हर अलग चरण के बारे में जानकारी देता है.distance
इस पैर से तय की गई कुल दूरी को नीचे दिए गए फ़ॉर्म केDistance
ऑब्जेक्ट के तौर पर बताता है:value
मीटर में दूरी दिखाता हैtext
में दूरी को स्ट्रिंग के रूप में दिखाया जाता है. यह डिफ़ॉल्ट रूप से, यूनिट में उसी तरह दिखाया जाता है जिस तरह ऑरिजिन पर इस्तेमाल किया जाता है. (उदाहरण के लिए, अमेरिका में किसी भी ऑरिजिन के लिए मील का इस्तेमाल किया जाएगा.) ओरिजनल क्वेरी में खास तौर परUnitSystem
सेट करके, इस यूनिट सिस्टम को बदला जा सकता है. ध्यान दें, आप चाहे किसी भी यूनिट सिस्टम का इस्तेमाल करें,distance.value
फ़ील्ड में हमेशा मीटर में बताई गई वैल्यू शामिल होती है.
दूरी की जानकारी न होने पर, हो सकता है कि इन फ़ील्ड के बारे में कोई जानकारी न दी गई हो.
duration
इस पैर की कुल अवधि को नीचे दिए गए फ़ॉर्म केDuration
ऑब्जेक्ट के रूप में दिखाता है:value
, सेकंड में कुल समय दिखाता है.text
में अवधि को स्ट्रिंग के तौर पर दिखाया जाता है.
अगर अवधि की जानकारी नहीं है, तो हो सकता है कि ये फ़ील्ड तय न हों.
duration_in_traffic
, इस लेग की कुल अवधि को दिखाता है. इसमें, ट्रैफ़िक की मौजूदा स्थितियों को ध्यान में रखा जाता है.duration_in_traffic
को सिर्फ़ तब दिखाया जाता है, जब:- अनुरोध में स्टॉपओवर वेपॉइंट शामिल नहीं हैं. इसका मतलब है कि इसमें वेपॉइंट शामिल नहीं हैं जहां
stopover
,true
है. - यह अनुरोध खास तौर पर ड्राइविंग दिशा-निर्देशों के लिए है—
mode
कोdriving
पर सेट किया गया है. departureTime
को अनुरोध में,drivingOptions
फ़ील्ड के हिस्से के तौर पर शामिल किया जाता है.- अनुरोध किए गए रास्ते के लिए ट्रैफ़िक की स्थिति की जानकारी उपलब्ध है.
duration_in_traffic
में ये फ़ील्ड शामिल होते हैं:value
, सेकंड में कुल समय दिखाता है.text
में अवधि का ऐसा दस्तावेज़ होता है जिसे कोई भी व्यक्ति आसानी से पढ़ सकता है.
- अनुरोध में स्टॉपओवर वेपॉइंट शामिल नहीं हैं. इसका मतलब है कि इसमें वेपॉइंट शामिल नहीं हैं जहां
arrival_time
में इस पैर के लिए आने का अनुमानित समय शामिल है. यह प्रॉपर्टी सिर्फ़ सार्वजनिक परिवहन के निर्देशों के लिए दिखाई जाती है. नतीजा तीन प्रॉपर्टी के साथTime
ऑब्जेक्ट के तौर पर दिखाया जाता है:- JavaScript
Date
ऑब्जेक्ट के तौर पर तय किए गए समय कोvalue
करता है. - स्ट्रिंग के तौर पर बताया गया समय
text
. समय को ट्रांज़िट स्टॉप के टाइम ज़ोन में दिखाया जाता है. time_zone
में इस स्टेशन का समय क्षेत्र शामिल है. वैल्यू, टाइम ज़ोन का नाम ही होती है, जैसा कि IANA टाइम ज़ोन डेटाबेस में बताया गया है. उदाहरण के लिए, "America/New_York".
- JavaScript
departure_time
में इस पैर के रवाना होने का अनुमानित समय शामिल होता है, जिसेTime
ऑब्जेक्ट के तौर पर बताया गया है.departure_time
सिर्फ़, बस, मेट्रो वगैरह के निर्देशों के लिए उपलब्ध है.start_location
में इस पैर की शुरुआत काLatLng
शामिल है. निर्देश वेब सेवा, शुरुआत और आखिर में आने-जाने के लिए सबसे नज़दीकी परिवहन विकल्प (आम तौर पर, कोई सड़क) का इस्तेमाल करके, जगहों के बीच दिशा-निर्देशों का हिसाब लगाती है. इसलिए, अगरstart_location
, यात्रा की शुरुआत की जगह से अलग हो सकती है, जैसे कि कोई सड़क, मूल जगह के आस-पास न हो.end_location
में इस पैर के डेस्टिनेशन काLatLng
शामिल है.DirectionsService
, शुरुआत और आखिरी पॉइंट पर मौजूद परिवहन के सबसे नज़दीकी विकल्प (आम तौर पर, कोई सड़क) का इस्तेमाल करके, जगहों के बीच रास्ते के निर्देशों का हिसाब लगाता है. इसलिए, अगर कोई सड़क, मंज़िल के आस-पास नहीं है, तोend_location
इस पैर की मंज़िल से अलग हो सकता है.start_address
में इस पैर की शुरुआत का पता (आम तौर पर, मोहल्ले का पता) होता है, जिसे लोग आसानी से पढ़ सकते हैं.
इस कॉन्टेंट को इसी रूप में पढ़ा जाना चाहिए. फ़ॉर्मैट किए गए पते को प्रोग्राम के हिसाब से पार्स न करें.end_address
में इस पैरों के आखिर का पता होता है, जिसे लोग आसानी से पढ़ सकते हैं. आम तौर पर, यह पता किसी मोहल्ले का पता होता है.
इस कॉन्टेंट को इसी रूप में पढ़ा जाना चाहिए. फ़ॉर्मैट किए गए पते को प्रोग्राम के हिसाब से पार्स न करें.
निर्देश के चरण
DirectionsStep
, किसी दिशा के रास्ते की सबसे ऐटॉमिक यूनिट होती है. इसमें, सफ़र के दौरान किसी एक निर्देश के बारे में बताने वाला एक चरण होता है. जैसे, "W. 4th St." इस चरण में न सिर्फ़ निर्देश के बारे में बताया गया है, बल्कि इसमें दूरी और कुल समय की जानकारी भी दी गई है, जो यह बताती है कि यह चरण अगले चरण से कैसे जुड़ा है.
उदाहरण के लिए, "I-80 पश्चिम पर मर्ज करें" के रूप में दिखाए गए चरण में,"37 मील" और "40 मिनट" की अवधि हो सकती है. इससे पता चलता है कि अगला चरण इस चरण से 37 मील/40 मिनट दूर है.
बस, मेट्रो वगैरह के निर्देश खोजने के लिए निर्देश सेवा का इस्तेमाल करते समय, चरणों के कलेक्शन में, transit
ऑब्जेक्ट के रूप में बस, मेट्रो वगैरह की खास जानकारी शामिल होगी. अगर
निर्देशों में परिवहन के कई साधन शामिल हैं, तो steps[]
कैटगरी में, पैदल चलने या ड्राइव करने के लिए
ज़्यादा जानकारी वाले निर्देश दिए जाएंगे.
उदाहरण के लिए, पैदल चलने के रास्ते में, शुरू और खत्म होने की जगहों के निर्देश शामिल होंगे: "दिल्ली गेट तक पैदल चलें". उस चरण में, steps[]
कैटगरी में उस रास्ते के लिए पैदल चलने के निर्देशों की पूरी जानकारी शामिल होगी. जैसे: "उत्तर-पश्चिम की ओर बढ़ें", "आरलियस वॉकर पर बाईं ओर मुड़ें", और
"Innes Ave पर बाईं ओर मुड़ें".
DirectionsStep
एक ऑब्जेक्ट लिटरल है, जिसमें
ये फ़ील्ड होते हैं:
instructions
में इस चरण के लिए निर्देश एक टेक्स्ट स्ट्रिंग में होते हैं.distance
में इस चरण में तय की गई दूरी शामिल होती है, जो अगले चरण तक,Distance
ऑब्जेक्ट के तौर पर होती है. (इसके बारे में ऊपरDirectionsLeg
में जानकारी देखें.) अगर दूरी की जानकारी नहीं है, तो इस फ़ील्ड के बारे में जानकारी नहीं दी जा सकती.duration
में, अगले चरण तक पूरा होने में लगने वाले समय का अनुमान होता है. यह अनुमानDuration
ऑब्जेक्ट के तौर पर मौजूद होता है. (इसके बारे में ऊपरDirectionsLeg
में दी गई जानकारी देखें.) अगर अवधि की जानकारी नहीं है, तो इस फ़ील्ड के बारे में नहीं बताया जा सकता.start_location
में इस चरण के शुरुआती बिंदु का जियोकोड किया गयाLatLng
है.end_location
में इस चरण के आखिरी पॉइंट काLatLng
शामिल है.polyline
में एकpoints
ऑब्जेक्ट होता है, जिसमें चरण को कोड में बदला गया पॉलीलाइन दिखाया जाता है. यह पॉलीलाइन, चरण का अनुमानित (आसान) पाथ है.steps[]
एकDirectionsStep
ऑब्जेक्ट लिटरल जिसमें पैदल चलने या ड्राइव करने के रास्तों के बारे में ज़्यादा जानकारी होती है. सब-कदम सिर्फ़ सार्वजनिक परिवहन के निर्देशों के लिए उपलब्ध हैं.travel_mode
में इस चरण में इस्तेमाल किया गयाTravelMode
शामिल है. बस, मेट्रो वगैरह के निर्देशों में, पैदल चलने के निर्देश और बस, मेट्रो वगैरह के निर्देश शामिल हो सकते हैं.path
मेंLatLngs
की एक कैटगरी मौजूद है, जिसमें इस चरण के बारे में जानकारी दी गई है.transit
में बस, मेट्रो वगैरह से जुड़ी जानकारी होती है. जैसे, बस, मेट्रो वगैरह के पहुंचने और रवाना होने का समय और ट्रांज़िट लाइन का नाम.
ट्रांज़िट की खास जानकारी
बस, मेट्रो वगैरह के निर्देश ऐसी अतिरिक्त जानकारी देते हैं जो परिवहन के दूसरे साधनों के लिए काम की नहीं है. ये अन्य प्रॉपर्टी, TransitDetails
ऑब्जेक्ट की मदद से दिखाई जाती हैं. इन्हें DirectionsStep
की प्रॉपर्टी के तौर पर दिखाया जाता है. TransitDetails
ऑब्जेक्ट से, TransitStop
, TransitLine
, TransitAgency
, और VehicleType
ऑब्जेक्ट के लिए ज़्यादा जानकारी ऐक्सेस की जा सकती है. इसके बारे में यहां बताया गया है.
ट्रांज़िट की जानकारी
TransitDetails
ऑब्जेक्ट, इन प्रॉपर्टी को दिखाता है:
arrival_stop
में एकTransitStop
ऑब्जेक्ट है, जो इन प्रॉपर्टी के साथ आने वाले स्टेशन/स्टॉप के बारे में बताता है:- ट्रांज़िट स्टेशन/स्टॉप का नाम
name
करें. जैसे "यूनियन स्क्वेयर". location
बस, मेट्रो वगैरह स्टेशन/स्टॉप की जगह कोLatLng
के तौर पर दिखाया जाता है.
- ट्रांज़िट स्टेशन/स्टॉप का नाम
departure_stop
में एकTransitStop
ऑब्जेक्ट होता है, जो रवाना होने वाले स्टेशन/स्टॉप की जानकारी देता है.arrival_time
में आने का समय शामिल होता है, जिसेTime
ऑब्जेक्ट के तौर पर दिखाया जाता है. इसमें तीन प्रॉपर्टी होती हैं:- JavaScript
Date
ऑब्जेक्ट के तौर पर तय किए गए समय कोvalue
करता है. - स्ट्रिंग के तौर पर बताया गया समय
text
. समय को ट्रांज़िट स्टॉप के टाइम ज़ोन में दिखाया जाता है. time_zone
में इस स्टेशन का समय क्षेत्र शामिल है. वैल्यू, टाइम ज़ोन का नाम ही होती है, जैसा कि IANA टाइम ज़ोन डेटाबेस में बताया गया है. उदाहरण के लिए, "America/New_York".
- JavaScript
departure_time
में जाने का समय शामिल होता है, जिसेTime
ऑब्जेक्ट के तौर पर बताया गया है.headsign
इस लाइन पर यात्रा की दिशा तय करता है, क्योंकि यह वाहन या रवाना होने के स्टॉप पर मार्क की जाती है. अक्सर यह टर्मिनस स्टेशन होगा.headway
के उपलब्ध होने पर, यह बताता है कि इस समय एक ही स्टॉप से रवाना होने के बीच में कितनी सेकंड की होनी चाहिए. उदाहरण के लिए,headway
की वैल्यू 600 होने पर, आपको बस दस मिनट तक इंतज़ार करना पड़ सकता है.line
मेंTransitLine
ऑब्जेक्ट लिटरल होता है, जिसमें इस चरण में इस्तेमाल की गई ट्रांज़िट लाइन के बारे में जानकारी होती है.TransitLine
, लाइन का नाम और ऑपरेटर के साथ-साथTransitLine
रेफ़रंस दस्तावेज़ में बताई गई अन्य प्रॉपर्टी भी देता है.- इस चरण में
num_stops
में स्टॉप की संख्या शामिल होती है. इसमें आने वाली फ़्लाइट का स्टॉप शामिल है, लेकिन फ़्लाइट की रवानगी का स्टॉप नहीं. उदाहरण के लिए, अगर आपके निर्देशों में स्टॉप A से जाना, स्टॉप B और C से गुज़रना, और स्टॉप D पर आना शामिल है, तोnum_stops
में 3 नतीजे दिखेंगे.
ट्रांज़िट लाइन
TransitLine
ऑब्जेक्ट, इन प्रॉपर्टी को दिखाता है:
name
में इस ट्रांज़िट लाइन का पूरा नाम होता है. उदाहरण के लिए. "7 एवेन्यू एक्सप्रेस" या "14वां सेंट क्रॉसटाउन".short_name
में इस ट्रांज़िट लाइन का छोटा नाम होता है. यह आम तौर पर एक लाइन नंबर होता है, जैसे कि "2" या "M14".agencies
एक कलेक्शन है, जिसमें एकTransitAgency
ऑब्जेक्ट है.TransitAgency
ऑब्जेक्ट इस लाइन के ऑपरेटर के बारे में जानकारी देता है. इसमें ये प्रॉपर्टी भी शामिल हैं:name
में ट्रांसपोर्ट एजेंसी का नाम होता है.phone
में ट्रांसपोर्ट एजेंसी का फ़ोन नंबर होता है.url
में ट्रांसपोर्ट एजेंसी का यूआरएल होता है.
ध्यान दें: अगर आप
DirectionsRenderer
ऑब्जेक्ट का इस्तेमाल करने के बजाय, बस, मेट्रो वगैरह के निर्देश मैन्युअल तरीके से रेंडर कर रहे हैं, तो आपको यात्रा के नतीजे दिखाने वाली ट्रांसपोर्ट एजेंसियों के नाम और यूआरएल दिखाने होंगे.url
में इस ट्रांज़िट लाइन के लिए वह यूआरएल होता है जो ट्रांसपोर्ट एजेंसी ने दिया है.icon
में इस लाइन से जुड़े आइकॉन के लिए एक यूआरएल होता है. ज़्यादातर शहरों में ऐसे सामान्य आइकॉन इस्तेमाल किए जाएंगे जो वाहन के टाइप के हिसाब से अलग-अलग होते हैं. न्यूयॉर्क सबवे सिस्टम जैसे कुछ सार्वजनिक परिवहन लाइनों में, खास तौर पर उस लाइन के लिए आइकॉन होते हैं.color
में वह रंग शामिल है जिसे आम तौर पर इस बस, मेट्रो वगैरह के साइनेज में इस्तेमाल किया जाता है. रंग को हेक्स स्ट्रिंग के तौर पर दिखाया जाएगा. जैसे: #FF0033.text_color
में टेक्स्ट का रंग शामिल होता है, जिसका इस्तेमाल आम तौर पर इस लाइन के साइनेज के लिए किया जाता है. रंग को हेक्स स्ट्रिंग के तौर पर दिखाया जाएगा.vehicle
में एकVehicle
ऑब्जेक्ट होता है, जिसमें ये प्रॉपर्टी शामिल होती हैं:name
में इस लाइन पर मौजूद वाहन का नाम होता है. जैसे "सबवे."type
में इस लाइन पर इस्तेमाल किए गए वाहन का टाइप शामिल है. इस्तेमाल की जा सकने वाली वैल्यू की पूरी लिस्ट देखने के लिए, वाहन का टाइप दस्तावेज़ देखें.icon
में उस आइकॉन के लिए यूआरएल होता है जो आम तौर पर इस वाहन के टाइप से जुड़ा होता है.local_icon
में स्थानीय परिवहन के साइनेज के आधार पर, इस वाहन के आइकॉन का यूआरएल शामिल होता है.
वाहन किस तरह का है
VehicleType
ऑब्जेक्ट, इन प्रॉपर्टी को दिखाता है:
वैल्यू | परिभाषा |
---|---|
VehicleType.RAIL |
रेल. |
VehicleType.METRO_RAIL |
हल्का रेल परिवहन. |
VehicleType.SUBWAY |
अंडरग्राउंड लाइट रेल. |
VehicleType.TRAM |
ग्राउंड लाइट रेल से ऊपर. |
VehicleType.MONORAIL |
मोनोरेल. |
VehicleType.HEAVY_RAIL |
भारी रेल. |
VehicleType.COMMUTER_TRAIN |
यात्री रेल. |
VehicleType.HIGH_SPEED_TRAIN |
हाई स्पीड ट्रेन. |
VehicleType.BUS |
बस. |
VehicleType.INTERCITY_BUS |
एक शहर से दूसरे शहर जाने वाली बस. |
VehicleType.TROLLEYBUS |
ट्रॉलीबस. |
VehicleType.SHARE_TAXI |
शेयर टैक्सी एक तरह की बस है, जिसमें रास्ते में कहीं से भी यात्रियों को बैठाया और छोड़ा जा सकता है. |
VehicleType.FERRY |
फ़ेरी. |
VehicleType.CABLE_CAR |
ऐसा वाहन जो केबल से चलता है, आम तौर पर ज़मीन पर. एरियल केबल कार VehicleType.GONDOLA_LIFT टाइप की हो सकती हैं. |
VehicleType.GONDOLA_LIFT |
एरियल केबल कार. |
VehicleType.FUNICULAR |
ऐसे वाहन को जो केबल की मदद से, खड़ी ढलान पर खड़ा है. आम तौर पर, एक फ़्यूनिक्यूलर में दो कारें होती हैं. हर कार, एक कार के लिए काउंटर का वज़न कम करती है. |
VehicleType.OTHER |
बाकी सभी वाहनों पर भी इस टाइप के विज्ञापन दिखेंगे. |
निर्देशों के नतीजों की जांच की जा रही है
निर्देश के किसी भी जवाब को पार्स करते समय, DirectionsResults
कॉम्पोनेंट की जांच की जा सकती है. साथ ही, इनका इस्तेमाल भी किया जा सकता है.
DirectionsRoute
, DirectionsLeg
, DirectionsStep
, और TransitDetails
.
अहम जानकारी: अगर आप DirectionsRenderer
ऑब्जेक्ट का इस्तेमाल करने के बजाय, बस, मेट्रो वगैरह के निर्देश मैन्युअल तरीके से रेंडर कर रहे हैं, तो आपको यात्रा के नतीजे दिखाने वाली ट्रांसपोर्ट एजेंसियों के नाम और यूआरएल दिखाने होंगे.
नीचे दिए गए उदाहरण में, न्यूयॉर्क शहर में मौजूद कुछ पर्यटकों की पसंदीदा जगहों तक पैदल जाने का रास्ता बताया गया है. हम हर चरण पर मार्कर जोड़ने के लिए, रास्ते के DirectionsStep
की जांच करते हैं और उस चरण के लिए, निर्देश वाले टेक्स्ट के साथ InfoWindow
में जानकारी अटैच करते हैं.
ध्यान दें: हम पैदल चलने के दिशा-निर्देशों का पता लगा रहे हैं. इसलिए, उपयोगकर्ता को मिलने वाली चेतावनी को हम एक अलग <div>
पैनल में भी दिखाते हैं.
var map; var directionsRenderer; var directionsService; var stepDisplay; var markerArray = []; function initMap() { // Instantiate a directions service. directionsService = new google.maps.DirectionsService(); // Create a map and center it on Manhattan. var manhattan = new google.maps.LatLng(40.7711329, -73.9741874); var mapOptions = { zoom: 13, center: manhattan } map = new google.maps.Map(document.getElementById('map'), mapOptions); // Create a renderer for directions and bind it to the map. var rendererOptions = { map: map } directionsRenderer = new google.maps.DirectionsRenderer(rendererOptions) // Instantiate an info window to hold step text. stepDisplay = new google.maps.InfoWindow(); } function calcRoute() { // First, clear out any existing markerArray // from previous calculations. for (i = 0; i < markerArray.length; i++) { markerArray[i].setMap(null); } // Retrieve the start and end locations and create // a DirectionsRequest using WALKING directions. var start = document.getElementById('start').value; var end = document.getElementById('end').value; var request = { origin: start, destination: end, travelMode: 'WALKING' }; // Route the directions and pass the response to a // function to create markers for each step. directionsService.route(request, function(response, status) { if (status == "OK") { var warnings = document.getElementById("warnings_panel"); warnings.innerHTML = "" + response.routes[0].warnings + ""; directionsRenderer.setDirections(response); showSteps(response); } }); } function showSteps(directionResult) { // For each step, place a marker, and add the text to the marker's // info window. Also attach the marker to an array so we // can keep track of it and remove it when calculating new // routes. var myRoute = directionResult.routes[0].legs[0]; for (var i = 0; i < myRoute.steps.length; i++) { var marker = new google.maps.Marker({ position: myRoute.steps[i].start_point, map: map }); attachInstructionText(marker, myRoute.steps[i].instructions); markerArray[i] = marker; } } function attachInstructionText(marker, text) { google.maps.event.addListener(marker, 'click', function() { stepDisplay.setContent(text); stepDisplay.open(map, marker); }); }
एचटीएमएल के मुख्य हिस्से में:
<div> <strong>Start: </strong> <select id="start"> <option value="penn station, new york, ny">Penn Station</option> <option value="grand central station, new york, ny">Grand Central Station</option> <option value="625 8th Avenue New York NY 10018">Port Authority Bus Terminal</option> <option value="staten island ferry terminal, new york, ny">Staten Island Ferry Terminal</option> <option value="101 E 125th Street, New York, NY">Harlem - 125th St Station</option> </select> <strong>End: </strong> <select id="end" onchange="calcRoute();"> <option value="260 Broadway New York NY 10007">City Hall</option> <option value="W 49th St & 5th Ave, New York, NY 10020">Rockefeller Center</option> <option value="moma, New York, NY">MOMA</option> <option value="350 5th Ave, New York, NY, 10118">Empire State Building</option> <option value="253 West 125th Street, New York, NY">Apollo Theatre</option> <option value="1 Wall St, New York, NY">Wall St</option> </select> <div>
रास्तों में वेपॉइंट का इस्तेमाल करना
जैसा कि DirectionsRequest में बताया गया है, पैदल चलने, साइकल चलाने या ड्राइविंग के दिशा-निर्देशों के लिए, निर्देश सेवा का इस्तेमाल करके रास्तों की गिनती करते समय, वेपॉइंट (DirectionsWaypoint
टाइप के) भी बताए जा सकते हैं. बस, मेट्रो वगैरह के लिए वेपॉइंट उपलब्ध नहीं हैं.
वेपॉइंट आपको अतिरिक्त जगहों से होकर गुज़रने वाले रास्तों का हिसाब लगाने की सुविधा देते हैं.
इस स्थिति में, लौटाया गया रास्ता दिए गए वेपॉइंट से गुज़रता है.
waypoint
में ये फ़ील्ड होते हैं:
location
(ज़रूरी है) वेपॉइंट का पता बताता है.stopover
(ज़रूरी नहीं) से पता चलता है कि यह वेपॉइंट, रास्ते (true
) का असली स्टॉप है या इसके बजाय, यह सिर्फ़ बताई गई जगह (false
) से होकर गुज़रने वाले रास्ते की प्राथमिकता है. स्टॉपओवर, डिफ़ॉल्ट रूप सेtrue
होते हैं.
डिफ़ॉल्ट रूप से, निर्देश सेवा दिए गए वेपॉइंट से होकर एक रास्ते की गणना उनके दिए गए क्रम में करती है. इसके अलावा, आप
DirectionsRequest
में optimizeWaypoints: true
पास कर सकते हैं, ताकि दिशा-निर्देश सेवा
दिए गए रास्ते को ऑप्टिमाइज़ कर सके. इसके लिए, वेपॉइंट को बेहतर तरीके से
फिर से व्यवस्थित किया जा सकता है. (यह ऑप्टिमाइज़ेशन,
यात्रा में शामिल सेल्सपर्सन से जुड़ी समस्या के लिए ऐप्लिकेशन है.) यात्रा में लगने वाले समय को ऑप्टिमाइज़ करने के लिए, सबसे अहम चीज़ होती है. हालांकि, यात्रा के लिए सबसे बेहतर रास्ता तय करते समय, दूरी, मोड़ों की संख्या वगैरह जैसी कई बातों को ध्यान में रखा जा सकता है. निर्देश सेवा के लिए सभी वेपॉइंट, स्टॉपओवर होने चाहिए, ताकि वे अपने रास्ते को
ऑप्टिमाइज़ कर सकें.
अगर आप निर्देश सेवा को उसके वेपॉइंट के क्रम को ऑप्टिमाइज़
करने का निर्देश देते हैं, तो उनका ऑर्डर DirectionsResult
ऑब्जेक्ट में
waypoint_order
फ़ील्ड में
दिखाया जाएगा.
नीचे दिए गए उदाहरण में अलग-अलग तरह के शुरुआती पॉइंट, खत्म होने के पॉइंट, और वेपॉइंट का इस्तेमाल करके अमेरिका में क्रॉस-कंट्री रूट कैलकुलेट किए गए हैं. (एक से ज़्यादा वेपॉइंट चुनने के लिए, सूची में आइटम चुनते समय
Ctrl-Click दबाएं.)
ध्यान दें कि हम हर रास्ते के शुरू और खत्म होने का समय पता लगाने के लिए, routes.start_address
और routes.end_address
की जांच करते हैं.
TypeScript
function initMap(): void { const directionsService = new google.maps.DirectionsService(); const directionsRenderer = new google.maps.DirectionsRenderer(); const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 6, center: { lat: 41.85, lng: -87.65 }, } ); directionsRenderer.setMap(map); (document.getElementById("submit") as HTMLElement).addEventListener( "click", () => { calculateAndDisplayRoute(directionsService, directionsRenderer); } ); } function calculateAndDisplayRoute( directionsService: google.maps.DirectionsService, directionsRenderer: google.maps.DirectionsRenderer ) { const waypts: google.maps.DirectionsWaypoint[] = []; const checkboxArray = document.getElementById( "waypoints" ) as HTMLSelectElement; for (let i = 0; i < checkboxArray.length; i++) { if (checkboxArray.options[i].selected) { waypts.push({ location: (checkboxArray[i] as HTMLOptionElement).value, stopover: true, }); } } directionsService .route({ origin: (document.getElementById("start") as HTMLInputElement).value, destination: (document.getElementById("end") as HTMLInputElement).value, waypoints: waypts, optimizeWaypoints: true, travelMode: google.maps.TravelMode.DRIVING, }) .then((response) => { directionsRenderer.setDirections(response); const route = response.routes[0]; const summaryPanel = document.getElementById( "directions-panel" ) as HTMLElement; summaryPanel.innerHTML = ""; // For each route, display summary information. for (let i = 0; i < route.legs.length; i++) { const routeSegment = i + 1; summaryPanel.innerHTML += "<b>Route Segment: " + routeSegment + "</b><br>"; summaryPanel.innerHTML += route.legs[i].start_address + " to "; summaryPanel.innerHTML += route.legs[i].end_address + "<br>"; summaryPanel.innerHTML += route.legs[i].distance!.text + "<br><br>"; } }) .catch((e) => window.alert("Directions request failed due to " + status)); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
function initMap() { const directionsService = new google.maps.DirectionsService(); const directionsRenderer = new google.maps.DirectionsRenderer(); const map = new google.maps.Map(document.getElementById("map"), { zoom: 6, center: { lat: 41.85, lng: -87.65 }, }); directionsRenderer.setMap(map); document.getElementById("submit").addEventListener("click", () => { calculateAndDisplayRoute(directionsService, directionsRenderer); }); } function calculateAndDisplayRoute(directionsService, directionsRenderer) { const waypts = []; const checkboxArray = document.getElementById("waypoints"); for (let i = 0; i < checkboxArray.length; i++) { if (checkboxArray.options[i].selected) { waypts.push({ location: checkboxArray[i].value, stopover: true, }); } } directionsService .route({ origin: document.getElementById("start").value, destination: document.getElementById("end").value, waypoints: waypts, optimizeWaypoints: true, travelMode: google.maps.TravelMode.DRIVING, }) .then((response) => { directionsRenderer.setDirections(response); const route = response.routes[0]; const summaryPanel = document.getElementById("directions-panel"); summaryPanel.innerHTML = ""; // For each route, display summary information. for (let i = 0; i < route.legs.length; i++) { const routeSegment = i + 1; summaryPanel.innerHTML += "<b>Route Segment: " + routeSegment + "</b><br>"; summaryPanel.innerHTML += route.legs[i].start_address + " to "; summaryPanel.innerHTML += route.legs[i].end_address + "<br>"; summaryPanel.innerHTML += route.legs[i].distance.text + "<br><br>"; } }) .catch((e) => window.alert("Directions request failed due to " + status)); } window.initMap = initMap;
वेपॉइंट के लिए सीमाएं और पाबंदियां
इस्तेमाल करने की ये सीमाएं और पाबंदियां लागू हैं:
- Maps JavaScript API में निर्देश सेवा का इस्तेमाल करते समय, ज़्यादा से ज़्यादा 25 वेपॉइंट हो सकते हैं. साथ ही, इसमें ऑरिजिन और डेस्टिनेशन की जानकारी भी शामिल होती है. दिशा-निर्देश एपीआई वेब सेवा के लिए भी ये सीमाएं एक जैसी होती हैं.
- निर्देशों एपीआई वेब सेवा के लिए, ग्राहकों को 25 वेपॉइंट के साथ-साथ शुरुआत की जगह और मंज़िल की जानकारी दी जाती है.
- Google Maps Platform के प्रीमियम प्लान के ग्राहकों को 25 वेपॉइंट के साथ-साथ शुरुआत की जगह और मंज़िल की जानकारी दी जा सकती है.
- बस, मेट्रो वगैरह के लिए वेपॉइंट इस्तेमाल नहीं किए जा सकते.
खींचने और छोड़ने लायक निर्देश
उपयोगकर्ता, DirectionsRenderer
का इस्तेमाल करके, साइकल चलाने, पैदल चलने या ड्राइविंग के दिशा-निर्देशों में डाइनैमिक तौर पर बदलाव कर सकते हैं. हालांकि, इसके लिए ज़रूरी है कि वे ड्रैग किए जा सकने वाले हों. इनसे लोगों को पाथ पर क्लिक करके और खींचकर, रास्ते चुनने और बदलने की सुविधा मिलती है.
आप रेंडर करने वाले के डिसप्ले की draggable
प्रॉपर्टी को true
पर सेट करके, यह बताते हैं कि
उसे खींचने और छोड़ने के निर्देश दिए जा सकते हैं या नहीं. ट्रांज़िट दिशा-निर्देशों को खींचने योग्य नहीं बनाया जा सकता.
जब दिशा-निर्देशों को खींचा जा सकता है, तब उपयोगकर्ता रेंडर किए गए नतीजे के पाथ (या वेपॉइंट) पर कोई भी पॉइंट चुन सकता है और बताए गए कॉम्पोनेंट को नई जगह पर ले जा सकता है. बदला गया पाथ दिखाने के लिए, DirectionsRenderer
डाइनैमिक तौर पर अपडेट होगा. रिलीज़ होने के बाद, मैप पर एक ट्रांज़िशनल वेपॉइंट जोड़ दिया जाएगा. इसे एक छोटे से सफ़ेद मार्कर की मदद से दिखाया जाएगा. किसी पाथ सेगमेंट को चुनने और उसे आगे-पीछे ले जाने से,
रूट का वह लेग बदल जाएगा.
किसी वेपॉइंट मार्कर (इसमें शुरुआती और आखिरी पॉइंट भी शामिल हैं) को चुनने और मूव करने पर,
उस वेपॉइंट से गुज़रने वाले रास्ते के लेग बदल जाएंगे.
खींचने और छोड़ने लायक दिशा-निर्देशों में बदलाव किया गया है और उन्हें क्लाइंट-साइड पर रेंडर किया गया है. इसलिए, हो सकता है कि आप DirectionsRenderer
पर directions_changed
इवेंट को मॉनिटर और मैनेज करना चाहें, ताकि जब उपयोगकर्ता दिखाए गए निर्देशों में बदलाव करे, तो आपको इसकी सूचना मिले.
नीचे दिया गया कोड, ऑस्ट्रेलिया के पश्चिमी तट पर मौजूद पर्थ से पूर्वी तट पर सिडनी की यात्रा दिखाता है. यह कोड, यात्रा की सभी पैरों की कुल दूरी को अपडेट करने के लिए, directions_changed
इवेंट पर नज़र रखता है.
TypeScript
function initMap(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 4, center: { lat: -24.345, lng: 134.46 }, // Australia. } ); const directionsService = new google.maps.DirectionsService(); const directionsRenderer = new google.maps.DirectionsRenderer({ draggable: true, map, panel: document.getElementById("panel") as HTMLElement, }); directionsRenderer.addListener("directions_changed", () => { const directions = directionsRenderer.getDirections(); if (directions) { computeTotalDistance(directions); } }); displayRoute( "Perth, WA", "Sydney, NSW", directionsService, directionsRenderer ); } function displayRoute( origin: string, destination: string, service: google.maps.DirectionsService, display: google.maps.DirectionsRenderer ) { service .route({ origin: origin, destination: destination, waypoints: [ { location: "Adelaide, SA" }, { location: "Broken Hill, NSW" }, ], travelMode: google.maps.TravelMode.DRIVING, avoidTolls: true, }) .then((result: google.maps.DirectionsResult) => { display.setDirections(result); }) .catch((e) => { alert("Could not display directions due to: " + e); }); } function computeTotalDistance(result: google.maps.DirectionsResult) { let total = 0; const myroute = result.routes[0]; if (!myroute) { return; } for (let i = 0; i < myroute.legs.length; i++) { total += myroute.legs[i]!.distance!.value; } total = total / 1000; (document.getElementById("total") as HTMLElement).innerHTML = total + " km"; } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 4, center: { lat: -24.345, lng: 134.46 }, // Australia. }); const directionsService = new google.maps.DirectionsService(); const directionsRenderer = new google.maps.DirectionsRenderer({ draggable: true, map, panel: document.getElementById("panel"), }); directionsRenderer.addListener("directions_changed", () => { const directions = directionsRenderer.getDirections(); if (directions) { computeTotalDistance(directions); } }); displayRoute( "Perth, WA", "Sydney, NSW", directionsService, directionsRenderer, ); } function displayRoute(origin, destination, service, display) { service .route({ origin: origin, destination: destination, waypoints: [ { location: "Adelaide, SA" }, { location: "Broken Hill, NSW" }, ], travelMode: google.maps.TravelMode.DRIVING, avoidTolls: true, }) .then((result) => { display.setDirections(result); }) .catch((e) => { alert("Could not display directions due to: " + e); }); } function computeTotalDistance(result) { let total = 0; const myroute = result.routes[0]; if (!myroute) { return; } for (let i = 0; i < myroute.legs.length; i++) { total += myroute.legs[i].distance.value; } total = total / 1000; document.getElementById("total").innerHTML = total + " km"; } window.initMap = initMap;