ওভারভিউ
DirectionsService
অবজেক্ট ব্যবহার করে আপনি দিকনির্দেশ (পরিবহনের বিভিন্ন পদ্ধতি ব্যবহার করে) গণনা করতে পারেন। এই বস্তুটি Google Maps API নির্দেশনা পরিষেবার সাথে যোগাযোগ করে যা দিকনির্দেশের অনুরোধ গ্রহণ করে এবং একটি দক্ষ পথ ফেরত দেয়। ভ্রমণের সময় হল প্রাথমিক ফ্যাক্টর যা অপ্টিমাইজ করা হয়, তবে অন্যান্য কারণ যেমন দূরত্ব, বাঁকের সংখ্যা এবং আরও অনেক কিছু বিবেচনায় নেওয়া যেতে পারে। আপনি হয় এই দিকনির্দেশের ফলাফলগুলি নিজেই পরিচালনা করতে পারেন বা এই ফলাফলগুলি রেন্ডার করতে DirectionsRenderer
অবজেক্ট ব্যবহার করতে পারেন৷
একটি দিকনির্দেশের অনুরোধে উত্স বা গন্তব্য নির্দিষ্ট করার সময়, আপনি একটি ক্যোয়ারী স্ট্রিং নির্দিষ্ট করতে পারেন (উদাহরণস্বরূপ, "শিকাগো, IL" বা "ডারউইন, NSW, অস্ট্রেলিয়া"), একটি LatLng
মান, বা একটি স্থান বস্তু।
দিকনির্দেশ পরিষেবা ওয়েপয়েন্টগুলির একটি সিরিজ ব্যবহার করে বহু-অংশের দিকনির্দেশ ফিরিয়ে দিতে পারে। দিকনির্দেশগুলি একটি মানচিত্রের রুট অঙ্কনকারী পলিলাইন হিসাবে প্রদর্শিত হয়, অথবা একটি <div>
উপাদানের মধ্যে পাঠ্য বর্ণনার একটি সিরিজ হিসাবে (উদাহরণস্বরূপ, "উদাহরণস্বরূপ, উইলিয়ামসবার্গ ব্রিজের র্যাম্পে ডান দিকে ঘুরুন")।
শুরু হচ্ছে
Maps JavaScript API-এ দিকনির্দেশ পরিষেবা ব্যবহার করার আগে, প্রথমে নিশ্চিত করুন যে Google ক্লাউড কনসোলে আপনি Maps JavaScript API-এর জন্য সেট আপ করেছেন একই প্রকল্পে নির্দেশাবলী API সক্ষম করা আছে।
আপনার সক্রিয় API এর তালিকা দেখতে:
- গুগল ক্লাউড কনসোলে যান।
- একটি প্রকল্প নির্বাচন করুন বোতামে ক্লিক করুন, তারপরে আপনি মানচিত্র জাভাস্ক্রিপ্ট API-এর জন্য সেট আপ করা একই প্রকল্প নির্বাচন করুন এবং খুলুন ক্লিক করুন।
- ড্যাশবোর্ডে API-এর তালিকা থেকে, দিকনির্দেশ API সন্ধান করুন।
- আপনি যদি তালিকায় API দেখতে পান, আপনি সম্পূর্ণ প্রস্তুত। API তালিকাভুক্ত না হলে, এটি সক্ষম করুন:
- পৃষ্ঠার শীর্ষে, লাইব্রেরি ট্যাব প্রদর্শন করতে API ENABLE নির্বাচন করুন। বিকল্পভাবে, বাম পাশের মেনু থেকে, লাইব্রেরি নির্বাচন করুন।
- দিকনির্দেশ API অনুসন্ধান করুন, তারপর ফলাফল তালিকা থেকে এটি নির্বাচন করুন।
- ENABLE নির্বাচন করুন। প্রক্রিয়াটি শেষ হলে, ড্যাশবোর্ডে API-এর তালিকায় দিকনির্দেশ API উপস্থিত হয়।
মূল্য এবং নীতি
মূল্য নির্ধারণ
16 জুলাই, 2018 থেকে কার্যকরী, মানচিত্র, রুট এবং স্থানগুলির জন্য একটি নতুন মূল্য-প্রদানের পরিকল্পনা কার্যকর হয়েছে৷ জাভাস্ক্রিপ্ট দিকনির্দেশ পরিষেবার আপনার ব্যবহারের জন্য নতুন মূল্য এবং ব্যবহারের সীমা সম্পর্কে আরও জানতে, নির্দেশাবলী API-এর ব্যবহার এবং বিলিং দেখুন৷
নীতিমালা
দিকনির্দেশ পরিষেবার ব্যবহার অবশ্যই নির্দেশাবলী API-এর জন্য বর্ণিত নীতি অনুসারে হতে হবে৷
নির্দেশাবলী অনুরোধ
দিকনির্দেশ পরিষেবা অ্যাক্সেস করা অ্যাসিঙ্ক্রোনাস, যেহেতু Google Maps API-কে একটি বহিরাগত সার্ভারে কল করতে হবে৷ সেই কারণে, অনুরোধটি সম্পূর্ণ হওয়ার পরে কার্যকর করার জন্য আপনাকে একটি কলব্যাক পদ্ধতি পাস করতে হবে। এই কলব্যাক পদ্ধতির ফলাফল(গুলি) প্রক্রিয়া করা উচিত। মনে রাখবেন যে দিকনির্দেশ পরিষেবা পৃথক routes[]
।
মানচিত্র জাভাস্ক্রিপ্ট এপিআই-এ দিকনির্দেশগুলি ব্যবহার করতে, 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
(উদাহরণস্বরূপ, "শিকাগো, IL"), একটিLatLng
মান হিসাবে বা একটি স্থান বস্তু হিসাবে নির্দিষ্ট করা যেতে পারে। আপনি যদি একটি প্লেস অবজেক্ট ব্যবহার করেন, আপনি একটি স্থান আইডি , একটি ক্যোয়ারী স্ট্রিং বা একটিLatLng
অবস্থান নির্দিষ্ট করতে পারেন৷ আপনি মানচিত্র জাভাস্ক্রিপ্ট API-এ জিওকোডিং, স্থান অনুসন্ধান এবং স্থান স্বয়ংসম্পূর্ণ পরিষেবাগুলি থেকে স্থান আইডি পুনরুদ্ধার করতে পারেন৷ প্লেস স্বয়ংসম্পূর্ণ থেকে স্থান আইডি ব্যবহার করার উদাহরণের জন্য, স্থান স্বয়ংসম্পূর্ণ এবং দিকনির্দেশ দেখুন। -
destination
( প্রয়োজনীয় ) শেষ অবস্থান নির্দিষ্ট করে যেখানে দিকনির্দেশ গণনা করতে হবে। বিকল্পগুলি উপরে বর্ণিতorigin
ক্ষেত্রের মতোই। -
travelMode
( প্রয়োজনীয় ) নির্দেশনা গণনা করার সময় পরিবহনের কোন মোড ব্যবহার করতে হবে তা নির্দিষ্ট করে। বৈধ মান নীচে ভ্রমণ মোডে নির্দিষ্ট করা আছে. -
transitOptions
( ঐচ্ছিক ) মান নির্দিষ্ট করে যা শুধুমাত্র অনুরোধের ক্ষেত্রে প্রযোজ্য যেখানেtravelMode
TRANSIT
হয়। বৈধ মানগুলি নীচে ট্রানজিট বিকল্পগুলিতে বর্ণিত হয়েছে৷ -
drivingOptions
( ঐচ্ছিক ) মানগুলি নির্দিষ্ট করে যা শুধুমাত্র অনুরোধের ক্ষেত্রে প্রযোজ্য যেখানেtravelMode
DRIVING
করে। বৈধ মানগুলি নীচে ড্রাইভিং বিকল্পগুলিতে বর্ণিত হয়েছে৷ unitSystem
( ঐচ্ছিক ) ফলাফল প্রদর্শন করার সময় কোন ইউনিট সিস্টেম ব্যবহার করতে হবে তা নির্দিষ্ট করে। নিচের ইউনিট সিস্টেমে বৈধ মান উল্লেখ করা হয়েছে।waypoints[]
( ঐচ্ছিক )DirectionsWaypoint
s এর একটি অ্যারে নির্দিষ্ট করে। ওয়েপয়েন্টগুলি নির্দিষ্ট অবস্থান(গুলি) এর মাধ্যমে রুট করে একটি রুট পরিবর্তন করে। একটি ওয়েপয়েন্টকে একটি অবজেক্ট আক্ষরিক হিসাবে নির্দিষ্ট করা হয়েছে নীচে দেখানো ক্ষেত্রগুলির সাথে:-
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 মানচিত্র প্ল্যাটফর্ম কভারেজের বিবরণ দেখুন । আপনি যদি এমন একটি অঞ্চলের জন্য দিকনির্দেশের জন্য অনুরোধ করেন যেখানে সেই দিকনির্দেশের ধরণটি উপলব্ধ নয়, প্রতিক্রিয়াটি 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
অবজেক্ট লিটারেল থাকে। অনুরোধে একটি API কী অন্তর্ভুক্ত থাকলেই এই ক্ষেত্রটি অন্তর্ভুক্ত করা যেতে পারে। প্রতিটিTransitMode
ট্রানজিটের একটি পছন্দের মোড নির্দিষ্ট করে। নিম্নলিখিত মান অনুমোদিত:-
BUS
নির্দেশ করে যে গণনা করা রুটটি বাসে ভ্রমণ করতে পছন্দ করবে। -
RAIL
নির্দেশ করে যে গণনা করা রুটে ট্রেন, ট্রাম, হালকা রেল এবং পাতাল রেলে ভ্রমণ করা উচিত। -
SUBWAY
নির্দেশ করে যে গণনা করা রুটটি পাতাল রেলে ভ্রমণ করতে পছন্দ করবে। -
TRAIN
নির্দেশ করে যে গণনা করা রুটে ট্রেনে ভ্রমণ করা উচিত। -
TRAM
ইঙ্গিত দেয় যে গণনা করা রুটটি ট্রাম এবং হালকা রেল দ্বারা ভ্রমণ পছন্দ করবে৷
-
-
routingPreference
( ঐচ্ছিক ) ট্রানজিট রুটের জন্য পছন্দগুলি নির্দিষ্ট করে। এই বিকল্পটি ব্যবহার করে, আপনি API দ্বারা নির্বাচিত ডিফল্ট সেরা রুটটি গ্রহণ করার পরিবর্তে ফেরত দেওয়া বিকল্পগুলিকে পক্ষপাতিত্ব করতে পারেন৷ অনুরোধে একটি API কী অন্তর্ভুক্ত থাকলেই এই ক্ষেত্রটি নির্দিষ্ট করা যেতে পারে। নিম্নলিখিত মান অনুমোদিত:-
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
অবজেক্ট হিসাবে প্রস্থানের পছন্দসই সময় নির্দিষ্ট করে। মান বর্তমান সময় বা ভবিষ্যতে কিছু সময় সেট করা আবশ্যক. এটা অতীত হতে পারে না। (টাইম জোন জুড়ে সামঞ্জস্যপূর্ণ পরিচালনা নিশ্চিত করতে API সমস্ত তারিখগুলিকে UTC-তে রূপান্তর করে।) Google Maps প্ল্যাটফর্ম প্রিমিয়াম প্ল্যান গ্রাহকদের জন্য, আপনি যদি অনুরোধেdepartureTime
সময় অন্তর্ভুক্ত করেন, তাহলে API সেই সময়ে প্রত্যাশিত ট্র্যাফিক অবস্থার প্রেক্ষিতে সেরা রুটটি ফেরত দেয় এবং প্রতিক্রিয়াতে ট্রাফিকের পূর্বাভাসিত সময় (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 নির্দেশ পরিষেবা ঠিকানা ফলাফল প্রদান করে। (যেহেতু বেশিরভাগ ব্যবহারকারী 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 ফর্ম্যাট)। অন্য সব ইনপুট ত্রুটির ফলে হবে.
অঞ্চল বায়াসিং শুধুমাত্র দেশ এবং অঞ্চলগুলির জন্য সমর্থিত দিকনির্দেশ সমর্থন করে৷ দিকনির্দেশ API-এর আন্তর্জাতিক কভারেজ দেখতে Google মানচিত্র প্ল্যাটফর্ম কভারেজের বিবরণ দেখুন।
রেন্ডারিং দিকনির্দেশ
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
এ দিকনির্দেশের প্রশ্নের ফলাফল রয়েছে, যা আপনি নিজেই পরিচালনা করতে পারেন, অথবা একটি DirectionsRenderer
অবজেক্টে পাঠাতে পারেন, যা স্বয়ংক্রিয়ভাবে একটি মানচিত্রে ফলাফল প্রদর্শন করা পরিচালনা করতে পারে।
একটি DirectionsResult
ব্যবহার করে একটি DirectionsRenderer
ফলাফল প্রদর্শন করতে, আপনাকে নিম্নলিখিতগুলি করতে হবে:
- একটি
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); } }); }
HTML বডিতে:
<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>
নিম্নলিখিত উদাহরণটি সান ফ্রান্সিসকো, CA-তে Haight-Ashbury থেকে Ocean Beach এর মধ্যে ভ্রমণের বিভিন্ন উপায় ব্যবহার করে দিকনির্দেশ দেখায়:
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); } }); }
HTML বডিতে:
<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
প্যারামিটার ব্যবহার করে API জাভাস্ক্রিপ্ট লোড করার সময় নির্দিষ্ট করা ভাষা ব্যবহার করে প্রদান করা হবে। (আরো তথ্যের জন্য, স্থানীয়করণ দেখুন। ) ট্রানজিট দিকনির্দেশের ক্ষেত্রে, সময়টি সেই ট্রানজিট স্টপে টাইম জোনে প্রদর্শিত হবে।
নিচের উদাহরণটি উপরে দেখানোর মতই, কিন্তু একটি <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); } }); }
HTML বডিতে:
<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 হল API-এর শেষ সংস্করণ যা বিকল্প রুটে ওয়েপয়েন্টের মাধ্যমে অতিরিক্ত যোগ করে। API-এর 3.28 এবং উচ্চতর সংস্করণগুলির জন্য, আপনি বিকল্প রুটগুলির টেনে আনা নিষ্ক্রিয় করে দিকনির্দেশ পরিষেবা ব্যবহার করে টেনে আনাযোগ্য দিকনির্দেশগুলি প্রয়োগ করা চালিয়ে যেতে পারেন৷ শুধুমাত্র প্রধান রুট টেনে আনা উচিত। ব্যবহারকারীরা মূল রুটটি টেনে আনতে পারবেন যতক্ষণ না এটি একটি বিকল্প রুটের সাথে মেলে।
দিকনির্দেশ জিওকোডেড ওয়েপয়েন্ট
একটি DirectionsGeocodedWaypoint
জিওকোডেড ওয়েপয়েন্টে উৎপত্তি, গন্তব্য এবং ওয়েপয়েন্টের জিওকোডিং সম্পর্কে বিশদ বিবরণ রয়েছে।
DirectionsGeocodedWaypoint
নিম্নলিখিত ক্ষেত্রগুলির সাথে আক্ষরিক একটি বস্তু:
-
geocoder_status
জিওকোডিং অপারেশনের ফলে স্থিতি কোড নির্দেশ করে। এই ক্ষেত্রটিতে নিম্নলিখিত মান থাকতে পারে।-
"OK"
নির্দেশ করে যে কোন ত্রুটি ঘটেনি; ঠিকানাটি সফলভাবে পার্স করা হয়েছে এবং অন্তত একটি জিওকোড ফেরত দেওয়া হয়েছে। -
"ZERO_RESULTS"
ইঙ্গিত করে যে জিওকোড সফল হয়েছে কিন্তু কোনো ফলাফল দেয়নি৷ এটি ঘটতে পারে যদি জিওকোডারটি একটি অস্তিত্বহীনaddress
পাস করা হয়।
-
partial_match
নির্দেশ করে যে জিওকোডার আসল অনুরোধের জন্য একটি সঠিক মিল ফেরত দেয়নি, যদিও এটি অনুরোধ করা ঠিকানার অংশের সাথে মেলে। আপনি ভুল বানান এবং/অথবা একটি অসম্পূর্ণ ঠিকানার জন্য আসল অনুরোধটি পরীক্ষা করতে চাইতে পারেন।আংশিক মিলগুলি প্রায়শই রাস্তার ঠিকানাগুলির জন্য ঘটে যা আপনার অনুরোধে পাস করা এলাকার মধ্যে বিদ্যমান নেই। আংশিক মিলগুলিও ফেরত দেওয়া হতে পারে যখন একটি অনুরোধ একই এলাকার দুই বা ততোধিক অবস্থানের সাথে মেলে। উদাহরণস্বরূপ, "Hillpar St, Bristol, UK" Henry Street এবং Henrietta Street উভয়ের জন্য একটি আংশিক ম্যাচ ফিরিয়ে দেবে। মনে রাখবেন যে যদি একটি অনুরোধে একটি ভুল বানান ঠিকানা উপাদান অন্তর্ভুক্ত থাকে, জিওকোডিং পরিষেবা একটি বিকল্প ঠিকানা প্রস্তাব করতে পারে। এইভাবে ট্রিগার করা প্রস্তাবনাগুলিকেও একটি আংশিক মিল হিসাবে চিহ্নিত করা হবে৷
-
place_id
একটি স্থানের একটি অনন্য শনাক্তকারী, যা অন্যান্য Google API-এর সাথে ব্যবহার করা যেতে পারে। উদাহরণস্বরূপ, আপনি স্থানীয় ব্যবসার বিশদ বিবরণ পেতে Google Places API লাইব্রেরির সাথেplace_id
ব্যবহার করতে পারেন, যেমন ফোন নম্বর, খোলার সময়, ব্যবহারকারীর পর্যালোচনা এবং আরও অনেক কিছু। স্থান আইডি ওভারভিউ দেখুন. - type
types[]
একটি অ্যারে যা প্রত্যাবর্তিত ফলাফলের ধরণ নির্দেশ করে। এই অ্যারেতে শূন্য বা তার বেশি ট্যাগের একটি সেট রয়েছে যা ফলাফলে প্রত্যাবর্তিত বৈশিষ্ট্যের ধরণ সনাক্ত করে। উদাহরণস্বরূপ, "শিকাগো" এর একটি জিওকোড "স্থানীয়তা" প্রদান করে যা নির্দেশ করে যে "শিকাগো" একটি শহর, এবং এছাড়াও "রাজনৈতিক" প্রদান করে যা নির্দেশ করে যে এটি একটি রাজনৈতিক সত্তা।
দিকনির্দেশের রুট
দ্রষ্টব্য : লিগ্যাসি DirectionsTrip
অবজেক্টের নাম পরিবর্তন করে DirectionsRoute
রাখা হয়েছে। মনে রাখবেন যে একটি রুট এখন পুরো যাত্রা শুরু থেকে শেষ যাত্রাকে বোঝায়, শুধুমাত্র একটি অভিভাবক ট্রিপের একটি পা না দিয়ে।
একটি DirectionsRoute
রুটে নির্দিষ্ট উত্স এবং গন্তব্য থেকে একটি একক ফলাফল রয়েছে৷ কোনো ওয়েপয়েন্ট নির্দিষ্ট করা হয়েছে কিনা তার উপর নির্ভর করে এই রুটে এক বা একাধিক পা থাকতে পারে ( DirectionsLeg
টাইপ)। সেইসাথে, রুটে কপিরাইট এবং সতর্কতা সংক্রান্ত তথ্যও রয়েছে যা অবশ্যই রাউটিং তথ্য ছাড়াও ব্যবহারকারীর কাছে প্রদর্শিত হবে।
DirectionsRoute
হল নিম্নলিখিত ক্ষেত্রগুলির সাথে আক্ষরিক একটি বস্তু:
-
legs[]
এDirectionsLeg
লেগ অবজেক্টের একটি অ্যারে রয়েছে, যার প্রতিটিতে প্রদত্ত রুটের মধ্যে দুটি অবস্থান থেকে রুটের একটি লেগ সম্পর্কে তথ্য রয়েছে। প্রতিটি ওয়েপয়েন্ট বা নির্দিষ্ট গন্তব্যের জন্য একটি পৃথক পা উপস্থিত থাকবে। (কোনও পথবিন্দু নেই এমন রুটে ঠিক একটিDirectionsLeg
লেগ থাকবে।) প্রতিটি পায়েDirectionStep
ধাপের একটি সিরিজ থাকে। -
waypoint_order
এ একটি অ্যারে রয়েছে যা গণনা করা রুটের যেকোনো ওয়েপয়েন্টের ক্রম নির্দেশ করে। এই অ্যারেতে একটি পরিবর্তিত অর্ডার থাকতে পারে যদিDirectionsRequest
পাস করা হয়optimizeWaypoints: true
। -
overview_path
এLatLng
s এর একটি অ্যারে রয়েছে যা ফলাফলের দিকনির্দেশগুলির একটি আনুমানিক (মসৃণ) পথ উপস্থাপন করে। -
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
-এ সেট করা আছে। - অনুরোধে
drivingOptions
ফিল্ডের অংশ হিসেবেdepartureTime
সময় অন্তর্ভুক্ত করা হয়েছে। - অনুরোধ করা রুটের জন্য ট্রাফিক শর্ত উপলব্ধ.
duration_in_traffic
নিম্নলিখিত ক্ষেত্রগুলি ধারণ করে:-
value
সেকেন্ডে সময়কাল নির্দেশ করে। -
text
সময়কালের একটি মানব-পাঠযোগ্য উপস্থাপনা ধারণ করে।
- অনুরোধে স্টপওভার ওয়েপয়েন্ট অন্তর্ভুক্ত নয়। অর্থাৎ, এটি ওয়েপয়েন্ট অন্তর্ভুক্ত করে না যেখানে
-
arrival_time
এই পায়ের আগমনের আনুমানিক সময় ধারণ করে। এই সম্পত্তি শুধুমাত্র ট্রানজিট দিকনির্দেশের জন্য ফেরত দেওয়া হয়. ফলাফলটি তিনটি বৈশিষ্ট্য সহ একটিTime
অবজেক্ট হিসাবে ফিরে আসে:- একটি জাভাস্ক্রিপ্ট
Date
অবজেক্ট হিসাবে নির্দিষ্ট সময়েরvalue
। - একটি স্ট্রিং হিসাবে নির্দিষ্ট সময়
text
করুন। সময়টি ট্রানজিট স্টপের সময় অঞ্চলে প্রদর্শিত হয়। -
time_zone
এই স্টেশনের সময় অঞ্চল ধারণ করে। মান হল IANA টাইম জোন ডেটাবেসে সংজ্ঞায়িত সময় অঞ্চলের নাম, যেমন "America/New_York"।
- একটি জাভাস্ক্রিপ্ট
-
departure_time
এই পায়ের জন্য প্রস্থানের আনুমানিক সময় ধারণ করে, একটিTime
অবজেক্ট হিসাবে নির্দিষ্ট করা হয়েছে।departure_time
শুধুমাত্র ট্রানজিট দিকনির্দেশের জন্য উপলব্ধ। -
start_location
এ এই পায়ের উৎপত্তিরLatLng
রয়েছে। যেহেতু দিকনির্দেশ ওয়েব পরিষেবাটি শুরু এবং শেষ পয়েন্টগুলিতে নিকটতম পরিবহন বিকল্প (সাধারণত একটি রাস্তা) ব্যবহার করে অবস্থানগুলির মধ্যে দিকনির্দেশ গণনা করে, উদাহরণস্বরূপ, একটি রাস্তা যদি উত্সের কাছাকাছি না হয় তবেstart_location
এই পায়ের প্রদত্ত উত্স থেকে আলাদা হতে পারে . -
end_location
এ এই পায়ের গন্তব্যেরLatLng
থাকে। যেহেতুDirectionsService
শুরু এবং শেষ পয়েন্টগুলিতে নিকটতম পরিবহন বিকল্প (সাধারণত একটি রাস্তা) ব্যবহার করে অবস্থানগুলির মধ্যে দিকনির্দেশ গণনা করে, উদাহরণস্বরূপ, যদি একটি রাস্তা গন্তব্যের কাছাকাছি না থাকে তবেend_location
এই পায়ের প্রদত্ত গন্তব্যের চেয়ে আলাদা হতে পারে। -
start_address
এ এই পায়ের শুরুর মানুষের-পাঠযোগ্য ঠিকানা (সাধারণত একটি রাস্তার ঠিকানা) থাকে।
এই বিষয়বস্তু যেমন আছে পড়া বোঝানো হয়. ফরম্যাট করা ঠিকানা প্রোগ্রাম্যাটিকভাবে পার্স করবেন না। -
end_address
এ এই পায়ের শেষের মানুষের-পাঠযোগ্য ঠিকানা (সাধারণত একটি রাস্তার ঠিকানা) থাকে।
এই বিষয়বস্তু যেমন আছে পড়া বোঝানো হয়. ফরম্যাট করা ঠিকানা প্রোগ্রাম্যাটিকভাবে পার্স করবেন না।
দিকনির্দেশের ধাপ
একটি DirectionsStep
স্টেপ হল একটি দিকনির্দেশের রুটের সবচেয়ে পারমাণবিক একক, যেখানে যাত্রার একটি নির্দিষ্ট, একক নির্দেশ বর্ণনা করে একটি একক ধাপ রয়েছে। যেমন "W. 4th St-এ বাম দিকে ঘুরুন।" ধাপটি শুধুমাত্র নির্দেশ বর্ণনা করে না তবে এই ধাপটি কীভাবে নিম্নলিখিত ধাপের সাথে সম্পর্কিত তা সম্পর্কিত দূরত্ব এবং সময়কালের তথ্যও রয়েছে। উদাহরণস্বরূপ, "I-80 পশ্চিমে একত্রিত করুন" হিসাবে চিহ্নিত একটি ধাপে "37 মাইল" এবং "40 মিনিট" সময়কাল থাকতে পারে, যা নির্দেশ করে যে এই ধাপ থেকে পরবর্তী ধাপটি 37 মাইল/40 মিনিট।
ট্রানজিট দিকনির্দেশ অনুসন্ধান করার জন্য দিকনির্দেশ পরিষেবা ব্যবহার করার সময়, পদক্ষেপ অ্যারে একটি transit
বস্তুর আকারে অতিরিক্ত ট্রানজিট নির্দিষ্ট তথ্য অন্তর্ভুক্ত করবে। যদি নির্দেশাবলীতে পরিবহনের একাধিক মোড অন্তর্ভুক্ত থাকে, তবে একটি steps[]
অ্যারেতে হাঁটা বা গাড়ি চালানোর জন্য বিস্তারিত দিকনির্দেশ প্রদান করা হবে। উদাহরণস্বরূপ, একটি হাঁটার ধাপে শুরু এবং শেষের অবস্থান থেকে দিকনির্দেশ অন্তর্ভুক্ত থাকবে: "Innes 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
অবজেক্টের জন্য নিচে বর্ণিত অতিরিক্ত তথ্য অ্যাক্সেস করতে পারবেন।
ট্রানজিট বিবরণ
The TransitDetails
object exposes the following properties:
-
arrival_stop
contains aTransitStop
object representing the arrival station/stop with the following properties:-
name
the name of the transit station/stop. eg. "Union Square". -
location
the location of the transit station/stop, represented as aLatLng
.
-
-
departure_stop
contains aTransitStop
object representing the departure station/stop. -
arrival_time
contains the arrival time, specified as aTime
object with three properties:-
value
the time specified as a JavaScriptDate
object. -
text
the time specified as a string. The time is displayed in the time zone of the transit stop. -
time_zone
contains the time zone of this station. The value is the name of the time zone as defined in the IANA Time Zone Database , eg "America/New_York".
-
-
departure_time
contains the departure time, specified as aTime
object. -
headsign
specifies the direction in which to travel on this line, as it is marked on the vehicle or at the departure stop. This will often be the terminus station. -
headway
when available, this specifies the expected number of seconds between departures from the same stop at this time. For example, with aheadway
value of 600, you would expect a ten minute wait if you should miss your bus. -
line
contains aTransitLine
object literal that contains information about the transit line used in this step. TheTransitLine
provides the name and operator of the line, along with other properties described in theTransitLine
reference documentation. -
num_stops
contains the number of stops in this step. Includes the arrival stop, but not the departure stop. For example, if your directions involve leaving from Stop A, passing through stops B and C, and arriving at stop D,num_stops
will return 3.
Transit Line
The TransitLine
object exposes the following properties:
-
name
contains the full name of this transit line. eg. "7 Avenue Express" or "14th St Crosstown". -
short_name
contains the short name of this transit line. This will normally be a line number, such as "2" or "M14". -
agencies
is an array containing a singleTransitAgency
object. TheTransitAgency
object provides information about the operator of this line, including the following properties:-
name
contains the name of the transit agency. -
phone
contains the phone number of the transit agency. -
url
contains the URL for the transit agency.
Note : If you are rendering transit directions manually instead of using the
DirectionsRenderer
object, you must display the names and URLs of the transit agencies servicing the trip results. -
-
url
contains a URL for this transit line as provided by the transit agency. -
icon
contains a URL for the icon associated with this line. Most cities will use generic icons that vary by the type of vehicle. Some transit lines, such as the New York subway system, have icons specific to that line. -
color
contains the color commonly used in signage for this transit. The color will be specified as a hex string such as: #FF0033. -
text_color
contains the color of text commonly used for signage of this line. The color will be specified as a hex string. -
vehicle
contains aVehicle
object that includes the following properties:-
name
contains the name of the vehicle on this line. eg. "Subway." -
type
contains the type of vehicle used on this line. See the Vehicle Type documentation for a complete list of supported values. -
icon
contains a URL for the icon commonly associated with this vehicle type. -
local_icon
contains the URL for the icon associated with this vehicle type, based on the local transport signage.
-
Vehicle Type
The VehicleType
object exposes the following properties:
Value | Definition |
---|---|
VehicleType.RAIL | Rail. |
VehicleType.METRO_RAIL | Light rail transit. |
VehicleType.SUBWAY | Underground light rail. |
VehicleType.TRAM | Above ground light rail. |
VehicleType.MONORAIL | Monorail. |
VehicleType.HEAVY_RAIL | Heavy rail. |
VehicleType.COMMUTER_TRAIN | Commuter rail. |
VehicleType.HIGH_SPEED_TRAIN | High speed train. |
VehicleType.BUS | Bus. |
VehicleType.INTERCITY_BUS | Intercity bus. |
VehicleType.TROLLEYBUS | Trolleybus. |
VehicleType.SHARE_TAXI | Share taxi is a kind of bus with the ability to drop off and pick up passengers anywhere on its route. |
VehicleType.FERRY | Ferry. |
VehicleType.CABLE_CAR | A vehicle that operates on a cable, usually on the ground. Aerial cable cars may be of the type VehicleType.GONDOLA_LIFT . |
VehicleType.GONDOLA_LIFT | An aerial cable car. |
VehicleType.FUNICULAR | A vehicle that is pulled up a steep incline by a cable. A Funicular typically consists of two cars, with each car acting as a counterweight for the other. |
VehicleType.OTHER | All other vehicles will return this type. |
Inspecting DirectionsResults
The DirectionsResults
components — DirectionsRoute
, DirectionsLeg
, DirectionsStep
and TransitDetails
— may be inspected and used when parsing any directions response.
Important : If you are rendering transit directions manually instead of using the DirectionsRenderer
object, you must display the names and URLs of the transit agencies servicing the trip results.
The following example plots walking directions to certain tourist attractions in New York City. We inspect the route's DirectionsStep
to add markers for each step, and attach information to an InfoWindow
with instructional text for that step.
Note : Since we are calculating walking directions, we also display any warnings to the user in a separate <div>
panel.
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); }); }
In the HTML body:
<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>
Using Waypoints in Routes
As noted within the DirectionsRequest , you may also specify waypoints (of type DirectionsWaypoint
) when calculating routes using the Directions service for walking, bicycling or driving directions. Waypoints are not available for transit directions. Waypoints allow you to calculate routes through additional locations, in which case the returned route passes through the given waypoints.
A waypoint
consists of the following fields:
-
location
(required) specifies the address of the waypoint. -
stopover
(optional) indicates whether this waypoint is a actual stop on the route (true
) or instead only a preference to route through the indicated location (false
). Stopovers aretrue
by default.
By default, the Directions service calculates a route through the provided waypoints in their given order. Optionally, you may pass optimizeWaypoints: true
within the DirectionsRequest
to allow the Directions service to optimize the provided route by rearranging the waypoints in a more efficient order. (This optimization is an application of the traveling salesperson problem .) Travel time is the primary factor which is optimized, but other factors such as distance, number of turns and many more may be taken into account when deciding which route is the most efficient. All waypoints must be stopovers for the Directions service to optimize their route.
If you instruct the Directions service to optimize the order of its waypoints, their order will be returned in the waypoint_order
field within the DirectionsResult
object.
The following example calculates cross-country routes across the United States using a variety of start points, end points, and waypoints. (To select multiple waypoints, press Ctrl-Click when selecting items within the list.) Note that we inspect the routes.start_address
and routes.end_address
to provide us with the text for each route's start and end point.
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;
Limits and Restrictions for Waypoints
The following usage limits and restrictions apply:
- The maximum number of waypoints allowed when using the Directions service in the Maps JavaScript API is 25, plus the origin and destination. The limits are the same for the Directions API web service .
- For the Directions API web service , customers are allowed 25 waypoints, plus the origin, and destination.
- Google Maps Platform Premium Plan customers are allowed 25 waypoints, plus the origin, and destination.
- Waypoints are not supported for transit directions.
Draggable Directions
Users may modify cycling, walking or driving directions displayed using a DirectionsRenderer
dynamically if they are draggable , allowing a user to select and alter routes by clicking and dragging the resulting paths on the map. You indicate whether a renderer's display allows draggable directions by setting its draggable
property to true
. Transit directions cannot be made draggable.
When directions are draggable, a user may select any point on the path (or waypoint) of the rendered result and move the indicated component to a new location. The DirectionsRenderer
will dynamically update to show the modified path. Upon release, a transitional waypoint will be added to the map (indicated by a small white marker). Selecting and moving a path segment will alter that leg of the route, while selecting and moving a waypoint marker (including start and end points) will alter the legs of the route passing through that waypoint.
Because draggable directions are modified and rendered client-side, you may wish to monitor and handle the directions_changed
event on the DirectionsRenderer
to be notified when the user has modified the displayed directions.
The following code shows a trip from Perth on the west coast of Australia to Sydney on the east coast. The code monitors the directions_changed
event to update the total distance of all legs of the journey.
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;