দিকনির্দেশ পরিষেবা

ইউরোপীয় অর্থনৈতিক অঞ্চল (EEA) ডেভেলপাররা
দ্রষ্টব্য: সার্ভার-সাইড লাইব্রেরি

সংক্ষিপ্ত বিবরণ

আপনি DirectionsService অবজেক্ট ব্যবহার করে দিকনির্দেশনা গণনা করতে পারেন (পরিবহনের বিভিন্ন পদ্ধতি ব্যবহার করে)। এই অবজেক্টটি Google Maps API Directions Service এর সাথে যোগাযোগ করে যা দিকনির্দেশনার অনুরোধ গ্রহণ করে এবং একটি দক্ষ পথ প্রদান করে। ভ্রমণের সময় হল প্রাথমিক ফ্যাক্টর যা অপ্টিমাইজ করা হয়, তবে অন্যান্য ফ্যাক্টর যেমন দূরত্ব, বাঁকের সংখ্যা এবং আরও অনেক কিছু বিবেচনায় নেওয়া যেতে পারে। আপনি হয় এই দিকনির্দেশনার ফলাফলগুলি নিজেই পরিচালনা করতে পারেন অথবা এই ফলাফলগুলি রেন্ডার করতে DirectionsRenderer অবজেক্ট ব্যবহার করতে পারেন।

দিকনির্দেশনার অনুরোধে উৎপত্তিস্থল বা গন্তব্যস্থল নির্দিষ্ট করার সময়, আপনি একটি কোয়েরি স্ট্রিং (উদাহরণস্বরূপ, "শিকাগো, আইএল" বা "ডারউইন, এনএসডব্লিউ, অস্ট্রেলিয়া"), একটি LatLng মান, অথবা একটি প্লেস অবজেক্ট নির্দিষ্ট করতে পারেন।

দিকনির্দেশনা পরিষেবাটি একাধিক ওয়েপয়েন্ট ব্যবহার করে বহু-অংশের দিকনির্দেশনা ফেরত দিতে পারে। দিকনির্দেশনাগুলি একটি মানচিত্রে রুট অঙ্কনকারী একটি পলিলাইন হিসাবে প্রদর্শিত হয়, অথবা অতিরিক্তভাবে একটি <div> উপাদানের মধ্যে পাঠ্য বর্ণনার একটি সিরিজ হিসাবে প্রদর্শিত হয় (উদাহরণস্বরূপ, "উইলিয়ামসবার্গ ব্রিজের র‍্যাম্পে ডানদিকে ঘুরুন")।

শুরু করা

Maps JavaScript API-তে Directions পরিষেবা ব্যবহার করার আগে, প্রথমে নিশ্চিত করুন যে Google Cloud Console-এ Directions API (Legacy) সক্রিয় আছে, যে প্রকল্পে আপনি Maps JavaScript API-এর জন্য সেট আপ করেছেন।

আপনার সক্রিয় API গুলির তালিকা দেখতে:

  1. গুগল ক্লাউড কনসোলে যান।
  2. "একটি প্রকল্প নির্বাচন করুন" বোতামে ক্লিক করুন, তারপর Maps JavaScript API-এর জন্য আপনি যে প্রকল্পটি সেট আপ করেছেন সেটি নির্বাচন করুন এবং " খুলুন" বোতামে ক্লিক করুন।
  3. ড্যাশবোর্ডে API-এর তালিকা থেকে, Directions API (Legacy) খুঁজুন।
  4. যদি আপনি তালিকায় API দেখতে পান, তাহলে আপনার সবকিছু ঠিক আছে। যদি API তালিকাভুক্ত না থাকে, তাহলে https://console.cloud.google.com/apis/library/directions-backend.googleapis.com এ এটি সক্ষম করুন।

মূল্য নির্ধারণ এবং নীতিমালা

মূল্য নির্ধারণ

জাভাস্ক্রিপ্ট দিকনির্দেশনা পরিষেবার মূল্য এবং ব্যবহারের নীতি সম্পর্কে জানতে, দিকনির্দেশনা API (লেগ্যাসি) এর জন্য ব্যবহার এবং বিলিং দেখুন।

নীতিমালা

দিকনির্দেশনা পরিষেবার ব্যবহার অবশ্যই দিকনির্দেশনা API (লিগ্যাসি) এর জন্য বর্ণিত নীতি অনুসারে হতে হবে।

দিকনির্দেশনা অনুরোধ

দিকনির্দেশনা পরিষেবা অ্যাক্সেস করা অ্যাসিঙ্ক্রোনাস, কারণ Google Maps API-কে একটি বহিরাগত সার্ভারে কল করতে হয়। সেই কারণে, অনুরোধটি সম্পন্ন হওয়ার পরে কার্যকর করার জন্য আপনাকে একটি কলব্যাক পদ্ধতি পাস করতে হবে। এই কলব্যাক পদ্ধতিটি ফলাফল(গুলি) প্রক্রিয়া করবে। মনে রাখবেন যে দিকনির্দেশনা পরিষেবা পৃথক routes[] ।

Maps JavaScript API-তে দিকনির্দেশনা ব্যবহার করতে, DirectionsService ধরণের একটি অবজেক্ট তৈরি করুন এবং DirectionsService.route() কল করে Directions পরিষেবাতে একটি অনুরোধ শুরু করুন, এটিকে একটি 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 ( required ) নির্দেশিকা গণনা করার জন্য শুরুর অবস্থান নির্দিষ্ট করে। এই মানটি একটি String (উদাহরণস্বরূপ, "Chicago, IL"), একটি LatLng মান বা একটি Place অবজেক্ট হিসাবে নির্দিষ্ট করা যেতে পারে। যদি আপনি একটি Place অবজেক্ট ব্যবহার করেন, তাহলে আপনি একটি Place ID , একটি কোয়েরি স্ট্রিং বা একটি LatLng অবস্থান নির্দিষ্ট করতে পারেন। আপনি Maps JavaScript API-তে Geocoding, Place Search এবং Place Autocomplete পরিষেবা থেকে Place ID গুলি পুনরুদ্ধার করতে পারেন। Place Autocomplete থেকে Place ID গুলি ব্যবহারের উদাহরণের জন্য, Place Autocomplete এবং Directions দেখুন।
  • destination ( প্রয়োজনীয় ) দিকনির্দেশনা গণনা করার জন্য শেষ অবস্থান নির্দিষ্ট করে। উপরে বর্ণিত origin ক্ষেত্রের মতোই বিকল্পগুলি।
  • travelMode ( প্রয়োজনীয় ) নির্দেশিকা গণনা করার সময় কোন পরিবহন পদ্ধতি ব্যবহার করতে হবে তা নির্দিষ্ট করে। বৈধ মানগুলি নীচের Travel Modes- এ নির্দিষ্ট করা হয়েছে।
  • transitOptions ( ঐচ্ছিক ) এমন মান নির্দিষ্ট করে যা শুধুমাত্র সেই অনুরোধগুলিতে প্রযোজ্য যেখানে travelMode হল TRANSIT । বৈধ মানগুলি নীচে Transit Options- এ বর্ণিত হয়েছে।
  • drivingOptions ( ঐচ্ছিক ) এমন মান নির্দিষ্ট করে যা শুধুমাত্র সেই অনুরোধগুলিতে প্রযোজ্য যেখানে travelMode DRIVING । বৈধ মানগুলি নীচে Driving Options- এ বর্ণিত হয়েছে।

  • unitSystem ( ঐচ্ছিক ) ফলাফল প্রদর্শনের সময় কোন ইউনিট সিস্টেম ব্যবহার করতে হবে তা নির্দিষ্ট করে। বৈধ মানগুলি নীচের Unit Systems- এ উল্লেখ করা হয়েছে।

  • waypoints[] ( ঐচ্ছিক ) DirectionsWaypoint s এর একটি অ্যারে নির্দিষ্ট করে। ওয়েপয়েন্টগুলি নির্দিষ্ট অবস্থান(গুলি) এর মধ্য দিয়ে রুট করে একটি রুট পরিবর্তন করে। একটি ওয়েপয়েন্টকে নীচে দেখানো ক্ষেত্রগুলির সাথে একটি অবজেক্ট লিটারেল হিসাবে নির্দিষ্ট করা হয়:

    • location ওয়েপয়েন্টের অবস্থান নির্দিষ্ট করে, LatLng হিসেবে, Place অবজেক্ট হিসেবে অথবা একটি 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 প্ল্যাটফর্ম কভারেজের বিবরণ দেখুন। যদি আপনি এমন কোনও অঞ্চলের জন্য দিকনির্দেশনার অনুরোধ করেন যেখানে সেই দিকনির্দেশনার ধরণটি উপলব্ধ নেই, তাহলে প্রতিক্রিয়াটি DirectionsStatus = " ZERO_RESULTS " ফেরত দেবে।

দ্রষ্টব্য : হাঁটার দিকনির্দেশে পরিষ্কার পথচারী পথ নাও থাকতে পারে, তাই হাঁটার দিকনির্দেশনা DirectionsResult -এ সতর্কতা প্রদান করবে। এই সতর্কতাগুলি সর্বদা ব্যবহারকারীকে প্রদর্শিত হতে হবে। আপনি যদি ডিফল্ট DirectionsRenderer ব্যবহার না করেন তবে সতর্কতাগুলি প্রদর্শিত হচ্ছে কিনা তা নিশ্চিত করার জন্য আপনার দায়িত্ব।

পরিবহন বিকল্প

দিকনির্দেশ অনুরোধের জন্য উপলব্ধ বিকল্পগুলি ভ্রমণ মোডের মধ্যে ভিন্ন হয়। ট্রানজিট দিকনির্দেশনার অনুরোধ করার সময়, avoidHighways , avoidTolls , waypoints[] এবং optimizeWaypoints বিকল্পগুলি উপেক্ষা করা হবে। আপনি TransitOptions অবজেক্ট লিটারেলের মাধ্যমে ট্রানজিট নির্দিষ্ট রাউটিং বিকল্পগুলি নির্দিষ্ট করতে পারেন।

পরিবহনের দিকনির্দেশনা সময় সংবেদনশীল। দিকনির্দেশনাগুলি কেবল ভবিষ্যতের সময়ের জন্য ফেরত পাঠানো হবে।

TransitOptions অবজেক্ট লিটারেলে নিম্নলিখিত ক্ষেত্রগুলি রয়েছে:

{
  arrivalTime: Date,
  departureTime: Date,
  modes[]: TransitMode,
  routingPreference: TransitRoutePreference
}

এই ক্ষেত্রগুলি নীচে ব্যাখ্যা করা হল:

  • arrivalTime ( ঐচ্ছিক ) একটি Date অবজেক্ট হিসেবে আগমনের কাঙ্ক্ষিত সময় নির্দিষ্ট করে। যদি আগমনের সময় নির্দিষ্ট করা থাকে, তাহলে প্রস্থানের সময় উপেক্ষা করা হয়।
  • departureTime ( ঐচ্ছিক ) একটি Date অবজেক্ট হিসেবে departure এর কাঙ্ক্ষিত সময় নির্দিষ্ট করে। 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 Platform Premium Plan গ্রাহকদের জন্য, যদি আপনি অনুরোধে 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 Directions Service ঠিকানার ফলাফল ফেরত দেয় যে ডোমেন (অঞ্চল বা দেশ) থেকে আপনি জাভাস্ক্রিপ্ট বুটস্ট্র্যাপ লোড করেছেন তার উপর নির্ভর করে। (যেহেতু বেশিরভাগ ব্যবহারকারী 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 Maps প্ল্যাটফর্ম কভারেজের বিবরণ দেখুন।

রেন্ডারিং নির্দেশাবলী

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 অবজেক্টে পাঠাতে পারেন, যা স্বয়ংক্রিয়ভাবে মানচিত্রে ফলাফল প্রদর্শন পরিচালনা করতে পারে।

DirectionsRenderer ব্যবহার করে একটি DirectionsResult প্রদর্শন করতে, আপনাকে নিম্নলিখিতগুলি করতে হবে:

  1. একটি DirectionsRenderer অবজেক্ট তৈরি করুন।
  2. রেন্ডারারে setMap() কল করে পাস করা ম্যাপের সাথে এটি সংযুক্ত করুন।
  3. রেন্ডারারে setDirections() কল করুন, উপরে উল্লিখিত DirectionsResult পাস করুন। যেহেতু রেন্ডারারটি একটি MVCObject , এটি স্বয়ংক্রিয়ভাবে এর বৈশিষ্ট্যগুলিতে যেকোনো পরিবর্তন সনাক্ত করবে এবং এর সাথে সম্পর্কিত দিকনির্দেশনা পরিবর্তিত হলে মানচিত্র আপডেট করবে।

নিম্নলিখিত উদাহরণটি রুট 66-এর দুটি অবস্থানের মধ্যে দিকনির্দেশ গণনা করে, যেখানে ড্রপডাউন তালিকাগুলিতে প্রদত্ত "start" এবং "end" মান দ্বারা উৎপত্তি এবং গন্তব্য নির্ধারণ করা হয়। DirectionsRenderer নির্দেশিত অবস্থানগুলির মধ্যে পলিলাইন প্রদর্শন এবং উৎপত্তি, গন্তব্য এবং প্রযোজ্য ক্ষেত্রে যেকোনো ওয়েপয়েন্টে মার্কার স্থাপন পরিচালনা করে।

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

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

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>

উদাহরণ দেখুন

নিম্নলিখিত উদাহরণটি সান ফ্রান্সিসকো, ক্যালিফোর্নিয়ার হাইট-অ্যাশবেরি থেকে ওশান বিচের মধ্যে ভ্রমণের বিভিন্ন পদ্ধতি ব্যবহার করে দিকনির্দেশনা দেখায়: 

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-এর শেষ সংস্করণ যা বিকল্প রুটে অতিরিক্ত via ওয়েপয়েন্ট যোগ করে। API-এর 3.28 এবং উচ্চতর সংস্করণের জন্য, আপনি বিকল্প রুট টেনে আনা বন্ধ করে দিকনির্দেশ পরিষেবা ব্যবহার করে টেনে আনার যোগ্য দিকনির্দেশনা বাস্তবায়ন চালিয়ে যেতে পারেন। শুধুমাত্র প্রধান রুটটি টেনে আনা উচিত। ব্যবহারকারীরা মূল রুটটি টেনে আনতে পারবেন যতক্ষণ না এটি একটি বিকল্প রুটের সাথে মেলে।

দিকনির্দেশনা জিওকোডেড ওয়েপয়েন্ট

একটি DirectionsGeocodedWaypoint উৎপত্তি, গন্তব্য এবং ওয়েপয়েন্টের জিওকোডিং সম্পর্কে বিশদ বিবরণ থাকে।

DirectionsGeocodedWaypoint হল একটি আক্ষরিক অবজেক্ট যার নিম্নলিখিত ক্ষেত্রগুলি রয়েছে:

  • geocoder_status জিওকোডিং অপারেশনের ফলে সৃষ্ট স্ট্যাটাস কোড নির্দেশ করে। এই ক্ষেত্রে নিম্নলিখিত মান থাকতে পারে।
    • "OK" নির্দেশ করে যে কোনও ত্রুটি ঘটেনি; ঠিকানাটি সফলভাবে পার্স করা হয়েছে এবং কমপক্ষে একটি জিওকোড ফেরত পাঠানো হয়েছে।
    • "ZERO_RESULTS" ইঙ্গিত করে যে জিওকোডটি সফল হয়েছে কিন্তু কোনও ফলাফল দেয়নি। জিওকোডারটি যদি একটি অস্তিত্বহীন address পাস করা হয় তবে এটি ঘটতে পারে।

  • partial_match ইঙ্গিত করে যে জিওকোডারটি মূল অনুরোধের সাথে সঠিক মিল খুঁজে পায়নি, যদিও এটি অনুরোধকৃত ঠিকানার কিছু অংশ মেলাতে সক্ষম হয়েছিল। আপনি ভুল বানান এবং/অথবা অসম্পূর্ণ ঠিকানার জন্য মূল অনুরোধটি পরীক্ষা করতে চাইতে পারেন।

    আপনার অনুরোধে পাস করা এলাকার মধ্যে যে রাস্তার ঠিকানাগুলি বিদ্যমান নেই সেগুলির জন্য প্রায়শই আংশিক মিল দেখা যায়। একই এলাকার দুই বা ততোধিক অবস্থানের সাথে একটি অনুরোধের মিল থাকলে আংশিক মিলও ফেরত পাঠানো যেতে পারে। উদাহরণস্বরূপ, "হিলপার স্ট্রিট, ব্রিস্টল, যুক্তরাজ্য" হেনরি স্ট্রিট এবং হেনরিটা স্ট্রিট উভয়ের জন্যই একটি আংশিক মিল ফেরত দেবে। মনে রাখবেন যে যদি কোনও অনুরোধে ভুল বানানযুক্ত ঠিকানা উপাদান থাকে, তাহলে জিওকোডিং পরিষেবা একটি বিকল্প ঠিকানার পরামর্শ দিতে পারে। এইভাবে ট্রিগার করা পরামর্শগুলিকেও আংশিক মিল হিসেবে চিহ্নিত করা হবে।

  • place_id হল একটি স্থানের একটি অনন্য শনাক্তকারী, যা অন্যান্য Google API-এর সাথে ব্যবহার করা যেতে পারে। উদাহরণস্বরূপ, আপনি স্থানীয় ব্যবসার বিবরণ পেতে Google Places API লাইব্রেরির সাথে place_id ব্যবহার করতে পারেন, যেমন ফোন নম্বর, খোলা থাকার সময়, ব্যবহারকারীর পর্যালোচনা এবং আরও অনেক কিছু। স্থান আইডি ওভারভিউ দেখুন।
  • types[] হল একটি অ্যারে যা ফেরত প্রাপ্ত ফলাফলের ধরণ নির্দেশ করে। এই অ্যারেতে শূন্য বা তার বেশি ট্যাগের একটি সেট রয়েছে যা ফলাফলে ফেরত প্রাপ্ত বৈশিষ্ট্যের ধরণ সনাক্ত করে। উদাহরণস্বরূপ, "শিকাগো" এর একটি জিওকোড "স্থানীয়তা" প্রদান করে যা নির্দেশ করে যে "শিকাগো" একটি শহর, এবং "রাজনৈতিক" প্রদান করে যা নির্দেশ করে যে এটি একটি রাজনৈতিক সত্তা।

দিকনির্দেশনা রুট

দ্রষ্টব্য : লিগ্যাসি DirectionsTrip অবজেক্টের নাম পরিবর্তন করে DirectionsRoute রাখা হয়েছে। মনে রাখবেন যে একটি রুট এখন কেবল একটি মূল ভ্রমণের একটি অংশের পরিবর্তে সম্পূর্ণ শুরু থেকে শেষ যাত্রাকে বোঝায়।

একটি DirectionsRoute নির্দিষ্ট উৎস এবং গন্তব্য থেকে একটিমাত্র ফলাফল থাকে। এই রুটে এক বা একাধিক লেগ ( DirectionsLeg ধরণের) থাকতে পারে যা কোনও ওয়েপয়েন্ট নির্দিষ্ট করা হয়েছে কিনা তার উপর নির্ভর করে। এছাড়াও, রুটে কপিরাইট এবং সতর্কতামূলক তথ্যও থাকে যা ব্যবহারকারীকে রাউটিং তথ্যের পাশাপাশি প্রদর্শন করতে হবে।

DirectionsRoute হল একটি আক্ষরিক অবজেক্ট যার নিম্নলিখিত ক্ষেত্রগুলি রয়েছে:

  • legs[] এ DirectionsLeg অবজেক্টের একটি অ্যারে রয়েছে, যার প্রতিটিতে প্রদত্ত রুটের মধ্যে দুটি অবস্থান থেকে রুটের একটি লেগ সম্পর্কে তথ্য রয়েছে। নির্দিষ্ট প্রতিটি ওয়েপয়েন্ট বা গন্তব্যের জন্য একটি পৃথক লেগ উপস্থিত থাকবে। (কোনও ওয়েপয়েন্ট ছাড়াই একটি রুটে ঠিক একটি DirectionsLeg থাকবে।) প্রতিটি লেগ DirectionStep s এর একটি সিরিজ নিয়ে গঠিত।
  • 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 এ সেট করা আছে।
    • অনুরোধে 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 থাকে। যেহেতু Directions Web Service শুরু এবং শেষ বিন্দুতে নিকটতম পরিবহন বিকল্প (সাধারণত একটি রাস্তা) ব্যবহার করে অবস্থানগুলির মধ্যে দিকনির্দেশ গণনা করে, তাই start_location এই লেগের প্রদত্ত উৎপত্তিস্থল থেকে আলাদা হতে পারে, উদাহরণস্বরূপ, যদি কোনও রাস্তা উৎপত্তিস্থলের কাছাকাছি না থাকে।
  • end_location এই লেগটির গন্তব্যের LatLng থাকে। যেহেতু DirectionsService শুরু এবং শেষ বিন্দুতে নিকটতম পরিবহন বিকল্প (সাধারণত একটি রাস্তা) ব্যবহার করে অবস্থানগুলির মধ্যে দিকনির্দেশ গণনা করে, তাই end_location এই লেগটির প্রদত্ত গন্তব্য থেকে আলাদা হতে পারে, উদাহরণস্বরূপ, যদি কোনও রাস্তা গন্তব্যের কাছাকাছি না থাকে।
  • start_address এই লেগটির শুরুর মানুষের পঠনযোগ্য ঠিকানা (সাধারণত একটি রাস্তার ঠিকানা) থাকে।

    এই কন্টেন্টটি যেমন আছে তেমন পড়ার জন্য তৈরি। ফর্ম্যাট করা ঠিকানাটি প্রোগ্রাম্যাটিকভাবে পার্স করবেন না।
  • end_address এই লেগটির শেষের মানুষের পঠনযোগ্য ঠিকানা (সাধারণত একটি রাস্তার ঠিকানা) থাকে।

    এই কন্টেন্টটি যেমন আছে তেমন পড়ার জন্য তৈরি। ফর্ম্যাট করা ঠিকানাটি প্রোগ্রাম্যাটিকভাবে পার্স করবেন না।

দিকনির্দেশনা ধাপ

DirectionsStep হল একটি দিকনির্দেশের রুটের সবচেয়ে পারমাণবিক একক, যেখানে যাত্রার একটি নির্দিষ্ট, একক নির্দেশ বর্ণনা করে একটি একক পদক্ষেপ থাকে। যেমন "পশ্চিম চতুর্থ স্ট্রিটে বাম দিকে ঘুরুন।" এই পদক্ষেপটি কেবল নির্দেশ বর্ণনা করে না বরং এই পদক্ষেপটি পরবর্তী পদক্ষেপের সাথে কীভাবে সম্পর্কিত তার দূরত্ব এবং সময়কাল সম্পর্কিত তথ্যও ধারণ করে। উদাহরণস্বরূপ, "Merge on I-80 West" হিসাবে চিহ্নিত একটি পদক্ষেপের সময়কাল "37 মাইল" এবং "40 মিনিট" থাকতে পারে, যা নির্দেশ করে যে পরবর্তী পদক্ষেপটি এই পদক্ষেপ থেকে 37 মাইল/40 মিনিট দূরে।

ট্রানজিট দিকনির্দেশনা অনুসন্ধানের জন্য দিকনির্দেশনা পরিষেবা ব্যবহার করার সময়, ধাপের অ্যারেতে একটি transit বস্তুর আকারে অতিরিক্ত ট্রানজিট নির্দিষ্ট তথ্য অন্তর্ভুক্ত থাকবে। যদি নির্দেশাবলীতে পরিবহনের একাধিক পদ্ধতি অন্তর্ভুক্ত থাকে, তাহলে steps[] অ্যারেতে হাঁটা বা ড্রাইভিং ধাপের জন্য বিস্তারিত দিকনির্দেশনা প্রদান করা হবে। উদাহরণস্বরূপ, একটি হাঁটার ধাপে শুরু এবং শেষ অবস্থান থেকে দিকনির্দেশনা অন্তর্ভুক্ত থাকবে: "ইনেস অ্যাভিনিউ এবং ফিচ স্ট্রিট পর্যন্ত হাঁটা"। সেই ধাপে steps[] অ্যারেতে সেই রুটের জন্য বিস্তারিত হাঁটার দিকনির্দেশনা অন্তর্ভুক্ত থাকবে, যেমন: "উত্তর-পশ্চিমে যান", "আরেলিয়াস ওয়াকারে বাম দিকে ঘুরুন", এবং "ইনেস অ্যাভিনিউতে বাম দিকে ঘুরুন"।

DirectionsStep হল একটি অবজেক্ট লিটারেল যার নিম্নলিখিত ক্ষেত্রগুলি রয়েছে:

  • instructions এ একটি টেক্সট স্ট্রিংয়ের মধ্যে এই ধাপের জন্য নির্দেশাবলী রয়েছে।
  • distance মধ্যে এই ধাপ দ্বারা পরবর্তী ধাপ পর্যন্ত কভার করা দূরত্ব থাকে, যা একটি Distance বস্তু হিসেবে ব্যবহৃত হয়। (উপরের DirectionsLeg বর্ণনাটি দেখুন।) দূরত্ব অজানা থাকলে এই ক্ষেত্রটি অনির্ধারিত হতে পারে।
  • duration Duration হিসেবে, পরবর্তী ধাপ পর্যন্ত ধাপটি সম্পাদন করতে প্রয়োজনীয় সময়ের একটি আনুমানিক হিসাব থাকে। (উপরের DirectionsLeg এ বর্ণনাটি দেখুন।) duration অজানা থাকলে এই ক্ষেত্রটি অনির্ধারিত হতে পারে।
  • start_location এই ধাপের শুরুর বিন্দুর জিওকোডেড LatLng রয়েছে।
  • end_location এই ধাপের শেষ বিন্দুর LatLng থাকে।
  • polyline একটি একক points অবজেক্ট থাকে যা ধাপের একটি এনকোডেড পলিলাইন উপস্থাপনা ধারণ করে। এই পলিলাইনটি ধাপের একটি আনুমানিক (মসৃণ) পথ।
  • steps[] একটি DirectionsStep অবজেক্ট যা ট্রানজিট দিকনির্দেশে হাঁটা বা গাড়ি চালানোর জন্য বিস্তারিত দিকনির্দেশনা ধারণ করে। উপ-পদক্ষেপগুলি শুধুমাত্র ট্রানজিট দিকনির্দেশের জন্য উপলব্ধ।
  • travel_mode এই ধাপে ব্যবহৃত TravelMode রয়েছে। ট্রানজিট দিকনির্দেশে হাঁটা এবং ট্রানজিট দিকনির্দেশের সংমিশ্রণ অন্তর্ভুক্ত থাকতে পারে।
  • path এই ধাপের গতিপথ বর্ণনা করে LatLngs এর একটি অ্যারে রয়েছে।
  • transit ট্রানজিট সম্পর্কিত নির্দিষ্ট তথ্য থাকে, যেমন আগমন এবং প্রস্থানের সময় এবং ট্রানজিট লাইনের নাম।

ট্রানজিট নির্দিষ্ট তথ্য

Transit directions return additional information that is not relevant for other modes of transportation. These additional properties are exposed through the TransitDetails object, returned as a property of DirectionsStep . From the TransitDetails object you can access additional information for the TransitStop , TransitLine , TransitAgency , and VehicleType objects as described below.

Transit Details

The TransitDetails object exposes the following properties:

  • arrival_stop contains a TransitStop 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 a LatLng .
  • departure_stop contains a TransitStop object representing the departure station/stop.
  • arrival_time contains the arrival time, specified as a Time object with three properties:
    • value the time specified as a JavaScript Date 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 a Time 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 a headway value of 600, you would expect a ten minute wait if you should miss your bus.
  • line contains a TransitLine object literal that contains information about the transit line used in this step. The TransitLine provides the name and operator of the line, along with other properties described in the TransitLine 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 single TransitAgency object. The TransitAgency 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 a Vehicle 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.

যানবাহনের ধরণ

The VehicleType object exposes the following properties:

মূল্য সংজ্ঞা
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 বাস।
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>

View example

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 are true 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.

টাইপস্ক্রিপ্ট 

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;
index.ts

জাভাস্ক্রিপ্ট 

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;
index.js

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 (Legacy) web service .
  • For the Directions API (Legacy) 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.

টাইপস্ক্রিপ্ট 

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;
index.ts

জাভাস্ক্রিপ্ট 

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;
index.js
View example

Try Sample