Layanan Directions

Ringkasan

Anda dapat menghitung rute (menggunakan berbagai metode transportasi) menggunakan objek DirectionsService. Objek ini berkomunikasi dengan Layanan Rute Google Maps API yang menerima permintaan rute dan menampilkan jalur yang efisien. Waktu tempuh adalah faktor utama yang dioptimalkan, tetapi faktor lain seperti jarak, jumlah belokan, dan banyak lainnya dapat diperhitungkan. Anda dapat menangani hasil rute ini sendiri atau menggunakan objek DirectionsRenderer untuk merender hasil tersebut.

Saat menentukan asal atau tujuan dalam permintaan rute, Anda dapat menentukan string kueri (misalnya "Chicago, IL" atau "Darwin, NSW, Australia"), nilai LatLng, atau objek Place.

Layanan Directions dapat menampilkan rute multi-bagian menggunakan serangkaian titik jalan. Rute ditampilkan sebagai polyline yang menggambar rute pada peta, atau juga sebagai serangkaian deskripsi tekstual dalam elemen <div> (misalnya, "Belok kanan ke Williamsburg Bridge").

Memulai

Sebelum menggunakan layanan Directions di Maps JavaScript API, pastikan terlebih dahulu bahwa Directions API diaktifkan di Google Cloud Console, dalam project yang sama dengan yang disiapkan untuk Maps JavaScript API.

Untuk menampilkan daftar API yang telah diaktifkan:

  1. Buka Google Cloud Console.
  2. Klik tombol Select a project, lalu pilih project yang sama dengan yang Anda siapkan untuk Maps JavaScript API, lalu klik Open.
  3. Dari daftar API di Dasbor, cari Directions API.
  4. Jika sudah melihat API di dalam daftar, artinya Anda sudah siap. Jika API tidak tercantum, aktifkan:
    1. Di bagian atas halaman, pilih ENABLE API untuk menampilkan tab Library. Atau, dari menu samping kiri, pilih Library.
    2. Telusuri Directions API, lalu pilih dari daftar hasil.
    3. Pilih AKTIFKAN. Setelah proses selesai, Directions API akan muncul dalam daftar API pada Dashboard.

Harga dan kebijakan

Harga

Mulai 16 Juli 2018, paket harga baru, yaitu bayar sesuai penggunaan, berlaku untuk Maps, Rute, dan Tempat. Untuk mempelajari lebih lanjut tentang harga baru dan batas penggunaan untuk penggunaan layanan Directions JavaScript, lihat Penggunaan dan Penagihan untuk Directions API.

Batas kapasitas

Perhatikan hal-hal berikut tentang batas kapasitas pada permintaan tambahan:

Batas kapasitas diterapkan per sesi pengguna, berapa pun banyaknya pengguna yang berbagi project yang sama. Saat pertama kali memuat API, Anda diberi kuota awal permintaan. Setelah Anda menggunakan kuota ini, API akan menerapkan batas kapasitas pada permintaan tambahan per detik. Jika terlalu banyak permintaan dibuat dalam jangka waktu tertentu, API akan menampilkan kode respons OVER_QUERY_LIMIT.

Batas kecepatan per sesi mencegah penggunaan layanan sisi klien untuk permintaan batch. Untuk permintaan batch, gunakan layanan web Directions API.

Kebijakan

Penggunaan layanan Directions harus sesuai dengan kebijakan yang dijelaskan untuk Directions API.

Permintaan Directions

Mengakses layanan Directions bersifat asinkron, karena Google Maps API perlu melakukan panggilan ke server eksternal. Karena alasan tersebut, Anda harus meneruskan metode callback untuk dieksekusi setelah permintaan selesai. Metode callback ini harus memproses hasilnya. Perhatikan bahwa layanan Directions dapat menampilkan lebih dari satu kemungkinan itinerari sebagai array routes[] yang terpisah.

Untuk menggunakan rute di Maps JavaScript API, buat objek dari jenis DirectionsService dan panggil DirectionsService.route() untuk memulai permintaan ke layanan Directions, teruskan literal objek DirectionsRequest yang berisi istilah input dan metode callback yang akan dieksekusi setelah menerima respons.

Literal objek DirectionsRequest berisi kolom berikut:

{
  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
}

Bidang-bidang ini dijelaskan di bawah:

  • origin (wajib) menentukan lokasi awal untuk menghitung rute. Nilai ini dapat ditentukan sebagai String (misalnya, "Chicago, IL"), sebagai nilai LatLng atau sebagai objek Place. Jika menggunakan objek Place, Anda dapat menentukan ID tempat, string kueri, atau lokasi LatLng. Anda dapat mengambil ID tempat dari layanan Geocoding, Place Search, dan Place Autocomplete di Maps JavaScript API. Untuk contoh penggunaan ID tempat dari Place Autocomplete, lihat Place Autocomplete dan Directions.
  • destination (wajib) menentukan lokasi akhir untuk menghitung rute. Opsinya sama seperti kolom origin yang dijelaskan di atas.
  • travelMode (wajib) menentukan moda transportasi yang akan digunakan saat menghitung rute. Nilai yang valid ditentukan dalam Mode Perjalanan di bawah.
  • transitOptions (opsional) menentukan nilai yang hanya berlaku untuk permintaan dengan travelMode TRANSIT. Nilai yang valid dijelaskan dalam Opsi Transportasi Umum, di bawah.
  • drivingOptions (opsional) menentukan nilai yang hanya berlaku untuk permintaan dengan travelMode DRIVING. Nilai yang valid dijelaskan dalam Opsi Mengemudi, di bawah ini.
  • unitSystem (opsional) menentukan sistem unit yang akan digunakan saat menampilkan hasil. Nilai yang valid ditentukan dalam Sistem Unit di bawah.

  • waypoints[] (opsional) menentukan array DirectionsWaypoint. Titik jalan mengubah rute dengan merutekannya melalui lokasi yang ditentukan. Titik jalan ditetapkan sebagai literal objek dengan kolom yang ditunjukkan di bawah:

    • location menentukan lokasi titik jalan, sebagai LatLng, sebagai objek Place atau sebagai String yang akan di-geocoding.
    • stopover adalah boolean yang menunjukkan bahwa titik jalan adalah perhentian pada rute, yang memiliki efek pembagian rute menjadi dua rute.

    (Untuk informasi selengkapnya tentang titik jalan, lihat Menggunakan Titik Jalan pada Rute di bawah.)

  • optimizeWaypoints (opsional) menentukan bahwa rute yang menggunakan waypoints yang disediakan dapat dioptimalkan dengan menyusun ulang titik jalan dalam urutan yang lebih efisien. Jika true, layanan Directions akan menampilkan waypoints yang diurutkan ulang di kolom waypoint_order.(Untuk informasi selengkapnya, lihat Menggunakan Titik Jalan pada Rute di bawah.)
  • provideRouteAlternatives (opsional) jika ditetapkan ke true menentukan bahwa layanan Directions dapat memberikan lebih dari satu alternatif rute dalam respons. Perhatikan bahwa memberikan alternatif rute dapat meningkatkan waktu respons dari server. Ini hanya tersedia untuk permintaan tanpa titik jalan perantara.
  • avoidFerries (opsional) jika ditetapkan ke true menunjukkan bahwa rute yang dihitung harus menghindari kapal feri, jika memungkinkan.
  • avoidHighways (opsional) jika ditetapkan ke true menunjukkan bahwa rute yang dihitung harus menghindari jalan raya utama, jika memungkinkan.
  • avoidTolls (opsional) jika ditetapkan ke true menunjukkan bahwa rute yang dihitung harus menghindari jalan tol, jika memungkinkan.
  • region (opsional) menentukan kode region, yang ditetapkan sebagai nilai dua karakter ccTLD ("top-level domain"). (Untuk informasi selengkapnya, lihat Biasing Wilayah di bawah ini.)

Berikut adalah contoh 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
}

Mode Perjalanan

Saat menghitung rute, Anda perlu menentukan moda transportasi yang akan digunakan. Mode perjalanan berikut saat ini didukung:

  • DRIVING (Default) menunjukkan rute mobil standar menggunakan jaringan jalan raya.
  • BICYCLING meminta rute bersepeda melalui jalur sepeda dan jalan pilihan.
  • TRANSIT meminta rute melalui rute transportasi umum.
  • WALKING meminta rute jalan kaki melalui jalur pejalan kaki & trotoar.

Lihat Detail Cakupan Google Maps Platform untuk mengetahui sejauh mana suatu negara mendukung rute. Jika Anda meminta rute untuk wilayah tempat jenis rute tersebut tidak tersedia, respons akan menampilkan DirectionsStatus="ZERO_RESULTS".

Catatan: Rute jalan kaki mungkin tidak menyertakan jalur pejalan kaki yang jelas, sehingga rute jalan kaki akan menampilkan peringatan di DirectionsResult yang harus Anda tampilkan jika tidak menggunakan DirectionsRenderer default.

Opsi Angkutan Umum

Opsi yang tersedia untuk permintaan arah bervariasi antar mode perjalanan. Saat meminta rute transportasi umum, opsi avoidHighways, avoidTolls, waypoints[], dan optimizeWaypoints akan diabaikan. Anda dapat menentukan opsi pemilihan rute khusus transportasi umum melalui literal objek TransitOptions.

Arah angkutan umum sesuai-waktu. Rute hanya akan ditampilkan untuk waktu mendatang.

Literal objek TransitOptions berisi kolom berikut:

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

Bidang-bidang ini dijelaskan di bawah:

  • arrivalTime (opsional) menentukan waktu kedatangan yang diinginkan sebagai objek Date. Jika waktu kedatangan ditentukan, waktu keberangkatan akan diabaikan.
  • departureTime (opsional) menentukan waktu keberangkatan yang diinginkan sebagai objek Date. departureTime akan diabaikan jika arrivalTime ditentukan. Setelan defaultnya adalah sekarang (yaitu, waktu saat ini) jika tidak ada nilai yang ditentukan untuk departureTime atau arrivalTime.
  • modes[] (opsional) adalah array yang berisi satu atau beberapa literal objek TransitMode. Kolom ini hanya dapat disertakan jika permintaan menyertakan kunci API. Setiap TransitMode menentukan moda transportasi umum. Nilai berikut diizinkan:
    • BUS menunjukkan bahwa rute yang dihitung akan mengutamakan perjalanan dengan bus.
    • RAIL menunjukkan bahwa rute yang dihitung harus mengutamakan perjalanan dengan kereta api, trem, kereta ringan, dan kereta bawah tanah.
    • SUBWAY menunjukkan bahwa rute yang dihitung harus mengutamakan perjalanan dengan kereta bawah tanah.
    • TRAIN menunjukkan bahwa rute yang dihitung harus mengutamakan perjalanan dengan kereta api.
    • TRAM menunjukkan bahwa rute yang dihitung harus mengutamakan perjalanan dengan trem dan kereta ringan.
  • routingPreference (opsional) menentukan preferensi untuk rute transportasi umum. Dengan menggunakan opsi ini, Anda dapat mencondongkan opsi yang ditampilkan, bukan menerima rute default terbaik yang dipilih oleh API. Kolom ini hanya dapat ditentukan jika permintaan menyertakan kunci API. Nilai berikut diizinkan:
    • FEWER_TRANSFERS menunjukkan bahwa rute yang dihitung harus mengutamakan jumlah transfer yang terbatas.
    • LESS_WALKING menunjukkan bahwa rute yang dihitung akan mengutamakan jumlah berjalan kaki dalam jumlah terbatas.

Contoh DirectionsRequest dengan transportasi umum ditampilkan di bawah ini:

{
  origin: 'Hoboken NJ',
  destination: 'Carroll Gardens, Brooklyn',
  travelMode: 'TRANSIT',
  transitOptions: {
    departureTime: new Date(1337675679473),
    modes: ['BUS'],
    routingPreference: 'FEWER_TRANSFERS'
  },
  unitSystem: google.maps.UnitSystem.IMPERIAL
}

Opsi Mengemudi

Anda dapat menentukan opsi pemilihan rute untuk rute mobil melalui objek DrivingOptions.

Objek DrivingOptions berisi kolom-kolom berikut:

{
  departureTime: Date,
  trafficModel: TrafficModel
}

Bidang-bidang ini dijelaskan di bawah:

  • departureTime (diperlukan agar literal objek drivingOptions valid) menentukan waktu keberangkatan yang diinginkan sebagai objek Date. Nilainya harus ditetapkan ke waktu saat ini atau waktu mendatang. Tidak boleh waktu yang sudah lewat. (API mengonversi semua tanggal ke UTC untuk memastikan penanganan yang konsisten di seluruh zona waktu.) Untuk pelanggan Premium Plan Google Maps Platform, jika Anda menyertakan departureTime dalam permintaan, API akan menampilkan rute terbaik berdasarkan kondisi lalu lintas yang diharapkan pada saat itu, dan menyertakan waktu prediksi lalu lintas (duration_in_traffic) dalam respons. Jika Anda tidak menentukan waktu keberangkatan (yaitu, jika permintaan tidak menyertakan drivingOptions), rute yang ditampilkan adalah rute yang biasanya baik tanpa memperhitungkan kondisi lalu lintas.
  • trafficModel (opsional) menentukan asumsi yang akan digunakan saat menghitung waktu dalam traffic. Setelan ini memengaruhi nilai yang ditampilkan di kolom duration_in_traffic dalam respons, yang berisi prediksi waktu dalam traffic berdasarkan rata-rata historis. Nilai defaultnya adalah bestguess. Nilai berikut diizinkan:
    • bestguess (default) menunjukkan bahwa duration_in_traffic yang ditampilkan harus berupa perkiraan waktu perjalanan terbaik berdasarkan informasi historis kondisi lalu lintas dan lalu lintas langsung. Traffic langsung menjadi lebih penting jika departureTime semakin dekat ke waktu sekarang.
    • pessimistic menunjukkan bahwa duration_in_traffic yang ditampilkan harus lebih lama dari waktu perjalanan aktual pada sebagian besar hari, meskipun terkadang hari dengan kondisi lalu lintas yang sangat buruk dapat melebihi nilai ini.
    • optimistic menunjukkan bahwa duration_in_traffic yang ditampilkan harus lebih singkat dari waktu perjalanan yang sebenarnya pada sebagian besar hari, meskipun terkadang hari dengan kondisi lalu lintas yang sangat baik dapat lebih cepat dari nilai ini.

Berikut adalah contoh DirectionsRequest untuk rute mobil:

{
  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'
  }
}

Sistem Satuan

Secara default, rute dihitung dan ditampilkan menggunakan sistem satuan pada negara atau wilayah asal. (Catatan: Asal yang dinyatakan menggunakan koordinat lintang/bujur, bukan alamat, akan selalu ditetapkan secara default ke unit metrik.) Misalnya, rute dari "Chicago, IL" ke "Toronto, ONT" akan menampilkan hasil dalam mil, sedangkan rute terbalik akan menampilkan hasil dalam kilometer. Anda dapat mengganti sistem unit ini dengan menyetelnya secara eksplisit dalam permintaan menggunakan salah satu nilai UnitSystem berikut:

  • UnitSystem.METRIC menentukan penggunaan sistem metrik. Jarak ditampilkan menggunakan kilometer.
  • UnitSystem.IMPERIAL menentukan penggunaan sistem Imperial (Inggris). Jarak ditampilkan menggunakan mil.

Catatan: Setelan sistem unit ini hanya memengaruhi teks yang ditampilkan kepada pengguna. Hasil rute juga berisi nilai jarak, yang tidak ditampilkan kepada pengguna, yang selalu dinyatakan dalam meter.

Mencondongkan Region untuk Arah

Google Directions API Directions Service menampilkan hasil alamat yang dipengaruhi oleh domain (region atau negara) tempat Anda memuat bootstrap JavaScript. (Karena sebagian besar pengguna memuat https://maps.googleapis.com/, ini akan menyetel domain implisit ke Amerika Serikat.) Jika Anda memuat bootstrap dari domain lain yang didukung, Anda akan mendapatkan hasil yang dipengaruhi oleh domain tersebut. Misalnya, penelusuran untuk "San Francisco" dapat menampilkan hasil yang berbeda dari aplikasi yang memuat https://maps.googleapis.com/ (Amerika Serikat) dibandingkan dengan satu hasil pemuatan http://maps.google.es/ (Spanyol).

Anda juga dapat menetapkan layanan Directions untuk menampilkan hasil yang bias ke wilayah tertentu menggunakan parameter region. Parameter ini mengambil kode wilayah, yang ditetapkan sebagai subtag region Unicode dua karakter (non-numerik). Pada umumnya, tag ini dipetakan langsung ke nilai dua karakter ccTLD ("top-level domain&quot); seperti "uk" di "co.uk" misalnya. Dalam beberapa kasus, tag region juga mendukung kode ISO-3166-1, yang terkadang berbeda dari nilai ccTLD ("GB" untuk "Britania Raya" misalnya).

Saat menggunakan parameter region:

  • Tentukan satu negara atau wilayah saja. Beberapa nilai akan diabaikan, dan dapat mengakibatkan permintaan gagal.
  • Hanya gunakan subtag region dua karakter (format Unicode CLDR). Semua input lainnya akan menghasilkan error.

Pembiasan wilayah hanya didukung untuk negara dan wilayah yang mendukung rute. Lihat Detail Cakupan Google Maps Platform untuk melihat cakupan internasional untuk Directions API.

Merender Arah

Memulai permintaan rute ke DirectionsService dengan metode route() mengharuskan penerusan callback yang dieksekusi setelah selesainya permintaan layanan. Callback ini akan menampilkan kode DirectionsResult dan DirectionsStatus dalam respons.

Status Kueri Arah

DirectionsStatus dapat menampilkan nilai berikut:

  • OK menunjukkan bahwa respons berisi DirectionsResult yang valid.
  • NOT_FOUND menunjukkan setidaknya salah satu lokasi yang ditentukan dalam asal, tujuan, atau titik jalan permintaan tidak dapat di-geocoding.
  • ZERO_RESULTS menunjukkan tidak ada rute yang dapat ditemukan antara tempat asal dan tujuan.
  • MAX_WAYPOINTS_EXCEEDED menunjukkan bahwa terlalu banyak kolom DirectionsWaypoint yang disediakan dalam DirectionsRequest. Lihat bagian batas untuk titik jalan di bawah.
  • MAX_ROUTE_LENGTH_EXCEEDED menunjukkan bahwa rute yang diminta terlalu panjang dan tidak dapat diproses. Error ini terjadi saat rute yang lebih kompleks ditampilkan. Coba kurangi jumlah titik jalan, belokan, atau petunjuk.
  • INVALID_REQUEST menunjukkan bahwa DirectionsRequest yang diberikan tidak valid. Penyebab paling umum dari kode error ini adalah permintaan yang tidak memiliki asal atau tujuan, atau permintaan transportasi umum yang menyertakan titik jalan.
  • OVER_QUERY_LIMIT menunjukkan bahwa halaman telah mengirim terlalu banyak permintaan dalam jangka waktu yang diizinkan.
  • REQUEST_DENIED menunjukkan bahwa halaman web tidak diizinkan untuk menggunakan layanan rute.
  • UNKNOWN_ERROR menunjukkan bahwa permintaan rute tidak dapat diproses karena terjadi error server. Permintaan mungkin berhasil jika Anda mencoba lagi.

Anda harus memastikan bahwa kueri rute menampilkan hasil yang valid dengan memeriksa nilai ini sebelum memproses hasilnya.

Menampilkan DirectionsResult

DirectionsResult berisi hasil kueri rute, yang dapat Anda tangani sendiri, atau diteruskan ke objek DirectionsRenderer, yang dapat otomatis menangani penayangan hasil pada peta.

Untuk menampilkan DirectionsResult menggunakan DirectionsRenderer, Anda perlu melakukan hal berikut:

  1. Buat objek DirectionsRenderer.
  2. Panggil setMap() pada perender untuk mengikatnya ke peta yang diteruskan.
  3. Panggil setDirections() pada perender, dengan meneruskan DirectionsResult seperti yang disebutkan di atas. Karena perender adalah MVCObject, perender ini akan otomatis mendeteksi perubahan pada propertinya dan memperbarui peta saat rute terkaitnya telah berubah.

Contoh berikut menghitung rute antara dua lokasi di Route 66, tempat asal dan tujuan ditetapkan oleh nilai "start" dan "end" yang diberikan dalam daftar dropdown. DirectionsRenderer menangani tampilan polyline di antara lokasi yang ditunjukkan, dan penempatan penanda pada asal, tujuan, dan titik jalan, jika berlaku.

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);
    }
  });
}

Dalam tubuh 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>

Lihat contoh

Contoh berikut menampilkan rute menggunakan berbagai mode perjalanan antara Haight-Ashbury ke Ocean Beach di San Francisco, CA:

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);
    }
  });
}

Dalam tubuh 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>

Lihat contoh

DirectionsRenderer tidak hanya menangani tampilan polyline dan penanda terkait, tetapi juga dapat menangani tampilan tekstual rute sebagai serangkaian langkah. Untuk melakukannya, panggil setPanel() pada DirectionsRenderer Anda, dengan meneruskan <div> untuk menampilkan informasi ini. Dengan begitu, Anda dapat memastikan bahwa Anda menampilkan informasi hak cipta yang sesuai, dan peringatan apa pun yang dapat dikaitkan dengan hasilnya.

Rute tekstual akan diberikan menggunakan setelan bahasa pilihan browser, atau bahasa yang ditentukan saat memuat JavaScript API menggunakan parameter language. (Untuk informasi selengkapnya, lihat Pelokalan.) Untuk rute transportasi umum, waktu akan ditampilkan dalam zona waktu saat perhentian transportasi umum tersebut.

Contoh berikut identik dengan yang ditampilkan di atas, tetapi menyertakan panel <div> untuk menampilkan rute:

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);
    }
  });
}

Dalam tubuh HTML:

<div id="map" style="float:left;width:70%;height:100%"></div>
<div id="directionsPanel" style="float:right;width:30%;height:100%"></div>

Lihat contoh

Objek DirectionsResult

Saat mengirimkan permintaan rute ke DirectionsService, Anda akan menerima respons yang terdiri dari kode status, dan hasil, yang merupakan objek DirectionsResult. DirectionsResult adalah literal objek dengan kolom berikut:

  • geocoded_waypoints[] berisi array objek DirectionsGeocodedWaypoint, yang masing-masing berisi detail tentang geocoding tempat asal, tujuan, dan titik jalan.
  • routes[] berisi array objek DirectionsRoute. Setiap rute menunjukkan cara menuju dari tempat asal ke tujuan yang disediakan di DirectionsRequest. Umumnya, hanya satu rute yang ditampilkan untuk setiap permintaan tertentu, kecuali jika kolom provideRouteAlternatives permintaan ditetapkan ke true. Dalam hal ini, beberapa rute dapat ditampilkan.

Catatan: Properti via_waypoint tidak digunakan lagi dalam rute alternatif. Versi 3.27 adalah versi terakhir API yang menambahkan ekstra melalui titik jalan di rute alternatif. Untuk API versi 3.28 dan yang lebih tinggi, Anda dapat terus mengimplementasikan rute yang dapat ditarik menggunakan layanan Directions dengan menonaktifkan penarikan rute alternatif. Hanya rute utama yang harus dapat ditarik. Pengguna dapat menarik rute utama sampai cocok dengan rute alternatif.

Titik Jalan Hasil Geocoding Arah

DirectionsGeocodedWaypoint berisi detail tentang geocoding tempat asal, tujuan, dan titik jalan.

DirectionsGeocodedWaypoint adalah literal objek dengan kolom berikut:

  • geocoder_status menunjukkan kode status yang dihasilkan dari operasi geocoding. Bidang ini bisa berisi nilai berikut:
    • "OK" menunjukkan bahwa tidak ada error yang terjadi; alamat berhasil diuraikan dan setidaknya satu geocode ditampilkan.
    • "ZERO_RESULTS" menunjukkan bahwa geocoding berhasil tetapi tidak menampilkan hasil. Ini dapat terjadi jika geocoder meneruskan address yang tidak ada.
  • partial_match menunjukkan bahwa geocoder tidak menampilkan hasil yang sama persis dengan permintaan asli, meskipun dapat mencocokkan bagian dari alamat yang diminta. Anda dapat memeriksa permintaan asli untuk kesalahan ejaan dan/atau alamat yang tidak lengkap.

    Kecocokan parsial paling sering terjadi untuk alamat yang tidak ada dalam lokalitas yang Anda teruskan dalam permintaan. Kecocokan parsial juga dapat ditampilkan jika permintaan cocok dengan dua lokasi atau lebih dalam lokalitas yang sama. Misalnya, "Hillpar St, Bristol, UK" akan menampilkan kecocokan parsial untuk Henry Street dan Henrietta Street. Perhatikan bahwa jika permintaan menyertakan komponen alamat yang salah eja, layanan geocoding mungkin akan menyarankan alamat alternatif. Saran yang dipicu dengan cara ini juga akan ditandai sebagai kecocokan sebagian.

  • place_id adalah ID unik suatu tempat, yang dapat digunakan dengan Google API lainnya. Misalnya, Anda dapat menggunakan place_id dengan library Google Places API untuk mendapatkan detail bisnis lokal, seperti nomor telepon, jam buka, ulasan pengguna, dan lainnya. Lihat ringkasan ID tempat.
  • types[] adalah array yang menunjukkan jenis hasil yang ditampilkan. Array ini berisi sekumpulan tag atau lebih yang mengidentifikasi jenis fitur yang ditampilkan dalam hasil. Misalnya, geocode dari "Chicago" menampilkan "lokalitas" yang menunjukkan bahwa "Chicago" adalah kota, dan juga menampilkan "politik" yang menunjukkan bahwa itu adalah entitas politik.

Rute Directions

Catatan: Objek DirectionsTrip lama telah diganti namanya menjadi DirectionsRoute. Perhatikan bahwa rute sekarang merujuk pada keseluruhan perjalanan awal sampai akhir, bukan hanya segmen dari perjalanan orang tua.

DirectionsRoute berisi satu hasil dari asal dan tujuan yang ditentukan. Rute ini dapat terdiri dari satu atau beberapa segmen (dari jenis DirectionsLeg) bergantung pada apakah ada titik jalan yang ditetapkan. Selain itu, rute tersebut juga berisi informasi hak cipta dan peringatan yang harus ditampilkan kepada pengguna selain informasi rute.

DirectionsRoute adalah literal objek dengan kolom berikut:

  • legs[] berisi array objek DirectionsLeg, yang masing-masing berisi informasi tentang bagian rute, dari dua lokasi dalam rute yang diberikan. Segmen terpisah akan ditampilkan untuk setiap titik jalan atau tujuan yang ditetapkan. (Rute tanpa titik jalan akan berisi tepat satu DirectionsLeg.) Setiap segmen terdiri dari serangkaian DirectionStep.
  • waypoint_order berisi array yang menunjukkan urutan titik jalan dalam rute yang dihitung. Array ini dapat berisi urutan yang diubah jika DirectionsRequest diteruskan optimizeWaypoints: true.
  • overview_path berisi array LatLng yang mewakili perkiraan jalur (dihaluskan) rute yang dihasilkan.
  • overview_polyline berisi satu objek points yang menyimpan representasi polyline yang dienkode untuk rute. Polyline ini adalah jalur perkiraan (dihaluskan) untuk rute yang dihasilkan.
  • bounds berisi LatLngBounds yang menunjukkan batas polyline di sepanjang rute yang diberikan.
  • copyrights berisi teks hak cipta yang akan ditampilkan untuk rute ini.
  • warnings[] berisi array peringatan yang akan ditampilkan saat menampilkan rute ini. Jika tidak menggunakan objek DirectionsRenderer yang disediakan, Anda harus menangani dan menampilkan sendiri peringatan ini.
  • fare berisi total tarif (yaitu, total biaya tiket) pada rute ini. Properti ini hanya ditampilkan untuk permintaan transportasi umum dan hanya untuk rute yang menyediakan informasi tarif untuk semua transportasi umum. Informasi ini mencakup:
    • currency: Kode mata uang ISO 4217 yang menunjukkan mata uang yang digunakan untuk menyatakan jumlah.
    • value: Jumlah total tarif, dalam mata uang yang ditentukan di atas.

Segmen Arah

Catatan: Objek DirectionsRoute lama telah diganti namanya menjadi DirectionsLeg.

DirectionsLeg menentukan satu segmen perjalanan dari tempat asal ke tujuan di rute yang dihitung. Untuk rute yang tidak berisi titik jalan, rute tersebut akan terdiri dari satu "kaki," tetapi untuk rute yang menentukan satu atau beberapa titik jalan, rute tersebut akan terdiri dari satu atau beberapa bagian, yang sesuai dengan bagian tertentu dari perjalanan tersebut.

DirectionsLeg adalah literal objek dengan kolom berikut:

  • steps[] berisi array objek DirectionsStep yang menunjukkan informasi tentang setiap langkah terpisah dari segmen perjalanan.
  • distance menunjukkan total jarak yang ditempuh oleh segmen ini, sebagai objek Distance dengan bentuk berikut:

    • value menunjukkan jarak dalam meter
    • text berisi representasi string dari jarak, yang secara default ditampilkan dalam satuan seperti yang digunakan di titik asal. (Misalnya, mil akan digunakan untuk setiap asal di Amerika Serikat.) Anda dapat mengganti sistem unit ini dengan secara khusus menyetel UnitSystem dalam kueri asli. Perhatikan bahwa apa pun sistem unit yang Anda gunakan, kolom distance.value selalu berisi nilai yang dinyatakan dalam meter.

    Bidang ini mungkin tidak didefinisikan jika jaraknya tidak diketahui.

  • duration menunjukkan total durasi segmen ini, sebagai objek Duration dengan bentuk berikut:

    • value menunjukkan durasi dalam detik.
    • text berisi representasi string dari durasi.

    Bidang ini mungkin tidak didefinisikan jika durasi tidak diketahui.

  • duration_in_traffic menunjukkan total durasi segmen ini, dengan mempertimbangkan kondisi traffic saat ini. duration_in_traffic hanya ditampilkan jika semua hal berikut benar:

    • Permintaan tidak berisi titik jalan persinggahan. Artinya, peta situs tidak menyertakan titik jalan dengan stopover sebagai true.
    • Permintaan ini khusus untuk rute mobil—mode ditetapkan ke driving.
    • departureTime disertakan sebagai bagian dari kolom drivingOptions dalam permintaan.
    • Kondisi lalu lintas tersedia untuk rute yang diminta.

    duration_in_traffic berisi kolom berikut:

    • value menunjukkan durasi dalam detik.
    • text berisi representasi durasi yang dapat dibaca manusia.
  • arrival_time berisi perkiraan waktu tiba untuk segmen ini. Properti ini hanya dikembalikan untuk arah angkutan umum. Hasilnya ditampilkan sebagai objek Time dengan tiga properti:
    • value waktu yang ditentukan sebagai objek Date JavaScript.
    • text waktu yang ditentukan sebagai string. Waktu ditampilkan dalam zona waktu perhentian transportasi umum.
    • time_zone berisi zona waktu stasiun ini. Nilainya adalah nama zona waktu seperti yang didefinisikan dalam Database Zona Waktu IANA, mis. "America/New_York".
  • departure_time berisi perkiraan waktu keberangkatan untuk segmen ini, yang ditetapkan sebagai objek Time. departure_time hanya tersedia untuk rute transportasi umum.
  • start_location berisi LatLng asal kaki ini. Karena Layanan Web Rute menghitung rute antar lokasi dengan menggunakan opsi transportasi terdekat (biasanya jalan) di titik awal dan akhir, start_location mungkin berbeda dari tempat asal yang diberikan segmen ini jika, misalnya, jalan tidak dekat dengan tempat asal.
  • end_location berisi LatLng tujuan segmen ini. Karena DirectionsService menghitung rute antar-lokasi menggunakan opsi transportasi terdekat (biasanya jalan) di titik awal dan akhir, end_location mungkin berbeda dari tujuan yang diberikan segmen ini jika, misalnya, jalan tidak dekat dengan tujuan.
  • start_address berisi alamat yang dapat dibaca manusia (biasanya alamat jalan) dari awal segmen ini.

    Konten ini dimaksudkan untuk dibaca apa adanya. Jangan mengurai alamat yang diformat secara terprogram.
  • end_address berisi alamat yang dapat dibaca manusia (biasanya alamat jalan) akhir segmen ini.

    Konten ini dimaksudkan untuk dibaca apa adanya. Jangan mengurai alamat yang diformat secara terprogram.

Langkah Arah

DirectionsStep adalah unit paling atom dari rute rute, yang berisi satu langkah yang menjelaskan satu petunjuk spesifik tentang perjalanan. Mis. "Belok kiri di W. St.&quot ke-4; Langkah ini tidak hanya menjelaskan petunjuk, tetapi juga berisi informasi jarak dan durasi yang terkait dengan langkah ini terkait dengan langkah berikutnya. Misalnya, langkah yang dinyatakan sebagai "Gabungkan ke I-80 West" dapat berisi durasi "37 mil" dan "40 menit," menunjukkan bahwa langkah berikutnya adalah 37 mil/40 menit dari langkah ini.

Saat menggunakan layanan Directions untuk menelusuri rute transportasi umum, array langkah akan menyertakan Informasi Transportasi Umum Khusus dalam bentuk objek transit. Jika rute menyertakan beberapa moda transportasi, rute mendetail akan diberikan untuk langkah berjalan kaki atau mengemudi dalam array steps[]. Misalnya, langkah berjalan kaki akan menyertakan rute dari lokasi awal dan akhir: "Walk to Innes Ave & Fitch St". Langkah tersebut akan menyertakan rute jalan kaki mendetail untuk rute tersebut di array steps[], seperti: "Ke arah barat laut", "Belok kiri ke Arelious Walker", dan "Belok kiri ke Innes Ave".

DirectionsStep adalah literal objek dengan kolom berikut:

  • instructions berisi petunjuk untuk langkah ini dalam string teks.
  • distance berisi jarak yang ditempuh oleh langkah ini hingga langkah berikutnya, sebagai objek Distance. (Lihat deskripsi dalam DirectionsLeg di atas.) Kolom ini mungkin tidak ditentukan jika jaraknya tidak diketahui.
  • duration berisi perkiraan waktu yang diperlukan untuk melakukan langkah, hingga langkah berikutnya, sebagai objek Duration. (Lihat deskripsi dalam DirectionsLeg di atas.) Kolom ini mungkin tidak ditentukan jika durasinya tidak diketahui.
  • start_location berisi geocode LatLng dari titik awal langkah ini.
  • end_location berisi LatLng dari titik akhir langkah ini.
  • polyline berisi satu objek points yang menyimpan representasi polyline yang dienkode untuk langkah tersebut. Polyline ini adalah perkiraan jalur (dihaluskan) langkah.
  • steps[] literal objek DirectionsStep yang berisi rute mendetail untuk langkah berjalan atau mengemudi dalam rute transportasi umum. Sub-langkah hanya tersedia untuk arah angkutan umum.
  • travel_mode berisi TravelMode yang digunakan dalam langkah ini. Rute transportasi umum dapat menyertakan kombinasi rute jalan kaki dan transportasi umum.
  • path berisi array LatLngs yang menjelaskan kursus langkah ini.
  • transit berisi informasi khusus transportasi umum, seperti waktu kedatangan dan keberangkatan, serta nama jalur transit.

Informasi Spesifik Angkutan Umum

Rute transportasi umum menampilkan informasi tambahan yang tidak relevan untuk moda transportasi lainnya. Properti tambahan ini diekspos melalui objek TransitDetails, yang ditampilkan sebagai properti DirectionsStep. Dari objek TransitDetails Anda dapat mengakses informasi tambahan untuk objek TransitStop, TransitLine, TransitAgency, dan VehicleType seperti yang dijelaskan di bawah ini.

Detail Angkutan Umum

Objek TransitDetails menampilkan properti berikut:

  • arrival_stop berisi objek TransitStop yang mewakili stasiun/perhentian kedatangan dengan properti berikut:
    • name nama stasiun/halte transportasi umum. Misalnya "Square Union".
    • location lokasi stasiun/perhentian transportasi umum, yang direpresentasikan sebagai LatLng.
  • departure_stop berisi objek TransitStop yang mewakili stasiun/perhentian keberangkatan.
  • arrival_time berisi waktu kedatangan, yang ditentukan sebagai objek Time dengan tiga properti:
    • value waktu yang ditentukan sebagai objek Date JavaScript.
    • text waktu yang ditentukan sebagai string. Waktu ditampilkan dalam zona waktu perhentian transportasi umum.
    • time_zone berisi zona waktu stasiun ini. Nilainya adalah nama zona waktu seperti yang didefinisikan dalam Database Zona Waktu IANA, mis. "America/New_York".
  • departure_time berisi waktu keberangkatan, yang ditentukan sebagai objek Time.
  • headsign menentukan arah yang perlu dilalui di jalur ini, seperti yang ditandai pada kendaraan atau di halte keberangkatan. Ini sering kali akan berupa stasiun terakhir.
  • Jika tersedia, headway akan menentukan perkiraan jumlah detik antar keberangkatan dari perhentian yang sama pada saat ini. Misalnya, dengan nilai headway 600, Anda akan menunggu selama sepuluh menit jika ketinggalan bus.
  • line berisi literal objek TransitLine yang berisi informasi tentang jalur transit yang digunakan dalam langkah ini. TransitLine memberikan nama dan operator baris, beserta properti lain yang dijelaskan dalam dokumentasi referensi TransitLine.
  • num_stops berisi jumlah perhentian dalam langkah ini. Menyertakan halte kedatangan, namun bukan halte keberangkatan. Misalnya, jika rute Anda mengharuskan berangkat dari Perhentian A, melewati perhentian B dan C, dan tiba di perhentian D, num_stops akan menampilkan 3.

Jalur Angkutan Umum

Objek TransitLine menampilkan properti berikut:

  • name berisi nama lengkap jalur transit ini. Misalnya "7 Avenue Express" atau "14th St Crosstown".
  • short_name berisi nama pendek jalur transit ini. Biasanya ini berupa nomor baris, seperti "2" atau "M14".
  • agencies adalah array yang berisi satu objek TransitAgency. Objek TransitAgency memberikan informasi tentang operator baris ini, termasuk properti berikut:
    • name berisi nama perusahaan transportasi umum.
    • phone berisi nomor telepon perusahaan transportasi umum.
    • url berisi URL untuk perusahaan transportasi umum.

    Catatan: Jika merender rute transportasi umum secara manual, bukan menggunakan objek DirectionsRenderer, Anda harus menampilkan nama dan URL perusahaan transportasi umum yang melayani hasil perjalanan.

  • url berisi URL untuk jalur transit ini seperti yang diberikan oleh perusahaan transportasi umum.
  • icon berisi URL untuk ikon yang terkait dengan baris ini. Kebanyakan kota akan menggunakan ikon generik yang bervariasi sesuai dengan tipe kendaraan. Beberapa jalur transit, seperti sistem kereta bawah tanah New York, memiliki ikon khusus untuk jalur tersebut.
  • color berisi warna yang biasa digunakan dalam reklame untuk transportasi umum ini. Warna akan ditetapkan sebagai string heksadesimal seperti: #FF0033.
  • text_color berisi warna teks yang biasa digunakan untuk reklame baris ini. Warna akan ditetapkan sebagai string heksadesimal.
  • vehicle berisi objek Vehicle yang menyertakan properti berikut:
    • name berisi nama kendaraan pada jalur ini. Misalnya "Subway."
    • type berisi jenis kendaraan yang digunakan pada jalur ini. Lihat dokumentasi Jenis Kendaraan untuk mengetahui daftar lengkap nilai yang didukung.
    • icon berisi URL untuk ikon yang biasanya dikaitkan dengan jenis kendaraan ini.
    • local_icon berisi URL untuk ikon yang terkait dengan jenis kendaraan ini, berdasarkan reklame transportasi lokal.

Tipe Kendaraan

Objek VehicleType menampilkan properti berikut:

Nilai Definisi
VehicleType.RAIL Kereta api.
VehicleType.METRO_RAIL Angkutan umum kereta ringan.
VehicleType.SUBWAY Kereta ringan bawah tanah.
VehicleType.TRAM Kereta ringan permukaan.
VehicleType.MONORAIL Monorel.
VehicleType.HEAVY_RAIL Kereta berat.
VehicleType.COMMUTER_TRAIN Kereta pelaju.
VehicleType.HIGH_SPEED_TRAIN Kereta kecepatan tinggi.
VehicleType.BUS Bus.
VehicleType.INTERCITY_BUS Bus antarkota.
VehicleType.TROLLEYBUS Trolleybus.
VehicleType.SHARE_TAXI Berbagi taksi adalah jenis bus dengan kemampuan untuk turun dan menjemput penumpang di mana saja pada rutenya.
VehicleType.FERRY Kapal feri.
VehicleType.CABLE_CAR Kendaraan yang beroperasi pada kabel, biasanya di atas tanah. Kereta gantung bisa berupa jenis VehicleType.GONDOLA_LIFT.
VehicleType.GONDOLA_LIFT Kereta gantung.
VehicleType.FUNICULAR Kereta yang ditarik menaiki lereng curam dengan kabel. Funicular biasanya terdiri dari dua mobil, dengan setiap mobil bertindak sebagai pemberat untuk mobil lainnya.
VehicleType.OTHER Semua kendaraan lain akan mengembalikan tipe ini.

Memeriksa DirectionsResults

Komponen DirectionsResultsDirectionsRoute, DirectionsLeg, DirectionsStep, dan TransitDetails — dapat diperiksa dan digunakan saat menguraikan respons rute.

Penting: Jika Anda merender rute transportasi umum secara manual, bukan menggunakan objek DirectionsRenderer, Anda harus menampilkan nama dan URL perusahaan transportasi umum yang melayani hasil perjalanan tersebut.

Contoh berikut merencanakan rute jalan kaki ke objek wisata tertentu di New York City. Kita memeriksa rute DirectionsStep untuk menambahkan penanda bagi setiap langkah, dan melampirkan informasi ke InfoWindow dengan teks petunjuk untuk langkah tersebut.

Catatan: Karena kami menghitung rute jalan kaki, kami juga menampilkan peringatan kepada pengguna di panel <div> terpisah.

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);
  });
}

Dalam tubuh HTML:

<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>

Lihat contoh

Menggunakan Titik Jalan dalam Rute

Seperti yang dinyatakan dalam DirectionsRequest, Anda juga dapat menentukan titik jalan (dari jenis DirectionsWaypoint) saat menghitung rute menggunakan layanan Directions untuk rute jalan kaki, bersepeda, atau mengemudi. Titik jalan tidak tersedia untuk arah angkutan umum. Titik jalan memungkinkan Anda menghitung rute melalui lokasi tambahan, dengan rute yang dikembalikan melewati titik jalan yang diberikan.

waypoint terdiri dari kolom berikut:

  • location (wajib) menentukan alamat titik jalan.
  • stopover (opsional) menunjukkan apakah titik jalan ini adalah perhentian sebenarnya pada rute tersebut (true) atau hanya preferensi untuk rute melalui lokasi yang ditunjukkan (false). Perhentian secara default adalah true.

Secara default, layanan Directions menghitung rute melalui titik jalan yang diberikan dalam urutan yang diberikan. Secara opsional, Anda dapat meneruskan optimizeWaypoints: true dalam DirectionsRequest untuk memungkinkan layanan Directions mengoptimalkan rute yang disediakan dengan menyusun ulang titik jalan dalam urutan yang lebih efisien. (Pengoptimalan ini adalah aplikasi dari masalah staf penjualan yang bepergian.) Waktu tempuh adalah faktor utama yang dioptimalkan, tetapi faktor lain seperti jarak, jumlah belokan, dan lainnya dapat diperhitungkan saat memutuskan rute yang paling efisien. Semua titik jalan harus merupakan persinggahan untuk layanan Directions guna mengoptimalkan rutenya.

Jika Anda menginstruksikan layanan Directions untuk mengoptimalkan urutan titik jalan, urutannya akan ditampilkan di kolom waypoint_order dalam objek DirectionsResult.

Contoh berikut menghitung rute lintas negara di seluruh Amerika Serikat menggunakan berbagai titik awal, titik akhir, dan titik jalan. (Untuk memilih beberapa titik jalan, tekan Ctrl-Klik saat memilih item dalam daftar.) Perhatikan bahwa kita memeriksa routes.start_address dan routes.end_address untuk memberi kita teks bagi setiap titik awal dan akhir rute.

TypeScript

function initMap(): void {
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer();
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 6,
      center: { lat: 41.85, lng: -87.65 },
    }
  );

  directionsRenderer.setMap(map);

  (document.getElementById("submit") as HTMLElement).addEventListener(
    "click",
    () => {
      calculateAndDisplayRoute(directionsService, directionsRenderer);
    }
  );
}

function calculateAndDisplayRoute(
  directionsService: google.maps.DirectionsService,
  directionsRenderer: google.maps.DirectionsRenderer
) {
  const waypts: google.maps.DirectionsWaypoint[] = [];
  const checkboxArray = document.getElementById(
    "waypoints"
  ) as HTMLSelectElement;

  for (let i = 0; i < checkboxArray.length; i++) {
    if (checkboxArray.options[i].selected) {
      waypts.push({
        location: (checkboxArray[i] as HTMLOptionElement).value,
        stopover: true,
      });
    }
  }

  directionsService
    .route({
      origin: (document.getElementById("start") as HTMLInputElement).value,
      destination: (document.getElementById("end") as HTMLInputElement).value,
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING,
    })
    .then((response) => {
      directionsRenderer.setDirections(response);

      const route = response.routes[0];
      const summaryPanel = document.getElementById(
        "directions-panel"
      ) as HTMLElement;

      summaryPanel.innerHTML = "";

      // For each route, display summary information.
      for (let i = 0; i < route.legs.length; i++) {
        const routeSegment = i + 1;

        summaryPanel.innerHTML +=
          "<b>Route Segment: " + routeSegment + "</b><br>";
        summaryPanel.innerHTML += route.legs[i].start_address + " to ";
        summaryPanel.innerHTML += route.legs[i].end_address + "<br>";
        summaryPanel.innerHTML += route.legs[i].distance!.text + "<br><br>";
      }
    })
    .catch((e) => window.alert("Directions request failed due to " + status));
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

function initMap() {
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer();
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 6,
    center: { lat: 41.85, lng: -87.65 },
  });

  directionsRenderer.setMap(map);
  document.getElementById("submit").addEventListener("click", () => {
    calculateAndDisplayRoute(directionsService, directionsRenderer);
  });
}

function calculateAndDisplayRoute(directionsService, directionsRenderer) {
  const waypts = [];
  const checkboxArray = document.getElementById("waypoints");

  for (let i = 0; i < checkboxArray.length; i++) {
    if (checkboxArray.options[i].selected) {
      waypts.push({
        location: checkboxArray[i].value,
        stopover: true,
      });
    }
  }

  directionsService
    .route({
      origin: document.getElementById("start").value,
      destination: document.getElementById("end").value,
      waypoints: waypts,
      optimizeWaypoints: true,
      travelMode: google.maps.TravelMode.DRIVING,
    })
    .then((response) => {
      directionsRenderer.setDirections(response);

      const route = response.routes[0];
      const summaryPanel = document.getElementById("directions-panel");

      summaryPanel.innerHTML = "";

      // For each route, display summary information.
      for (let i = 0; i < route.legs.length; i++) {
        const routeSegment = i + 1;

        summaryPanel.innerHTML +=
          "<b>Route Segment: " + routeSegment + "</b><br>";
        summaryPanel.innerHTML += route.legs[i].start_address + " to ";
        summaryPanel.innerHTML += route.legs[i].end_address + "<br>";
        summaryPanel.innerHTML += route.legs[i].distance.text + "<br><br>";
      }
    })
    .catch((e) => window.alert("Directions request failed due to " + status));
}

window.initMap = initMap;

Batas dan Pembatasan untuk Titik Jalan

Batas penggunaan dan pembatasan berikut berlaku:

  • Jumlah titik jalan maksimum yang diizinkan saat menggunakan layanan Directions di Maps JavaScript API adalah 25, ditambah asal dan tujuan. Batasnya sama untuk layanan web Directions API.
  • Untuk layanan web Directions API, pelanggan diizinkan 25 titik jalan, ditambah asal, dan tujuan.
  • Pelanggan Premium Plan Google Maps Platform diizinkan 25 titik jalan, ditambah asal, dan tujuan.
  • Titik jalan tidak didukung untuk arah angkutan umum.

Arah yang Bisa Diseret

Pengguna dapat memodifikasi rute sepeda, berjalan, atau mengemudi yang ditampilkan menggunakan DirectionsRenderer secara dinamis jika dapat ditarik, sehingga memungkinkan pengguna memilih dan mengubah rute dengan mengklik dan menarik jalur yang dihasilkan di peta. Anda menunjukkan apakah tampilan perender memungkinkan rute yang dapat ditarik dengan menetapkan properti draggable ke true. Arah angkutan umum tidak bisa dibuat agar bisa diseret.

Jika rute dapat ditarik, pengguna dapat memilih titik mana pun di jalur (atau titik jalan) pada hasil yang dirender dan memindahkan komponen yang ditunjukkan ke lokasi baru. DirectionsRenderer akan diupdate secara dinamis untuk menampilkan jalur yang diubah. Setelah dirilis, titik jalan transisi akan ditambahkan ke peta (yang ditunjukkan dengan penanda putih kecil). Memilih dan memindahkan segmen jalur akan mengubah segmen rute tersebut, sedangkan memilih dan memindahkan penanda titik jalan (termasuk titik awal dan akhir) akan mengubah segmen rute yang melewati titik jalan tersebut.

Karena rute yang dapat ditarik diubah dan dirender pada sisi klien, Anda mungkin perlu memantau dan menangani peristiwa directions_changed di DirectionsRenderer agar diberi tahu saat pengguna mengubah rute yang ditampilkan.

Kode berikut menunjukkan perjalanan dari Perth di pantai barat Australia ke Sydney di pantai timur. Kode ini memantau peristiwa directions_changed untuk memperbarui total jarak semua segmen perjalanan.

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -24.345, lng: 134.46 }, // Australia.
    }
  );

  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer({
    draggable: true,
    map,
    panel: document.getElementById("panel") as HTMLElement,
  });

  directionsRenderer.addListener("directions_changed", () => {
    const directions = directionsRenderer.getDirections();

    if (directions) {
      computeTotalDistance(directions);
    }
  });

  displayRoute(
    "Perth, WA",
    "Sydney, NSW",
    directionsService,
    directionsRenderer
  );
}

function displayRoute(
  origin: string,
  destination: string,
  service: google.maps.DirectionsService,
  display: google.maps.DirectionsRenderer
) {
  service
    .route({
      origin: origin,
      destination: destination,
      waypoints: [
        { location: "Adelaide, SA" },
        { location: "Broken Hill, NSW" },
      ],
      travelMode: google.maps.TravelMode.DRIVING,
      avoidTolls: true,
    })
    .then((result: google.maps.DirectionsResult) => {
      display.setDirections(result);
    })
    .catch((e) => {
      alert("Could not display directions due to: " + e);
    });
}

function computeTotalDistance(result: google.maps.DirectionsResult) {
  let total = 0;
  const myroute = result.routes[0];

  if (!myroute) {
    return;
  }

  for (let i = 0; i < myroute.legs.length; i++) {
    total += myroute.legs[i]!.distance!.value;
  }

  total = total / 1000;
  (document.getElementById("total") as HTMLElement).innerHTML = total + " km";
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -24.345, lng: 134.46 }, // Australia.
  });
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer({
    draggable: true,
    map,
    panel: document.getElementById("panel"),
  });

  directionsRenderer.addListener("directions_changed", () => {
    const directions = directionsRenderer.getDirections();

    if (directions) {
      computeTotalDistance(directions);
    }
  });
  displayRoute(
    "Perth, WA",
    "Sydney, NSW",
    directionsService,
    directionsRenderer
  );
}

function displayRoute(origin, destination, service, display) {
  service
    .route({
      origin: origin,
      destination: destination,
      waypoints: [
        { location: "Adelaide, SA" },
        { location: "Broken Hill, NSW" },
      ],
      travelMode: google.maps.TravelMode.DRIVING,
      avoidTolls: true,
    })
    .then((result) => {
      display.setDirections(result);
    })
    .catch((e) => {
      alert("Could not display directions due to: " + e);
    });
}

function computeTotalDistance(result) {
  let total = 0;
  const myroute = result.routes[0];

  if (!myroute) {
    return;
  }

  for (let i = 0; i < myroute.legs.length; i++) {
    total += myroute.legs[i].distance.value;
  }

  total = total / 1000;
  document.getElementById("total").innerHTML = total + " km";
}

window.initMap = initMap;
Lihat contoh

Coba Sampel