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

সেভ করা পৃষ্ঠা গুছিয়ে রাখতে 'সংগ্রহ' ব্যবহার করুন আপনার পছন্দ অনুযায়ী কন্টেন্ট সেভ করুন ও সঠিক বিভাগে রাখুন।

ওভারভিউ

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

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

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

শুরু হচ্ছে

Maps JavaScript API-এ দিকনির্দেশ পরিষেবা ব্যবহার করার আগে, প্রথমে নিশ্চিত করুন যে Google ক্লাউড কনসোলে আপনি Maps JavaScript API-এর জন্য সেট আপ করেছেন একই প্রকল্পে নির্দেশাবলী API সক্ষম করা আছে।

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

  1. গুগল ক্লাউড কনসোলে যান।
  2. একটি প্রকল্প নির্বাচন করুন বোতামে ক্লিক করুন, তারপরে আপনি মানচিত্র জাভাস্ক্রিপ্ট API-এর জন্য সেট আপ করা একই প্রকল্প নির্বাচন করুন এবং খুলুন ক্লিক করুন।
  3. ড্যাশবোর্ডে API-এর তালিকা থেকে, দিকনির্দেশ API সন্ধান করুন।
  4. আপনি যদি তালিকায় API দেখতে পান, আপনি সম্পূর্ণ প্রস্তুত। API তালিকাভুক্ত না হলে, এটি সক্ষম করুন:
    1. পৃষ্ঠার শীর্ষে, লাইব্রেরি ট্যাব প্রদর্শন করতে API ENABLE নির্বাচন করুন। বিকল্পভাবে, বাম পাশের মেনু থেকে, লাইব্রেরি নির্বাচন করুন।
    2. দিকনির্দেশ API অনুসন্ধান করুন, তারপর ফলাফল তালিকা থেকে এটি নির্বাচন করুন।
    3. 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 ফলাফল প্রদর্শন করতে, আপনাকে নিম্নলিখিতগুলি করতে হবে:

  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>

উদাহরণ দেখুন

নিম্নলিখিত উদাহরণটি সান ফ্রান্সিসকো, 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 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.

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>

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.

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

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

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

Try Sample