Layanan Directions

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 menampilkan jalur yang efisien. Waktu perjalanan 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 Tempat.

Layanan Directions dapat menampilkan rute multi-bagian menggunakan serangkaian titik jalan. Rute ditampilkan sebagai gambar polyline rute di 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 Directions API diaktifkan di Konsol Google Cloud, dalam project yang sama dengan yang Anda siapkan untuk Maps JavaScript API.

Untuk menampilkan daftar API yang telah diaktifkan:

  1. Buka Konsol Google Cloud.
  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 Dashboard, cari Directions API.
  4. Jika sudah melihat API di dalam daftar, artinya Anda sudah siap. Jika API tidak tercantum, aktifkan API tersebut:
    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

Mulai 16 Juli 2018, paket harga baru, yaitu bayar sesuai penggunaan, diberlakukan untuk Maps, Rute, dan Tempat. Untuk mempelajari lebih lanjut harga baru dan batas 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. Oleh karena itu, Anda perlu meneruskan metode callback untuk dieksekusi setelah permintaan diselesaikan. Metode callback ini harus memproses hasil. Perhatikan, layanan Directions mungkin menampilkan 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 yang travelMode-nya adalah TRANSIT. Nilai yang valid dijelaskan dalam Opsi Transportasi Umum, di bawah.
  • drivingOptions (opsional) menentukan nilai yang hanya berlaku untuk permintaan yang travelMode-nya 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 membagi rute menjadi dua rute.

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

  • optimizeWaypoints (opsional) menetapkan 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 bagian 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 memperlambat 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 didukung:

  • DRIVING (Default) menunjukkan rute mobil standar menggunakan jaringan jalan raya.
  • BICYCLING meminta rute sepeda melalui jalur bersepeda & 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 cakupan dukungan rute di sebuah negara. Jika Anda meminta rute untuk wilayah yang tidak memiliki jenis rute tersebut, 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 dalam DirectionsResult. Peringatan ini harus selalu ditampilkan kepada pengguna. Jika tidak menggunakan DirectionsRenderer default, Anda bertanggung jawab untuk memastikan peringatan ditampilkan.

Opsi Transportasi Umum

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

Rute transportasi umum sangat bergantung pada waktu. Rute hanya akan ditampilkan 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 dihitung akan mengutamakan perjalanan dengan bus.
    • RAIL menunjukkan bahwa rute yang dihitung akan mengutamakan perjalanan dengan kereta api, trem, LRT, dan kereta bawah tanah.
    • SUBWAY menunjukkan bahwa rute yang dihitung akan mengutamakan perjalanan dengan kereta bawah tanah.
    • TRAIN menunjukkan bahwa rute yang dihitung akan mengutamakan perjalanan dengan kereta api.
    • TRAM menunjukkan bahwa rute yang dihitung akan mengutamakan perjalanan dengan trem dan LRT.
  • routingPreference (opsional) menentukan preferensi untuk rute transportasi umum. Dengan opsi ini, Anda dapat memprioritaskan opsi yang ditampilkan, alih-alih menerima rute terbaik default yang ditentukan oleh API. Kolom ini hanya dapat ditetapkan jika permintaan berisi kunci API. Nilai-nilai berikut ini diizinkan:
    • FEWER_TRANSFERS menunjukkan bahwa rute yang dihitung akan mengutamakan jumlah transfer tertentu.
    • LESS_WALKING menunjukkan bahwa rute yang dihitung akan mengutamakan rute yang tidak memerlukan berjalan kaki terlalu jauh.

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 lampau. (API mengonversi semua tanggal ke UTC untuk memastikan penanganan yang konsisten di semua zona waktu.) Untuk pelanggan Paket Premium Google Maps Platform, jika Anda menyertakan departureTime dalam permintaan, API akan menampilkan rute terbaik berdasarkan perkiraan kondisi lalu lintas pada saat itu, dan menyertakan prediksi waktu tempuh (duration_in_traffic) dalam responsnya. Jika Anda tidak menentukan waktu keberangkatan (yaitu, jika permintaan tidak menyertakan drivingOptions), rute yang ditampilkan biasanya sudah akurat tanpa memperhitungkan kondisi lalu lintas.
  • trafficModel (opsional) menentukan asumsi yang akan digunakan saat menghitung waktu dalam lalu lintas. Setelan ini memengaruhi nilai yang ditampilkan di kolom duration_in_traffic dalam respons, yang berisi prediksi waktu lalu lintas berdasarkan rata-rata historis. Default-nya adalah bestguess. Nilai-nilai berikut ini diizinkan:
    • bestguess (default) menunjukkan bahwa duration_in_traffic yang ditampilkan akan berupa perkiraan waktu tempuh terbaik berdasarkan informasi historis kondisi lalu lintas dan lalu kondisi lintas yang sedang berlangsung. Lalu lintas langsung menjadi lebih penting jika departureTime semakin dekat ke waktu sekarang.
    • pessimistic menunjukkan bahwa duration_in_traffic yang ditampilkan biasanya akan lebih lama daripada waktu tempuh sesungguhnya, meskipun pada hari-hari tertentu dengan kondisi lalu lintas yang sangat padat dapat lebih lama dari nilai ini.
    • optimistic menunjukkan bahwa duration_in_traffic yang ditampilkan biasanya akan lebih singkat daripada waktu tempuh yang sesungguhnya, meskipun jika hari-hari tertentu dengan kondisi lalu lintas yang sangat lancar 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: 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 perjalanan balik 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 menampilkan hasil alamat yang dipengaruhi oleh domain (wilayah 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 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 hasil yang memuat http://maps.google.es/ (Spanyol).

Anda juga dapat menetapkan layanan Directions untuk menampilkan 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 dipetakan 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 menampilkan kode DirectionsResult dan DirectionsStatus dalam respons.

Status Kueri Rute

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 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 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 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 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 Anda teruskan ke objek DirectionsRenderer, yang otomatis dapat menangani tampilan hasil di peta.

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

  1. Buat objek DirectionsRenderer.
  2. Panggil setMap() di perender untuk mengikatnya ke peta yang diteruskan.
  3. Panggil setDirections() di perender, dengan meneruskan DirectionsResult seperti yang disebutkan di atas. Karena perender merupakan MVCObject, perender ini 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 berdasarkan nilai "start" dan "end" yang ditentukan dalam daftar dropdown. DirectionsRenderer menangani tampilan polyline di antara lokasi yang ditunjukkan, dan penempatan penanda di 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 isi 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-beda 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 isi 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. Tindakan ini juga memastikan 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 isi 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, masing-masing berisi detail tentang geocoding asal, tujuan, dan titik jalan.
  • routes[] berisi array objek DirectionsRoute. Setiap rute menunjukkan cara untuk pergi dari asal ke tujuan yang diberikan dalam DirectionsRequest. Umumnya, hanya satu rute yang ditampilkan untuk setiap permintaan yang diberikan, kecuali jika kolom provideRouteAlternatives dalam 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 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 dapat berisi nilai berikut.
    • "OK" menunjukkan bahwa tidak terjadi error; alamat berhasil diuraikan dan setidaknya satu geocode ditampilkan.
    • "ZERO_RESULTS" menunjukkan bahwa geocoding berhasil, tetapi ditampilkan tanpa hasil. Hal ini dapat terjadi jika address yang tidak ada diteruskan ke geocoder.

  • partial_match menunjukkan bahwa geocoder tidak menampilkan kecocokan persis untuk permintaan asli, meskipun jika geocoder dapat menampilkan kecocokan sebagian dengan alamat yang diminta. Sebaiknya Anda memeriksa permintaan asal untuk mengetahui keberadaan 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 ditampilkan jika sebuah permintaan memiliki kecocokan terhadap dua atau beberapa lokasi di daerah yang sama. Misalnya, "Hillpar St, Bristol, UK" akan menampilkan 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 ditampilkan. Array ini berisi serangkaian angka nol atau beberapa tag yang mengidentifikasi tipe fitur yang ditampilkan dalam hasil. Misalnya, geocode "Chicago" akan menampilkan "lokalitas" yang menunjukkan bahwa "Chicago" adalah kota, dan juga menampilkan "politik" yang menunjukkan bahwa ini adalah entitas politik.

Rute Directions

Catatan: Objek DirectionsTrip lama telah diganti namanya menjadi DirectionsRoute. Perhatikan bahwa 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. Selain itu, rute ini 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 yang ditentukan ini.
  • 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 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 untuk jarak, yang secara default ditampilkan dalam satuan seperti yang digunakan di 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 durasinya tidak diketahui.

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

    • Permintaan tidak berisi titik jalan persinggahan. Artinya, permintaan ini tidak menyertakan titik jalan yang stopover-nya 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 ditampilkan untuk rute transportasi 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, 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 antarlokasi menggunakan opsi transportasi terdekat (biasanya jalan) di titik awal dan akhir, start_location mungkin berbeda dari asal yang diberikan untuk segmen ini jika, misalnya, jalan tidak dekat dengan asal.
  • end_location berisi LatLng tujuan segmen ini. Karena DirectionsService menghitung rute antarlokasi menggunakan opsi transportasi terdekat (biasanya jalan) di titik awal dan akhir, end_location mungkin berbeda dari tujuan yang diberikan untuk segmen ini jika, misalnya, jalan tidak dekat dengan tujuan.
  • start_address berisi alamat yang dapat dibaca manusia (biasanya alamat jalan) untuk awal segmen ini.

    Konten ini ditujukan untuk dibaca apa adanya. Jangan mengurai alamat berformat secara terprogram.
  • end_address berisi alamat yang dapat dibaca manusia (biasanya alamat jalan) untuk 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, tetapi juga berisi informasi jarak dan durasi yang berkaitan dengan hubungan langkah ini dengan langkah berikutnya. Misalnya, langkah yang dinyatakan dengan "Bergabung ke I-80 Barat" dapat berisi durasi "37 mil" dan "40 menit", yang 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 Spesifik per 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[] adalah literal objek DirectionsStep yang berisi detail rute untuk langkah berjalan kaki 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 transportasi umum.

Informasi Spesifik per Transportasi Umum

Rute transportasi umum menampilkan informasi tambahan yang tidak relevan untuk moda transportasi lain. 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 Transportasi Umum

Objek TransitDetails mengekspos properti berikut:

  • arrival_stop berisi objek TransitStop yang mewakili halte/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 halte/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 perhentian 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. Biasanya nilainya adalah stasiun terakhir.
  • headway jika tersedia, akan menentukan perkiraan jumlah detik antarkeberangkatan 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 transportasi umum 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. Hanya menyertakan halte kedatangan. Misalnya, jika rute Anda menyertakan keberangkatan dari Perhentian A, yang melewati perhentian B dan C, dan kedatangan di perhentian D, num_stops akan menampilkan 3.

Jalur Transportasi Umum

Objek TransitLine mengekspos properti berikut:

  • name berisi nama lengkap jalur transportasi umum ini. Misalnya, "7 Avenue Express" atau "14th St Crosstown".
  • short_name berisi nama pendek jalur transportasi umum 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 transportasi umum 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 jenis 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 dalam papan informasi untuk 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 menampilkan jenis ini.

Memeriksa DirectionsResults

Komponen DirectionsResults — DirectionsRoute, 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 isi 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 disebutkan dalam DirectionsRequest, Anda juga dapat menentukan titik jalan (dengan jenis DirectionsWaypoint) saat menghitung rute menggunakan layanan Directions untuk rute jalan kaki, bersepeda, atau mobil. Titik jalan tidak tersedia untuk rute transportasi umum. Titik jalan memungkinkan Anda menghitung rute melalui lokasi tambahan, jika rute yang ditampilkan melalui titik jalan tertentu.

waypoint terdiri dari kolom berikut:

  • location (diperlukan) menentukan alamat titik jalan.
  • stopover (opsional) menunjukkan apakah titik jalan adalah perhentian sebenarnya di rute (true) atau hanya preferensi untuk rute melalui lokasi yang ditunjukkan (false). Persinggahan berupa true secara default.

Secara default, layanan Directions menghitung rute melalui titik jalan yang diberikan dalam urutan yang ditentukan. 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 penerapan dari permasalahan penjual keliling.) Waktu perjalanan adalah faktor utama yang dioptimalkan. Namun, faktor lain seperti jarak, jumlah belokan, dan sebagainya dapat diperhitungkan saat memutuskan rute yang paling efisien. Semua titik jalan harus merupakan persinggahan agar layanan Directions dapat mengoptimalkan rute.

Jika Anda menginstruksikan layanan Directions untuk mengoptimalkan urutan titik jalan, urutannya akan ditampilkan pada 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-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;
index.ts

JavaScript

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

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

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

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

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

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

      summaryPanel.innerHTML = "";

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

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

window.initMap = initMap;
index.js

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 menggunakan 25 titik jalan, ditambah asal dan tujuan.
  • Pelanggan Paket Premium Google Maps Platform diizinkan menggunakan 25 titik jalan, ditambah asal dan tujuan.
  • Titik jalan tidak didukung untuk rute transportasi umum.

Rute yang Dapat Ditarik

Pengguna dapat mengubah rute bersepeda, 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 di 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 rute 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 tersebut.

Karena rute yang dapat ditarik telah diubah dan dirender di 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;
index.ts

JavaScript

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

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

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

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

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

  if (!myroute) {
    return;
  }

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

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

window.initMap = initMap;
index.js
Lihat contoh

Mencoba Contoh