Layanan Directions

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Ringkasan

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

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 mengembalikan arah multi-bagian dengan menggunakan serangkaian titik jalan. Rute ditampilkan sebagai gambar polyline 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, terlebih dahulu pastikan 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 disiapkan untuk Maps JavaScript API dan 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 ENABLE. Setelah proses ini selesai, Directions API akan muncul dalam daftar API di Dashboard.

Harga dan kebijakan

Harga

Pada 16 Juli 2018, paket harga baru, yaitu bayar sesuai penggunaan, diberlakukan 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.

Kebijakan

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

Permintaan Directions

Akses layanan Directions bersifat asinkron, karena Google Maps API perlu membuat panggilan ke server eksternal. Karena itu, Anda perlu meneruskan metode callback untuk dieksekusi setelah permintaan diselesaikan. Metode callback ini harus memproses hasil. Perhatikan, layanan Directions mungkin mengembalikan lebih dari satu kemungkinan itinerari sebagai sebuah array routes[] yang terpisah.

Untuk menggunakan rute di Maps JavaScript API, buat objek berjenis DirectionsService dan panggil DirectionsService.route() untuk memulai permintaan ke layanan Directions, dengan meneruskan 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
}

Kolom-kolom ini dijelaskan di bawah:

  • origin (diperlukan) menetapkan 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 (diperlukan) menetapkan lokasi akhir untuk menghitung arah rute. Opsinya sama seperti kolom origin yang dijelaskan di atas.
  • travelMode (diperlukan) menetapkan moda transportasi yang akan digunakan saat menghitung rute. Nilai yang valid ditetapkan dalam Mode Perjalanan di bawah.
  • transitOptions (opsional) menentukan nilai yang hanya berlaku untuk permintaan dengan travelMode adalah TRANSIT. Nilai yang valid dijelaskan dalam Opsi Transportasi Umum, di bawah.
  • drivingOptions (opsional) menentukan nilai yang hanya berlaku untuk permintaan dengan travelMode adalah DRIVING. Nilai yang valid dijelaskan dalam Opsi Mengemudi, di bawah.
  • unitSystem (opsional) menetapkan sistem satuan yang akan digunakan saat menampilkan hasil. Nilai yang valid ditentukan dalam Sistem Unit di bawah.

  • waypoints[] (opsional) menetapkan array DirectionsWaypoint. Titik jalan mengubah rute dengan mengarahkannya melalui lokasi yang ditetapkan. Titik jalan ditetapkan sebagai literal objek dengan kolom-kolom yang ditampilkan di bawah ini:

    • location menetapkan 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 membelah rute menjadi dua rute.

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

  • optimizeWaypoints (opsional) menetapkan bahwa rute yang menggunakan waypoints yang disediakan dapat dioptimalkan dengan mengatur ulang titik jalan dalam urutan yang lebih efisien. Jika true, layanan Directions akan mengembalikan 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. Kolom ini hanya tersedia untuk permintaan tanpa titik jalan perantara.
  • avoidFerries (opsional) jika ditetapkan ke true menunjukkan bahwa rute yang dihitung akan menghindari kapal feri, jika memungkinkan.
  • avoidHighways (opsional) jika ditetapkan ke true menunjukkan bahwa rute yang dihitung akan menghindari jalan raya utama jika memungkinkan.
  • avoidTolls (opsional) jika ditetapkan ke true menunjukkan bahwa rute yang dihitung akan menghindari jalan tol, jika memungkinkan.
  • region (opsional) menentukan kode wilayah, yang ditetapkan sebagai nilai dua karakter ccTLD ("domain level teratas"). (Untuk informasi selengkapnya, lihat Pembiasan 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 arah, Anda perlu menetapkan moda transportasi yang akan digunakan. Mode perjalanan berikut saat ini telah didukung:

  • DRIVING (Default) menunjukkan rute mobil standar menggunakan jaringan jalan raya.
  • BICYCLING meminta rute sepeda melalui jalur sepeda & jalan yang disukai.
  • 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 sebuah negara mendukung rute. Jika Anda meminta rute untuk wilayah yang tidak memiliki jenis rute tersebut, respons akan mengembalikan DirectionsStatus="ZERO_RESULTS".

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

Opsi Transportasi Umum

Opsi yang tersedia untuk permintaan rute 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.

Rute transportasi umum sesuai-waktu. Rute hanya akan dikembalikan untuk waktu mendatang.

Literal objek TransitOptions berisi kolom berikut:

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

Kolom-kolom ini dijelaskan di bawah:

  • arrivalTime (opsional) menentukan waktu kedatangan yang diinginkan sebagai objek Date. Jika waktu kedatangan telah ditetapkan, 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 preferensi moda transportasi umum. Nilai-nilai berikut ini diizinkan:
    • BUS menunjukkan bahwa rute yang sudah dihitung akan mengutamakan perjalanan dengan bus.
    • RAIL menunjukkan bahwa rute yang sudah dihitung akan mengutamakan perjalanan dengan kereta api, trem, LRT, dan kereta bawah tanah.
    • SUBWAY menunjukkan bahwa rute yang sudah dihitung akan mengutamakan perjalanan dengan kereta bawah tanah.
    • TRAIN menunjukkan bahwa rute yang sudah dihitung akan mengutamakan perjalanan dengan kereta api.
    • TRAM menunjukkan bahwa rute yang sudah dihitung harus mengutamakan perjalanan dengan trem dan LRT.
  • routingPreference (opsional) menentukan preferensi untuk rute transportasi umum. Dengan menggunakan opsi ini, Anda dapat membiaskan opsi yang dikembalikan, daripada menerima rute default terbaik yang dipilih oleh API. Kolom ini hanya dapat ditetapkan jika permintaan berisi kunci API. Nilai-nilai berikut ini diizinkan:
    • FEWER_TRANSFERS menunjukkan bahwa rute yang sudah dihitung akan mengutamakan jumlah transfer yang terbatas.
    • LESS_WALKING menunjukkan bahwa rute yang sudah 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
}

Kolom-kolom 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 ke waktu yang akan datang. Tidak boleh waktu yang sudah lewat. (API mengonversi semua tanggal ke UTC untuk memastikan penanganan yang konsisten di semua 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 prediksi waktu dalam lalu lintas (duration_in_traffic) dalam respons. Jika Anda tidak menentukan waktu keberangkatan (yaitu, jika permintaan tidak menyertakan drivingOptions), rute yang dikembalikan adalah rute yang biasanya bagus tanpa memperhitungkan kondisi lalu lintas.
  • trafficModel (opsional) menentukan asumsi yang akan digunakan saat menghitung waktu dalam lalu lintas. Setelan ini memengaruhi nilai yang dikembalikan di kolom duration_in_traffic dalam respons, yang berisi prediksi waktu dalam lalu lintas berdasarkan rata-rata historis. Default-nya adalah bestguess. Nilai-nilai berikut ini diizinkan:
    • bestguess (default) menunjukkan bahwa duration_in_traffic yang dikembalikan harus berupa perkiraan waktu tempuh terbaik berdasarkan informasi historis kondisi lalu lintas dan lalu lintas langsung. Lalu lintas langsung menjadi lebih penting jika departureTime semakin dekat ke waktu sekarang.
    • pessimistic menunjukkan bahwa duration_in_traffic yang dikembalikan akan lebih lama daripada waktu tempuh sesungguhnya di sebagian besar hari, meskipun hari-hari tertentu dengan kondisi lalu lintas yang sangat parah dapat melebihi nilai ini.
    • optimistic menunjukkan bahwa duration_in_traffic yang dikembalikan akan lebih singkat daripada waktu tempuh yang sebenarnya pada sebagian besar hari, meskipun hari-hari tertentu 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 dari negara atau wilayah asal. (Catatan: Daerah asal yang dinyatakan menggunakan koordinat garis lintang/bujur, bukan alamat, selalu ditetapkan ke unit metrik secara default.) 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.

Pembiasan Wilayah untuk Rute

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

Anda juga dapat menetapkan layanan Directions untuk mengembalikan hasil yang dibiaskan ke wilayah tertentu menggunakan parameter region. Parameter ini mengambil kode wilayah, yang ditetapkan sebagai subtag wilayah Unicode dua karakter (non-numerik). Umumnya, tag ini memetakan langsung ke nilai yang berisi dua karakter ccTLD ("domain level teratas") seperti "uk" di "co.uk" misalnya. Dalam beberapa kasus, tag region juga mendukung kode ISO-3166-1, yang terkadang berbeda dari nilai ccTLD (misalnya "GB" untuk "Great Britain").

Saat menggunakan parameter region:

  • Tentukan satu negara atau wilayah saja. Beberapa nilai akan diabaikan, dan dapat menyebabkan permintaan gagal.
  • Hanya gunakan subtag wilayah 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 Rute

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

Status Kueri Rute

DirectionsStatus dapat mengembalikan 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 dalam 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 di bawah ini tentang batas untuk titik jalan.
  • MAX_ROUTE_LENGTH_EXCEEDED menunjukkan bahwa rute yang diminta terlalu panjang dan tidak dapat diproses. Error ini terjadi saat rute yang lebih kompleks dikembalikan. 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 berisi asal atau tujuan, atau permintaan transportasi umum yang menyertakan titik jalan.
  • OVER_QUERY_LIMIT menunjukkan bahwa halaman web telah mengirimkan terlalu banyak permintaan dalam jangka waktu yang diizinkan.
  • REQUEST_DENIED menunjukkan bahwa halaman web tidak diizinkan untuk menggunakan layanan Directions.
  • 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 mengembalikan hasil yang valid dengan memeriksa nilainya sebelum memproses hasilnya.

Menampilkan DirectionsResult

DirectionsResult berisi hasil kueri rute, yang dapat Anda tangani sendiri, atau meneruskannya ke objek DirectionsRenderer, yang secara otomatis dapat menangani tampilan 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 tergolong MVCObject, perender akan otomatis mendeteksi perubahan pada propertinya dan memperbarui peta jika rute yang terkait telah berubah.

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

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 mode perjalanan yang berbeda 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, dengan meneruskan <div> untuk menampilkan informasi ini. Hal itu juga memastikan bahwa Anda menampilkan informasi hak cipta yang sesuai, dan peringatan yang mungkin telah 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. Dalam hal rute transportasi umum, waktu akan ditampilkan dalam zona waktu di tempat transportasi umum tersebut berhenti.

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 asal, tujuan, dan titik jalan.
  • routes[] berisi array objek DirectionsRoute. Setiap rute menunjukkan cara untuk pergi ke tempat tujuan dari tempat asal yang diberikan di DirectionsRequest. Umumnya, hanya satu rute yang dikembalikan untuk setiap permintaan tertentu, kecuali jika kolom provideRouteAlternatives permintaan ditetapkan ke true. Dalam hal ini, beberapa rute dapat dikembalikan.

Catatan: Properti via_waypoint tidak digunakan lagi dalam rute alternatif. Versi 3.27 adalah versi terbaru 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 Rute

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. Kolom ini bisa berisi nilai berikut:
    • "OK" menunjukkan bahwa tidak terjadi error; alamat berhasil diuraikan dan setidaknya satu geocode dikembalikan.
    • "ZERO_RESULTS" menunjukkan bahwa geocode berhasil, tetapi dikembalikan tanpa hasil. Ini dapat terjadi jika pada geocoder diteruskan address yang tidak ada.
  • partial_match menunjukkan bahwa geocoder tidak mengembalikan hasil yang benar-benar cocok untuk permintaan asli, meskipun geocoder bisa mencocokkan sebagian dari alamat yang diminta. Anda mungkin ingin memeriksa permintaan asal untuk mengetahui adanya salah eja dan/atau alamat yang tidak lengkap.

    Kecocokan parsial paling sering terjadi untuk alamat jalan yang tidak ditemukan di lokasi yang Anda teruskan dalam permintaan. Kecocokan parsial juga mungkin dikembalikan jika sebuah permintaan memiliki kecocokan terhadap dua atau beberapa lokasi di daerah yang sama. Misalnya, "Hillpar St, Bristol, UK" akan mengembalikan kecocokan sebagian untuk Henry Street dan Henrietta Street. Perhatikan, jika permintaan menyertakan komponen alamat yang salah eja, layanan geocoding mungkin akan menyarankan alamat alternatif. Saran yang terpicu melalui cara ini juga akan dinilai sebagai kecocokan parsial.

  • place_id adalah ID unik suatu tempat, yang bisa digunakan bersama 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 banyak lagi. Lihat ringkasan ID tempat.
  • types[] adalah array yang menunjukkan jenis dari hasil yang dikembalikan. Array ini berisi serangkaian angka nol atau beberapa tag yang mengidentifikasi tipe fitur yang dikembalikan dalam hasil. Misalnya, geocode "Chicago" akan mengembalikan "lokalitas" yang menunjukkan bahwa "Chicago" adalah kota, dan juga mengembalikan "politik" yang menunjukkan bahwa itu adalah entitas politik.

Rute Directions

Catatan: Objek DirectionsTrip lama telah diganti namanya menjadi DirectionsRoute. Perhatikan, rute itu sekarang merujuk pada keseluruhan perjalanan dari awal sampai akhir, bukan sekadar segmen dari perjalanan induk.

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

DirectionsRoute adalah literal objek dengan kolom berikut:

  • legs[] berisi array objek DirectionsLeg, yang masing-masing berisi informasi tentang segmen rute, dari dua lokasi dalam rute tertentu. 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) dari rute yang dihasilkan.
  • overview_polyline berisi satu objek points yang menyimpan representasi polyline yang dienkode untuk rute tersebut. Polyline adalah perkiraan jalur (dihaluskan) dari rute yang dihasilkan.
  • bounds berisi LatLngBounds yang menunjukkan batas polyline di sepanjang rute tertentu.
  • 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 dikembalikan untuk permintaan transportasi umum dan hanya untuk rute yang informasi tarifnya tersedia untuk semua segmen transportasi umum. Informasi ini menyertakan:
    • currency: Kode mata uang ISO 4217 yang menunjukkan mata uang yang digunakan untuk menyatakan jumlahnya.
    • value: Jumlah total tarif, dalam mata uang yang ditetapkan di atas.

Segmen Rute

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 akan terdiri dari satu "segmen", tetapi untuk rute yang mendefinisikan satu atau beberapa titik jalan, rute akan terdiri dari satu atau beberapa segmen, sesuai dengan segmen tertentu pada 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 unit seperti yang digunakan di tempat asal. (Misalnya, satuan mil akan digunakan untuk tempat asal di Amerika Serikat.) Anda dapat mengganti sistem unit ini dengan secara khusus menetapkan UnitSystem dalam kueri asli. Perhatikan bahwa apa pun sistem unit yang Anda gunakan, kolom distance.value selalu berisi nilai yang dinyatakan dalam meter.

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

    Kolom ini mungkin tidak didefinisikan jika durasi tidak diketahui.

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

    • Permintaan tidak berisi titik jalan persinggahan. Artinya, laporan ini tidak menyertakan titik jalan dengan stopover adalah 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 orang.
  • arrival_time berisi perkiraan waktu tiba untuk segmen ini. Properti ini hanya dikembalikan untuk rute transportasi umum. Hasilnya dikembalikan 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 di tempat pemberhentian transportasi umum.
    • time_zone berisi zona waktu stasiun ini. Nilainya adalah nama zona waktu seperti yang didefinisikan dalam Database Zona Waktu IANA, misalnya "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 tempat asal segmen ini. Karena Layanan Web Directions menghitung rute antar lokasi menggunakan opsi transportasi terdekat (biasanya jalan) di titik awal dan akhir, start_location mungkin berbeda dari tempat asal yang diberikan dari segmen ini jika, misalnya, jalan tidak dekat dengan tempat asal.
  • end_location berisi LatLng tujuan segmen ini. Karena DirectionsService menghitung rute antar-lokasi dengan menggunakan opsi transportasi terdekat (biasanya jalan) di titik awal dan akhir, end_location mungkin berbeda dari tempat tujuan yang diberikan untuk segmen ini jika, misalnya, jalan tidak dekat dengan tujuan.
  • start_address berisi alamat yang bisa dibaca orang (biasanya alamat jalan) dari awal segmen ini.

    Konten ini ditujukan untuk dibaca apa adanya. Jangan mengurai alamat berformat secara terprogram.
  • end_address berisi alamat yang bisa dibaca orang (biasanya alamat jalan) dari akhir segmen ini.

    Konten ini ditujukan untuk dibaca apa adanya. Jangan mengurai alamat berformat secara terprogram.

Langkah Arah

DirectionsStep adalah satuan terkecil dari rute arah, berisi satu langkah yang menjelaskan satu petunjuk spesifik mengenai perjalanan. Misalnya, "Belok kiri di W. 4th St." Langkah ini tidak hanya menjelaskan petunjuk namun juga berisi informasi jarak dan durasi yang berkaitan dengan bagaimana hubungan langkah ini dengan langkah berikut. Misalnya, langkah yang dinyatakan dengan "Gabung ke I-80 Barat" dapat berisi durasi "37 mil" dan "40 menit", yang menunjukkan langkah berikutnya adalah 37 mil/40 menit dari langkah ini.

Saat menggunakan layanan Directions untuk menelusuri rute transportasi umum, array langkah akan menyertakan Informasi Khusus Transportasi Umum tambahan 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 petunjuk arah dari lokasi awal dan akhir: "Berjalan ke 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 didefinisikan jika jarak 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 didefinisikan jika durasi 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 tersebut.
  • steps[] literal objek DirectionsStep yang berisi detail rute untuk langkah berjalan atau mengemudi dalam rute transportasi umum. Sub-langkah hanya tersedia untuk rute transportasi umum.
  • travel_mode berisi TravelMode yang digunakan dalam langkah ini. Rute transportasi umum mungkin menyertakan kombinasi rute berjalan kaki dan transportasi umum.
  • path berisi array LatLngs yang menjelaskan arah langkah ini.
  • transit berisi informasi khusus transportasi umum, seperti waktu kedatangan dan keberangkatan, serta nama jalur transit.

Informasi Spesifik Transportasi Umum

Rute transportasi umum mengembalikan informasi tambahan yang tidak relevan untuk moda transportasi lain. Properti tambahan ini diekspos melalui objek TransitDetails, yang dikembalikan 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 Transportasi Umum

Objek TransitDetails mengekspos properti berikut:

  • arrival_stop berisi objek TransitStop yang mewakili stasiun kedatangan dengan properti berikut:
    • name nama stasiun transportasi umum. Misalnya "Union Square".
    • location lokasi stasiun transportasi umum, yang diwakili sebagai LatLng.
  • departure_stop berisi objek TransitStop yang mewakili stasiun 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 di tempat pemberhentian transportasi umum.
    • time_zone berisi zona waktu stasiun ini. Nilainya adalah nama zona waktu seperti yang didefinisikan dalam Database Zona Waktu IANA, misalnya "America/New_York".
  • departure_time berisi waktu keberangkatan, yang ditentukan sebagai objek Time.
  • headsign menentukan rute yang akan dilalui di jalur ini, sebagaimana ditandai pada kendaraan atau pada halte keberangkatan. Ini sering kali akan berupa stasiun terakhir.
  • headway, jika tersedia, 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 jalur transportasi umum, 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, yang melewati perhentian B dan C, dan tiba di perhentian D, num_stops akan mengembalikan 3.

Jalur Transit

Objek TransitLine mengekspos 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. Ini biasanya berupa nomor jalur, seperti "2" atau "M14".
  • agencies adalah array yang berisi satu objek TransitAgency. Objek TransitAgency memberikan informasi tentang operator jalur ini, termasuk properti berikut:
    • name berisi nama perusahaan transportasi umum.
    • phone berisi nomor telepon perusahaan transportasi umum.
    • url berisi URL perusahaan transportasi umum.

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

  • url berisi URL untuk jalur transit ini seperti yang diberikan oleh perusahaan transportasi umum.
  • icon berisi URL untuk ikon yang terkait dengan jalur 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 papan informasi untuk transportasi umum ini. Warna akan ditetapkan sebagai string heksadesimal seperti: #FF0033.
  • text_color berisi warna teks yang biasa digunakan untuk papan informasi pada jalur 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 pada papan informasi transportasi lokal.

Jenis Kendaraan

Objek VehicleType mengekspos properti berikut:

Nilai Definisi
VehicleType.RAIL Kereta api.
VehicleType.METRO_RAIL Transportasi umum LRT.
VehicleType.SUBWAY LRT bawah tanah.
VehicleType.TRAM LRT permukaan.
VehicleType.MONORAIL Monorel.
VehicleType.HEAVY_RAIL Kereta berat.
VehicleType.COMMUTER_TRAIN Kereta komuter.
VehicleType.HIGH_SPEED_TRAIN Kereta kecepatan tinggi.
VehicleType.BUS Bus.
VehicleType.INTERCITY_BUS Bus antarkota.
VehicleType.TROLLEYBUS Trolleybus.
VehicleType.SHARE_TAXI Share-taxi adalah sejenis bis dengan kemampuan untuk menurunkan dan mengambil 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 kereta, setiap kereta bertindak sebagai pengimbang untuk kereta yang lain.
VehicleType.OTHER Semua kendaraan lain akan mengembalikan jenis 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 perjalanan.

Contoh berikut merencanakan rute jalan kaki ke tempat wisata tertentu di Kota New York. Kita memeriksa DirectionsStep rute 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 disebutkan dalam DirectionsRequest, Anda juga dapat menentukan titik jalan (dengan jenis DirectionsWaypoint) saat menghitung rute menggunakan layanan Directions untuk rute jalan kaki, sepeda, atau mobil. Titik jalan tidak tersedia untuk rute transportasi umum. Titik jalan memungkinkan Anda menghitung rute melalui lokasi tambahan, jika rute yang dikembalikan melalui titik jalan tertentu.

waypoint terdiri dari kolom berikut:

  • location (diperlukan) 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). Persinggahan secara default adalah true.

Secara default, layanan Directions menghitung rute melalui titik jalan yang diberikan dalam urutan tertentu. Secara opsional, Anda dapat meneruskan optimizeWaypoints: true dalam DirectionsRequest agar layanan Directions dapat 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, namun faktor lain seperti jarak, jumlah belokan, dan sebagainya mungkin akan diperhitungkan saat memutuskan rute yang paling efisien. Semua titik jalan harus merupakan persinggahan untuk layanan Directions guna mengoptimalkan rute mereka.

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

Contoh berikut menghitung rute lintas negara di seluruh bagian Amerika Serikat dengan menggunakan berbagai titik awal, titik akhir, dan titik jalan. (Untuk memilih beberapa titik jalan, tekan Ctrl-Click saat memilih item dalam daftar.) Perhatikan bahwa kita memeriksa routes.start_address dan routes.end_address guna memberi kita teks untuk 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 memperoleh 25 titik jalan, ditambah asal dan tujuan.
  • Pelanggan Premium Plan Google Maps Platform diizinkan memperoleh 25 titik jalan, ditambah asal dan tujuan.
  • Titik jalan tidak didukung untuk rute transportasi umum.

Rute yang Dapat Ditarik

Pengguna dapat mengubah rute sepeda, jalan kaki, atau mobil yang ditampilkan menggunakan DirectionsRenderer secara dinamis jika dapat ditarik, sehingga pengguna dapat memilih dan mengubah rute dengan mengklik dan menarik jalur yang dihasilkan pada peta. Anda menunjukkan apakah tampilan perender memungkinkan rute yang dapat ditarik dengan menetapkan properti draggable ke true. Rute transportasi umum tidak bisa dibuat agar dapat ditarik.

Jika arah dapat ditarik, pengguna dapat memilih titik di jalur (atau titik jalan) pada hasil yang dirender dan memindahkan komponen yang dipilih ke lokasi baru. DirectionsRenderer akan diperbarui secara dinamis untuk menampilkan jalur yang diubah. Saat dirilis, titik jalan transisi akan ditambahkan ke peta (ditandai 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 titik akhir) akan mengubah segmen rute yang melewati titik jalan itu.

Karena rute yang dapat ditarik telah dimodifikasi 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 menampilkan perjalanan dari Perth di pesisir barat Australia ke Sydney di pesisir 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

Mencoba Contoh