Anda sudah siap!

Untuk mulai mengembangkan, masuklah ke dokumentasi developer kami.

Aktifkan Google Maps JavaScript API

Untuk membantu Anda memulai, kami akan memandu Anda melalui Google Developers Console untuk melakukan beberapa hal terlebih dahulu:

  1. Buat atau pilih sebuah proyek
  2. Aktifkan Google Maps JavaScript API dan layanan terkait
  3. Buat kunci yang sesuai
Lanjutkan

Layanan Directions

Ringkasan

Anda bisa menghitung arah (menggunakan berbagai metode transportasi) dengan menggunakan objek DirectionsService. Objek ini berkomunikasi dengan Google Maps API Directions Service yang menerima permintaan arah dan mengembalikan hasil yang sudah dihitung. Anda juga bisa menangani hasil arah ini sendiri atau menggunakan objek DirectionsRenderer untuk merender hasilnya.

Saat menetapkan asal atau tujuan dalam permintaan arah, Anda bisa menetapkan string kueri (misalnya, "Chicago, IL" atau "Darwin, NSW, Australia"), nilai LatLng, atau objek google.maps.Place.

Layanan Directions bisa mengembalikan arah multi-bagian dengan menggunakan serangkaian titik jalan. Arah ditampilkan sebagai gambar polyline rute pada peta, atau juga sebagai serangkaian keterangan tekstual dalam elemen <div> (misalnya, "Belok kanan ke Williamsburg Bridge").

Memulai

Sebelum menggunakan layanan Directions di Google Maps JavaScript API, terlebih dahulu pastikan Google Maps Directions API telah diaktifkan di Google API Console, dalam proyek yang sama dengan yang Anda persiapkan untuk Google Maps JavaScript API.

Untuk menampilkan daftar API yang telah diaktifkan:

  1. Masuklah ke Google API Console.
  2. Klik tombol Select a project, kemudian pilih proyek yang sama dengan yang Anda persiapkan untuk Google Maps JavaScript API dan klik Open.
  3. Dari daftar API di Dashboard, cari Google Maps Directions API.
  4. Jika sudah melihat API di dalam daftar, artinya Anda sudah siap. Jika API tidak dicantumkan, aktifkan:
    1. Di bagian atas laman, pilih ENABLE API untuk menampilkan tab Library. Atau, dari menu sisi kiri, pilih Library.
    2. Telusuri Google Maps Directions API, kemudian pilih dari daftar hasil.
    3. Pilih ENABLE. Bila proses selesai, Google Maps Directions API akan muncul dalam daftar API di Dashboard.

Kebijakan dan batas penggunaan

Kuota

Batas penggunaan berikut ini berlaku untuk layanan Directions:

Penggunaan layanan Directions bersama Standard Plan

  • 2.500 permintaan per hari gratis, dihitung sebagai jumlah kueri sisi-klien dan sisi-server; aktifkan penagihan untuk mengakses kuota harian lebih tinggi, yang dikenakan sebesar $0,50 USD / 1000 permintaan tambahan, hingga 100.000 permintaan per hari.
  • Hingga 23 titik jalan per permintaan, ditambah asal dan tujuan.
  • 50 permintaan per detik, yang dihitung sebagai jumlah kueri sisi-klien dan sisi-server.

Penggunaan layanan Directions bersama Premium Plan

  • Kuota gratis harian bersama sebesar 100.000 permintaan per 24 jam; permintaan tambahan berlaku pada pembelian tahunan untuk Kredit Maps API.
  • Hingga 23 titik jalan diperbolehkan di setiap permintaan, ditambah asal dan tujuan.
  • Tanpa batas permintaan sisi-klien per detik, per proyek. Perhatikan, API sisi-server dibatasi 50 permintaan per detik.

Batas kecepatan berlaku per sesi pengguna, berapa pun banyaknya pengguna yang berbagi proyek yang sama.

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

Kebijakan

Penggunaan layanan Directions harus sesuai dengan kebijakan yang dijelaskan untuk Google Maps 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 rencana perjalanan sebagai sebuah larik routes[] yang terpisah.

Untuk menggunakan petunjuk arah di Google Maps JavaScript API, buat sebuah objek bertipe DirectionsService dan panggil DirectionsService.route() untuk memulai permintaan ke layanan Directions, berikan literal objek DirectionsRequest yang berisi istilah masukan dan metode callback untuk dieksekusi setelah menerima respons.

Literal objek DirectionsRequest berisi bidang-bidang 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,
  avoidHighways: Boolean,
  avoidTolls: Boolean,
  region: String
}

Bidang-bidang ini dijelaskan di bawah:

  • origin (diperlukan) menetapkan lokasi awal untuk menghitung arah. Nilai ini bisa ditetapkan sebagai String (misalnya, "Chicago, IL"), sebagai nilai LatLng atau sebagai objek google.maps.Place. Jika Anda menggunakan objek google.maps.Place, Anda bisa menetapkan sebuah place ID, string kueri atau lokasi LatLng. Anda bisa mengambil ID tempat dari layanan Geocoding, Place Search, dan Place Autocomplete di Google Maps JavaScript API. Untuk contoh menggunakan ID tempat dari Place Autocomplete, lihat Place Autocomplete dan Directions.
  • destination (diperlukan) menetapkan lokasi akhir untuk menghitung arah tujuan. Opsinya sama seperti bidang origin yang dijelaskan di atas.
  • travelMode (diperlukan) menetapkan moda transportasi yang akan digunakan saat menghitung arah. Nilai yang valid ditetapkan dalam Mode Perjalanan di bawah ini.
  • transitOptions (opsional) menetapkan nilai-nilai yang hanya berlaku untuk permintaan dengan travelMode berupa TRANSIT. Nilai yang valid dijelaskan dalam Opsi Angkutan Umum, di bawah ini.
  • drivingOptions (opsional) menetapkan nilai-nilai yang hanya berlaku untuk permintaan dengan travelMode berupa DRIVING. Nilai yang valid dijelaskan dalam Opsi Mengemudi, di bawah ini.
  • unitSystem (opsional) menetapkan sistem satuan yang akan digunakan saat menampilkan hasil. Nilai yang valid ditetapkan dalam Sistem Satuan di bawah ini.

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

    • location menetapkan lokasi titik jalan, sebagai LatLng, sebagai objek google.maps.Place atau sebagai String yang akan di-geocode.
    • stopover adalah boolean yang menunjukkan bahwa titik jalan adalah sebuah perhentian pada rute, yang memiliki efek membelah sebuah rute menjadi dua rute.

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

  • optimizeWaypoints (opsional) menetapkan rute menggunakan waypoints yang disediakan mungkin dapat dioptimalkan dengan menyusun ulang titik jalan dalam urutan yang lebih efisien. Jika true, maka layanan Directions akan mengembalikan waypoints yang sudah disusun ulang dalam bidang waypoint_order. (Untuk informasi selengkapnya, lihat Menggunakan Titik Jalan pada Rute di bawah ini.)
  • provideRouteAlternatives (opsional) bila disetel ke true akan menetapkan bahwa layanan Directions bisa memberikan lebih dari satu alternatif rute dalam responsnya. Perhatikan, memberikan alternatif rute bisa meningkatkan waktu respons dari server.
  • avoidHighways (opsional) bila disetel ke true menunjukkan bahwa rute yang telah dihitung harus menghindari jalan raya utama, jika memungkinkan.
  • avoidTolls (opsional) bila disetel ke true menunjukkan bahwa jalur yang telah dihitung harus menghindari jalan tol, jika memungkinkan.
  • region (opsional) menetapkan kode region, yang ditetapkan sebagai sebuah nilai yang berisi dua karakter ccTLD ("top-level domain"). (Untuk informasi selengkapnya, lihat Mencondongkan Region di bawah ini.)

Di bawah ini 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

Bila menghitung arah, Anda perlu menetapkan moda transportasi yang akan digunakan. Mode perjalanan berikut saat ini telah didukung:

  • DRIVING (Default) menunjukkan arah mengemudi standar yang menggunakan jaringan jalan raya.
  • BICYCLING meminta arah bersepeda melalui jalur sepeda & jalan yang disukai.
  • TRANSIT meminta arah melalui rute angkutan umum.
  • WALKING meminta arah berjalan melalui jalur pejalan kaki & trotoar.

Lihat cakupan data Google Maps untuk menentukan sejauh mana suatu negara mendukung arah. Jika Anda meminta arah untuk suatu region yang tidak tersedia tipe arahnya, respons akan mengembalikan DirectionsStatus="ZERO_RESULTS".

Arah berjalan mungkin tidak menyertakan jalur pejalan kaki yang jelas, sehingga arah berjalan akan mengembalikan peringatan dalam DirectionsResult yang harus Anda tampilkan jika Anda tidak menggunakan DirectionsRenderer default.

Opsi Angkutan Umum

Opsi yang tersedia untuk permintaan arah bervariasi antar mode perjalanan. Saat meminta arah angkutan umum, opsi avoidHighways, avoidTolls, waypoints[] dan optimizeWaypoints akan diabaikan. Anda bisa menetapkan opsi rute angkutan umum tertentu melalui literal objek TransitOptions.

Arah angkutan umum sesuai-waktu. Arah hanya akan dikembalikan untuk waktu yang akan datang.

Literal objek TransitOptions berisi bidang-bidang berikut:

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

Bidang-bidang ini dijelaskan di bawah:

  • arrivalTime (opsional) menetapkan waktu kedatangan yang diinginkan sebagai objek Date. Jika waktu kedatangan telah ditetapkan, waktu keberangkatan akan diabaikan.
  • departureTime (opsional) menetapkan waktu keberangkatan yang diinginkan sebagai objek Date. departureTime akan diabaikan jika arrivalTime telah ditetapkan. Default-nya adalah sekarang (yaitu, waktu saat ini) jika tidak ada nilai yang ditetapkan untuk departureTime atau arrivalTime.
  • modes[] (opsional) adalah larik yang berisi satu atau beberapa literal objek TransitMode. Bidang ini hanya bisa disertakan jika permintaan menyertakan kunci API. Setiap TransitMode menetapkan mode angkutan umum yang diutamakan. Nilai-nilai berikut ini diperbolehkan:
    • BUS menunjukkan rute yang sudah dihitung akan mengutamakan perjalanan dengan bus.
    • RAIL menunjukkan rute yang sudah dihitung akan mengutamakan perjalanan dengan kereta api, trem, kereta ringan, dan kereta bawah tanah.
    • SUBWAY menunjukkan rute yang sudah dihitung akan mengutamakan perjalanan dengan kereta bawah tanah.
    • TRAIN menunjukkan rute yang sudah dihitung akan mengutamakan perjalanan dengan kereta api.
    • TRAM menunjukkan rute yang sudah dihitung akan mengutamakan perjalanan dengan trem dan kereta ringan.
  • routingPreference (opsional) menetapkan preferensi untuk rute angkutan umum. Dengan menggunakan opsi ini, Anda dapat membias opsi yang dikembalikan, daripada menerima rute default terbaik yang dipilih oleh API. Bidang ini hanya dapat ditetapkan jika permintaan berisi kunci API. Nilai-nilai berikut ini diperbolehkan:
    • FEWER_TRANSFERS menunjukkan rute yang sudah dihitung akan mengutamakan jumlah ganti angkutan yang terbatas.
    • LESS_WALKING menunjukkan rute yang sudah dihitung akan mengutamakan jumlah berjalan kaki yang terbatas.

Contoh DirectionsRequest melalui angkutan 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 bisa menetapkan opsi rute untuk arah mengemudi melalui objek DrivingOptions. Anda harus memberikan ID klien Google Maps APIs Premium Plan saat memuat API jika ingin menyertakan bidang drivingOptions dalam DirectionsRequest.

Objek DrivingOptions berisi bidang-bidang berikut:

{
  departureTime: Date,
  trafficModel: TrafficModel
}

Bidang-bidang ini dijelaskan di bawah:

  • departureTime (diperlukan oleh literal objek drivingOptions agar valid) menetapkan waktu keberangkatan yang diinginkan sebagai objek Date. Nilainya harus disetel ke waktu saat ini atau ke waktu mendatang. Tidak boleh waktu yang sudah lewat. (API mengkonversi semua tanggal ke UTC untuk memastikan penanganan yang konsisten lintas zona waktu.) Untuk pelanggan Google Maps APIs Premium Plan, jika Anda menyertakan departureTime dalam permintaan, API akan mengembalikan rute terbaik berdasarkan kondisi lalu lintas yang diperkirakan pada saat itu, dan menyertakan perkiraan waktu lalu lintas (duration_in_traffic) dalam respons. Jika Anda tidak menetapkan waktu keberangkatan (yaitu, jika permintaan tidak menyertakan drivingOptions), rute yang dikembalikan adalah rute yang biasanya bagus tanpa memperhitungkan kondisi lalu lintas.
  • trafficModel (opsional) menetapkan asumsi yang akan digunakan saat menghitung waktu dalam lalu lintas. Setelan ini memengaruhi nilai yang dikembalikan di bidang duration_in_traffic dalam respons, yang berisi prediksi waktu dalam lalu lintas berdasarkan rata-rata historis. Default-nya adalah bestguess. Nilai-nilai berikut ini diperbolehkan:
    • bestguess (default) menunjukkan duration_in_traffic yang dikembalikan harus berupa perkiraan waktu tempuh terbaik berdasarkan informasi riwayat kondisi lalu lintas dan lalu lintas saat ini. Lalu lintas saat ini menjadi kian penting bila departure_time semakin dekat ke waktu sekarang.
    • optimistic menunjukkan duration_in_traffic yang dikembalikan lebih lama dari waktu tempuh sesungguhnya di hari-hari biasa, meskipun hari-hari tertentu dengan kondisi lalu lintas yang buruk mungkin melebihi nilai ini.
    • optimistic menunjukkan duration_in_traffic yang dikembalikan harus lebih singkat dari waktu tempuh sesungguhnya di hari biasa, meskipun hari-hari tertentu dengan kondisi lalu lintas yang baik bisa lebih cepat dari nilai ini.

Di bawah ini adalah contoh DirectionsRequest untuk arah mengemudi:

{
  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, arah dihitung dan ditampilkan menggunakan sistem satuan pada negara atau region asal. (Catatan: daerah asal yang dinyatakan dengan koordinat garis lintang/garis bujur, bukannya alamat, selalu diatur ke satuan 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 bisa mengesampingkan sistem satuan ini dengan menyetelnya secara eksplisit dalam permintaan menggunakan salah satu nilai UnitSystem berikut:

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

Catatan: setelan sistem satuan ini hanya memengaruhi teks yang ditampilkan kepada pengguna. Hasil arah juga berisi nilai jarak, yang tidak ditampilkan kepada pengguna, yang selalu dinyatakan dalam meter.

Mencondongkan Region untuk Arah

Google Maps API Directions Service mengembalikan hasil alamat yang dipengaruhi oleh domain (region atau negara) yang menjadi tempat asal Anda memuat bootstrap JavaScript. (Karena sebagian besar pengguna memuat https://maps.google.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" mungkin mengembalikan hasil yang berbeda antara aplikasi yang memuat https://maps.google.com/ (Amerika Serikat) dengan aplikasi lain yang memuat http://maps.google.es/ (Spanyol).

Anda juga bisa menyetel layanan Directions untuk mengembalikan hasil yang dicondongkan ke region tertentu menggunakan parameter region. Parameter ini mengambil kode region, yang ditetapkan sebagai subtag region bahasa IANA. Umumnya, tag-tag ini memetakan langsung ke nilai yang berisi dua karakter ccTLD ("top-level domain"), seperti "uk" dalam "co.uk" misalnya. Dalam beberapa kasus, tag region juga mendukung kode ISO-3166-1, yang kadang-kadang berbeda dari nilai ccTLD (misalnya "GB" untuk "Great Britain").

Lihat cakupan data Google Maps untuk menentukan sejauh mana suatu negara mendukung arah.

Merender Arah

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

Status Kueri Arah

DirectionsStatus mungkin mengembalikan nilai-nilai berikut:

  • OK menunjukkan respons berisi DirectionsResult yang valid.
  • NOT_FOUND menunjukkan setidaknya salah satu lokasi yang ditetapkan dalam asal, tujuan, atau titik jalan suatu permintaan tidak bisa dibuat kode geografisnya.
  • ZERO_RESULTS menunjukkan tidak ada rute yang bisa ditemukan antara tempat asal dan tujuan.
  • MAX_WAYPOINTS_EXCEEDED menunjukkan terlalu banyak bidang DirectionsWaypoint yang disediakan dalam DirectionsRequest. Lihat bagian di bawah ini mengenai batas untuk titik jalan.
  • INVALID_REQUEST menunjukkan DirectionsRequest yang diberikan tidak valid. Penyebab paling umum dari kode kesalahan ini adalah permintaan yang tidak berisi tempat asal atau tujuan, atau permintaan angkutan umum yang menyertakan titik jalan.
  • OVER_QUERY_LIMIT menunjukkan laman web mengirimkan terlalu banyak permintaan dalam jangka waktu yang diperbolehkan.
  • REQUEST_DENIED menunjukkan laman web tidak boleh menggunakan layanan Directions.
  • "UNKNOWN_ERROR" menunjukkan permintaan arah tidak bisa diproses karena kesalahan server. Permintaan mungkin berhasil jika Anda mencoba lagi.

Anda harus memastikan bahwa kueri arah mengembalikan hasil yang valid dengan memeriksa nilainya sebelum memproses hasilnya.

Menampilkan DirectionsResult

DirectionsResult berisi hasil kueri arah, yang bisa Anda tangani sendiri, atau meneruskannya ke objek DirectionsRenderer, yang secara otomatis bisa menangani tampilan hasil pada peta.

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

  1. Buat objek DirectionsRenderer.
  2. Panggil setMap() pada renderer untuk mengikatnya ke peta yang diteruskan.
  3. Panggil setDirections() pada renderer, dengan meneruskan DirectionsResult padanya sebagaimana disebutkan di atas. Karena renderer adalah sebuah MVCObject, maka secara otomatis akan mendeteksi perubahan pada propertinya dan memperbarui peta bila arah yang dikaitkan dengannya berubah.

Contoh berikut menghitung arah antara dua lokasi di Route 66, yang asal dan tujuannya telah disetel melalui nilai "start" dan "end" yang diberikan dalam daftar tarik-turun. DirectionsRenderer menangani tampilan polyline di antara lokasi yang ditunjukkan, dan penempatan marker pada tempat asal, tujuan, dan titik jalan, jika memungkinkan.

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    center: chicago
  }
  map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsDisplay.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') {
      directionsDisplay.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>

Tampilkan contoh (directions-simple.html)

Contoh berikut menampilkan arah menggunakan mode perjalanan yang berbeda antara Haight-Ashbury ke Ocean Beach di San Francisco, CA:

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var haight = new google.maps.LatLng(37.7699298, -122.4469157);
var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205);

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var mapOptions = {
    zoom: 14,
    center: haight
  }
  map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsDisplay.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') {
      directionsDisplay.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>

Tampilkan contoh (directions-travel-modes.html)

Sebuah DirectionsRenderer tidak hanya menangani tampilan polyline dan marker terkait, juga bisa menangani tampilan tekstual arah berupa serangkaian langkah. Caranya, cukup panggil setPanel() pada DirectionsRenderer Anda, dengan meneruskan <div> padanya untuk menampilkan informasi ini. Hal itu juga memastikan bahwa Anda menampilkan informasi hak cipta yang sesuai, dan peringatan yang mungkin telah dikaitkan dengan hasilnya.

Arah tekstual akan diberikan menggunakan setelan bahasa yang disukai pada browser, atau bahasa yang ditetapkan saat memuat API JavaScript menggunakan parameter language. (Untuk informasi selengkapnya, lihat Pelokalan.) Dalam hal arah angkutan umum, waktu akan ditampilkan dalam zona waktu tempat angkutan umum tersebut.

Contoh berikut serupa dengan yang ditampilkan di atas, namun menyertakan panel <div> untuk menampilkan arah:

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);
  var mapOptions = {
    zoom:7,
    center: chicago
  }
  map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsDisplay.setMap(map);
  directionsDisplay.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') {
      directionsDisplay.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>

Tampilkan contoh (directions-panel.html)

Objek DirectionsResult

Saat mengirim permintaan arah ke DirectionsService, Anda akan menerima respons yang terdiri dari kode status, dan hasil, yang merupakan objek DirectionsResult. DirectionsResult adalah sebuah literal objek dengan bidang-bidang berikut:

  • geocoded_waypoints[] berisi larik objek DirectionsGeocodedWaypoint, masing-masing berisi detail tentang geocoding tempat asal, tujuan dan titik jalan.
  • routes[] berisi larik objek DirectionsRoute. Setiap rute menunjukkan cara transportasi dari tempat asal ke tujuan yang diberikan dalam DirectionsRequest. Biasanya, hanya satu rute yang dikembalikan untuk setiap permintaan yang diberikan, kecuali jika bidang permintaan provideRouteAlternatives disetel ke true, yang akan menjadi tempat mengembalikan beberapa rute sekaligus.

Titik Jalan Hasil Geocoding Arah

Geocoded_waypoints[] berisi detail tentang geocoding tempat asal, tujuan, dan titik jalan.

DirectionsGeocodedWaypoint adalah literal objek dengan bidang-bidang berikut:

  • geocoder_status menunjukkan kode status yang dihasilkan dari operasi geocoding. Bidang ini bisa berisi nilai berikut:
    • "OK" menunjukkan tidak terjadi kesalahan; alamat berhasil di-parse dan setidaknya satu geocode dikembalikan.
    • ZERO_RESULTS menunjukkan geocode berhasil namun tidak mengembalikan hasil. Ini bisa terjadi jika geocoder meneruskan address yang tidak ada.
  • partial_match menunjukkan geocoder tidak mengembalikan hasil yang benar-benar cocok dengan permintaan asal, 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 bila sebuah permintaan memiliki kecocokan terhadap dua atau beberapa lokasi di daerah yang sama. Misalnya, "21 Henr St, Bristol, UK" akan mengembalikan kecocokan parsial 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 identifier unik suatu tempat, yang bisa digunakan bersama Google API lainnya. Misalnya, Anda bisa menggunakan place_id bersama pustaka Google Places API untuk mendapatkan detail bisnis setempat, seperti nomor telepon, jam buka, ulasan pengguna, dan lainnya. Lihat ringkasan ID tempat.
  • types[] adalah larik yang menunjukkan tipe hasil yang dikembalikan. Larik ini berisi nol atau beberapa tag yang mengidentifikasi tipe fitur yang dikembalikan dalam hasil. Misalnya, geocode "Chicago" akan mengembalikan "locality" yang menunjukkan "Chicago" adalah kota, juga mengembalikan "political" yang menunjukkan Chicago adalah entitas politik.

Rute Directions

Objek DirectionsTrip lawas 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 bisa terdiri dari satu atau beberapa bagian (tipe DirectionsLeg) bergantung apakah titik jalan telah 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 bidang-bidang berikut:

  • legs[] berisi larik objek DirectionsLeg, yang masing-masing berisi informasi tentang bagian rute, antara dua lokasi dalam rute yang diberikan. Segmen terpisah akan ditampilkan untuk setiap titik jalan atau tujuan yang ditetapkan. (Sebuah rute tanpa titik jalan akan berisi tepat satu DirectionsLeg.) Setiap bagian terdiri dari serangkaian DirectionStep.
  • waypoint_order berisi sebuah larik yang menunjukkan urutan setiap titik jalan dalam rute yang dihitung. Larik ini mungkin berisi perintah yang telah diubah jika DirectionsRequest telah diteruskan optimizeWaypoints: true.
  • overview_path berisi larik LatLng yang menyatakan perkiraan jalur (dihaluskan) arah yang dihasilkan.
  • overview_polyline berisi objek points tunggal yang memegang representasi rute polyline yang dienkode. Polyline adalah perkiraan jalur (dihaluskan) arah yang dihasilkan.
  • bounds berisi LatLngBounds yang menunjukkan batas-batas polyline di sepanjang rute yang diberikan.
  • copyrights berisi teks hak cipta yang akan ditampilkan untuk rute ini.
  • warnings[] berisi sebuah larik peringatan yang akan ditampilkan saat menampilkan arah ini. Jika tidak menggunakan objek DirectionsRenderer yang disediakan, Anda harus mengelola dan menampilkan sendiri peringatan ini.
  • fare berisi total tarif (yaitu, total biaya tiket) untuk rute ini. Properti ini hanya dikembalikan untuk permintaan angkutan umum dan hanya untuk rute yang informasi tarifnya tersedia untuk semua segmen angkutan umum. Informasi ini menyertakan:
    • currency: Sebuah kode mata uang ISO 4217 menunjukkan mata uang yang digunakan dalam menyatakan jumlahnya.
    • value: Jumlah total tarif, dalam mata uang yang ditetapkan di atas.

Segmen Arah

Objek DirectionsRoute lawas telah diganti namanya menjadi DirectionsLeg.

DirectionsLeg mendefinisikan segmen tunggal perjalanan dari tempat asal ke tujuan dalam rute yang dihitung. Untuk rute yang tidak berisi titik jalan, rute akan terdiri dari satu "segmen", namun 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 bidang-bidang berikut:

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

    • value menunjukkan jarak dalam meter
    • text berisi representasi string dari jarak, yang secara default ditampilkan dalam satuan yang digunakan pada tempat asal. (Misalnya, satuan mil akan digunakan untuk tempat asal di Amerika Serikat.) Anda bisa mengesampingkan sistem satuan ini dengan menyetel secara khusus UnitSystem dalam kueri asal. Perhatikan, apa pun sistem satuan yang Anda gunakan, bidang distance.value selalu berisi nilai yang dinyatakan dalam meter.

    Bidang ini mungkin tidak didefinisikan jika jaraknya tidak diketahui.

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

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

    Bidang ini mungkin tidak didefinisikan jika durasi tidak diketahui.

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

    • Permintaan menyertakan ID klien Google Maps APIs Premium Plan yang valid.
    • Permintaan tidak berisi titik jalan persinggahan. Yakni, tidak menyertakan titik jalan dengan stopover berupa true.
    • Permintaan ini khusus untuk arah mengemudi— mode disetel ke driving.
    • departureTime disertakan sebagai bagian dari bidang drivingOptions dalam permintaan.
    • Kondisi lalu lintas tersedia untuk rute yang diminta.

    duration_in_traffic berisi bidang-bidang berikut:

    • value menunjukkan durasi dalam detik.
    • text berisi representasi durasi yang bisa dibaca orang.
  • arrival_time berisi perkiraan waktu kedatangan untuk segmen ini. Properti ini hanya dikembalikan untuk arah angkutan umum. Hasilnya dikembalikan sebagai objek Time dengan tiga properti:
    • value waktu yang ditetapkan sebagai objek JavaScript Date.
    • text waktu yang ditetapkan sebagai string. Waktu ditampilkan dalam zona waktu halte angkutan umum.
    • time_zone berisi zona waktu stasiun ini. Nilainya adalah nama zona waktu sebagaimana 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 arah angkutan umum.
  • start_location berisi LatLng dari tempat asal segmen ini. Karena Directions Web Service menghitung arah antar lokasi dengan menggunakan opsi transportasi terdekat (biasanya sebuah jalan) pada titik awal dan titik akhir, start_location mungkin berbeda dari tempat asal yang diberikan segmen ini jika, misalnya, jalan tidak dekat dengan tempat asal.
  • end_location berisi LatLng dari tujuan segmen ini. Karena DirectionsService menghitung arah antar lokasi dengan menggunakan opsi transportasi terdekat (biasanya sebuah jalan) pada titik awal dan titik akhir, end_location mungkin berbeda dari tempat tujuan yang diberikan segmen ini jika, misalnya, jalan tidak dekat dengan tempat tujuan.
  • start_address berisi alamat yang bisa dibaca orang (biasanya alamat jalan) dari awal segmen ini.
  • end_address berisi alamat yang bisa dibaca orang (biasanya alamat jalan) dari akhir segmen ini.

Langkah Arah

DirectionsStep adalah satuan terkecil dari rute arah, berisi langkah tunggal yang menjelaskan, satu petunjuk tertentu pada perjalanan. Mis. "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 arah angkutan umum, larik langkah akan menyertakan Informasi Angkutan Umum Spesifik tambahan dalam bentuk objek transit. Jika arah menyertakan beberapa moda transportasi, arah detail akan diberikan untuk langkah-langkah berjalan atau mengemudi dalam larik steps[]. Misalnya, langkah berjalan kaki akan menyertakan arah dari lokasi awal sampai akhir: "Berjalan ke Innes Ave & Fitch St". Langkah tersebut akan menyertakan detail arah berjalan kaki untuk rute itu dalam larik steps[], seperti: "Menuju ke barat laut", "Belok kiri ke Arelious Walker", dan "Belok kiri ke Innes Ave".

DirectionsStep adalah literal objek dengan bidang-bidang 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 keterangan dalam DirectionsLeg di atas.) Bidang ini mungkin tidak didefinisikan jika jarak tidak diketahui.
  • duration berisi perkiraan waktu yang diperlukan untuk melakukan langkah, hingga langkah berikutnya, sebagai objek Duration. (Lihat keterangan dalam DirectionsLeg di atas.) Bidang 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 objek points tunggal yang menyimpan representasi langkah polyline yang dienkode. Polyline ini adalah perkiraan jalur (dihaluskan) langkah tersebut.
  • steps[] literal objek DirectionsStep yang berisi arah detail untuk langkah berjalan kaki atau mengemudi dalam arah angkutan umum. Sub-langkah hanya tersedia untuk arah angkutan umum.
  • travel_mode berisi TravelMode yang digunakan dalam langkah ini. Arah angkutan umum mungkin menyertakan kombinasi arah berjalan kaki dan angkutan umum.
  • path berisi larik LatLngs yang menjelaskan arah langkah ini.
  • angkutan umum berisi informasi spesifik angkutan umum, seperti waktu kedatangan dan waktu keberangkatan, dan nama jalur angkutan umum.

Informasi Spesifik Angkutan Umum

Arah angkutan 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 bisa mengakses informasi tambahan untuk objek TransitStop, TransitLine, TransitAgency, dan VehicleType seperti dijelaskan di bawah ini.

Detail Angkutan Umum

Objek TransitDetails mengekspos properti berikut:

  • arrival_stop berisi objek TransitStop yang menyatakan stasiun/halte kedatangan dengan properti berikut:
    • name nama stasiun/halte angkutan umum, misalnya "Union Square".
    • location lokasi stasiun/halte angkutan umum, dinyatakan sebagai LatLng.
  • departure_stop berisi objek TransitStop yang menyatakan stasiun/halte keberangkatan.
  • arrival_time berisi waktu kedatangan, ditetapkan sebagai objek Time dengan tiga properti:
    • value waktu yang ditetapkan sebagai objek JavaScript Date.
    • text waktu yang ditetapkan sebagai string. Waktu ditampilkan dalam zona waktu halte angkutan umum.
    • time_zone berisi zona waktu stasiun ini. Nilainya adalah nama zona waktu sebagaimana didefinisikan dalam Database Zona Waktu IANA, misalnya "America/New_York".
  • departure_time berisi waktu keberangkatan, ditetapkan sebagai objek Time.
  • headsign menetapkan arah melakukan perjalanan pada jalur ini, sebagaimana ditandai pada kendaraan atau pada halte keberangkatan. Ini sering kali akan berupa stasiun terakhir.
  • headway bila tersedia, menetapkan perkiraan jumlah detik antar keberangkatan dari halte yang sama pada saat ini. Misalnya, dengan nilai headway 600, berarti Anda memperkirakan menunggu selama sepuluh menit jika ketinggalan bus.
  • line berisi literal objek TransitLine yang berisi informasi tentang jalur angkutan umum yang digunakan dalam langkah ini. TransitLine memberikan nama dan operator jalur tersebut, bersama properti lainnya yang dijelaskan dalam dokumentasi referensi TransitLine.
  • num_stops berisi jumlah halte di langkah ini. Menyertakan halte kedatangan, namun bukan halte keberangkatan. Misalnya, jika arah Anda melibatkan berangkat dari Halte A, melewati halte B dan C, dan tiba di halte D, num_stops akan mengembalikan 3.

Jalur Angkutan Umum

Objek TransitLine mengekspos properti berikut:

  • name berisi nama lengkap jalur angkutan umum ini, misalnya "7 Avenue Express" atau "14th St Crosstown".
  • short_name berisi nama singkat jalur angkutan umum ini. Biasanya berupa nomor jalur, seperti "2" atau "M14".
  • agencies berisi larik tipe TransitAgency. Setiap objek TransitAgency memberikan informasi tentang operator jalur ini, termasuk properti berikut:
    • name berisi nama agen angkutan umum.
    • url berisi alamat URL agen angkutan umum.
    • phone berisi nomor telepon agen angkutan umum.

    Jika Anda merender arah angkutan umum secara manual sebagai ganti menggunakan objek DirectionsRenderer, Anda harus menampilkan nama dan alamat URL agen angkutan umum yang melayani perjalanan tersebut.

  • url berisi URL untuk jalur angkutan umum ini seperti yang diberikan oleh agen angkutan umum.
  • icon berisi URL untuk ikon yang dikaitkan dengan jalur ini. Kebanyakan kota akan menggunakan ikon generik yang bervariasi sesuai dengan tipe kendaraan. Beberapa jalur angkutan umum, seperti sistem kereta bawah tanah New York, memiliki ikon khusus untuk jalur tersebut.
  • color berisi warna yang biasa digunakan dalam papan informasi untuk angkutan umum ini. Warna akan ditetapkan sebagai string heksadesimal seperti: #FF0033.
  • text_color berisi warna teks yang umum 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 "Kereta bawah tanah".
    • type berisi tipe kendaraan yang digunakan pada jalur ini. Lihat dokumentasi Tipe Kendaraan untuk daftar lengkap nilai yang didukung.
    • icon berisi URL untuk ikon yang umumnya dikaitkan dengan tipe kendaraan ini.
    • local_icon berisi URL untuk ikon yang dikaitkan dengan tipe kendaraan ini, berdasarkan rambu-rambu lalu lintas setempat.

Tipe Kendaraan

Objek VehicleType mengekspos properti berikut:

Nilai Definisi
VehicleType.RAIL Kereta api.
VehicleType.METRO_RAIL Angkutan umum kereta ringan.
VehicleType.SUBWAY Kereta ringan bawah tanah.
VehicleType.TRAM Kereta ringan permukaan.
VehicleType.MONORAIL Monorel.
VehicleType.HEAVY_RAIL Kereta berat.
VehicleType.COMMUTER_TRAIN Kereta pelaju.
VehicleType.HIGH_SPEED_TRAIN Kereta kecepatan tinggi.
VehicleType.BUS Bus.
VehicleType.INTERCITY_BUS Bus antarkota.
VehicleType.TROLLEYBUS Trolleybus.
VehicleType.SHARE_TAXI 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 tipe 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 tipe ini.

Memeriksa DirectionsResults

Komponen DirectionsResultsDirectionsRoute, DirectionsLeg, DirectionsStep dan TransitDetails — bisa diperiksa dan digunakan saat mem-parse respons arah.

Penting: Jika Anda merender arah angkutan umum secara manual sebagai ganti menggunakan objek DirectionsRenderer, Anda harus menampilkan nama dan alamat URL agen angkutan umum yang melayani perjalanan tersebut.

Contoh berikut merencanakan arah berjalan ke tempat wisata tertentu di Kota New York. Kita memeriksa DirectionsStep rute tersebut untuk menambahkan marker bagi setiap langkah, dan melekatkan informasi ke InfoWindow bersama teks petunjuk untuk langkah itu.

Karena kita menghitung arah berjalan, kita juga menampilkan peringatan kepada pengguna dalam panel <div> terpisah.

var map;
var directionsDisplay;
var directionsService;
var stepDisplay;
var markerArray = [];

function initialize() {
  // 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
  }
  directionsDisplay = 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 + "";
      directionsDisplay.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>

Tampilkan contoh (directions-complex.html)

Menggunakan Titik Jalan dalam Rute

Seperti disebutkan dalam DirectionsRequest, Anda juga bisa menetapkan titik jalan (tipe DirectionsWaypoint) saat menghitung rute menggunakan layanan Directions untuk arah berjalan kaki, bersepeda atau mengemudi. Titik jalan tidak tersedia untuk arah angkutan umum. Titik jalan memungkinkan Anda menghitung rute melalui lokasi tambahan, jika rute yang dikembalikan melalui titik jalan yang diberikan.

Sebuah waypoint terdiri dari bidang-bidang berikut:

  • location (diperlukan) menetapkan alamat titik jalan.
  • stopover (opsional) menunjukkan apakah titik jalan ini adalah halte sebenarnya pada rute tersebut (true) atau hanya preferensi untuk dilewati hingga 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 bisa meneruskan optimizeWaypoints: true dalam DirectionsRequest untuk memungkinkan layanan Directions mengoptimalkan rute yang disediakan dengan menata ulang titik jalan dalam urutan yang lebih efisien. (Optimalisasi ini merupakan aplikasi dari masalah salesman yang sedang 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 rutenya.

Jika Anda memerintahkan layanan Directions untuk mengoptimalkan urutan titik jalan, maka urutannya akan dikembalikan dalam bidang 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-Klik saat memilih item dalam daftar.) Perhatikan, kita memeriksa routes.start_address dan routes.end_address agar memberi kita teks untuk titik awal dan titik akhir setiap rute.

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

  document.getElementById('submit').addEventListener('click', function() {
    calculateAndDisplayRoute(directionsService, directionsDisplay);
  });
}

function calculateAndDisplayRoute(directionsService, directionsDisplay) {
  var waypts = [];
  var checkboxArray = document.getElementById('waypoints');
  for (var 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: 'DRIVING'
  }, function(response, status) {
    if (status === 'OK') {
      directionsDisplay.setDirections(response);
      var route = response.routes[0];
      var summaryPanel = document.getElementById('directions-panel');
      summaryPanel.innerHTML = '';
      // For each route, display summary information.
      for (var i = 0; i < route.legs.length; i++) {
        var 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>';
      }
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}
<div id="map"></div>
<div id="right-panel">
<div>
<b>Start:</b>
<select id="start">
  <option value="Halifax, NS">Halifax, NS</option>
  <option value="Boston, MA">Boston, MA</option>
  <option value="New York, NY">New York, NY</option>
  <option value="Miami, FL">Miami, FL</option>
</select>
<br>
<b>Waypoints:</b> <br>
<i>(Ctrl+Click or Cmd+Click for multiple selection)</i> <br>
<select multiple id="waypoints">
  <option value="montreal, quebec">Montreal, QBC</option>
  <option value="toronto, ont">Toronto, ONT</option>
  <option value="chicago, il">Chicago</option>
  <option value="winnipeg, mb">Winnipeg</option>
  <option value="fargo, nd">Fargo</option>
  <option value="calgary, ab">Calgary</option>
  <option value="spokane, wa">Spokane</option>
</select>
<br>
<b>End:</b>
<select id="end">
  <option value="Vancouver, BC">Vancouver, BC</option>
  <option value="Seattle, WA">Seattle, WA</option>
  <option value="San Francisco, CA">San Francisco, CA</option>
  <option value="Los Angeles, CA">Los Angeles, CA</option>
</select>
<br>
  <input type="submit" id="submit">
</div>
<div id="directions-panel"></div>
</div>
#right-panel {
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

#right-panel select, #right-panel input {
  font-size: 15px;
}

#right-panel select {
  width: 100%;
}

#right-panel i {
  font-size: 12px;
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
  float: left;
  width: 70%;
  height: 100%;
}
#right-panel {
  margin: 20px;
  border-width: 2px;
  width: 20%;
  height: 400px;
  float: left;
  text-align: left;
  padding-top: 0;
}
#directions-panel {
  margin-top: 10px;
  background-color: #FFEE77;
  padding: 10px;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
function initMap() {
  var directionsService = new google.maps.DirectionsService;
  var directionsDisplay = new google.maps.DirectionsRenderer;
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {lat: 41.85, lng: -87.65}
  });
  directionsDisplay.setMap(map);

  document.getElementById('submit').addEventListener('click', function() {
    calculateAndDisplayRoute(directionsService, directionsDisplay);
  });
}

function calculateAndDisplayRoute(directionsService, directionsDisplay) {
  var waypts = [];
  var checkboxArray = document.getElementById('waypoints');
  for (var 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: 'DRIVING'
  }, function(response, status) {
    if (status === 'OK') {
      directionsDisplay.setDirections(response);
      var route = response.routes[0];
      var summaryPanel = document.getElementById('directions-panel');
      summaryPanel.innerHTML = '';
      // For each route, display summary information.
      for (var i = 0; i < route.legs.length; i++) {
        var 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>';
      }
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}

Tampilkan contoh (directions-waypoints.html)

Batas dan Pembatasan untuk Titik Jalan

Batas penggunaan dan pembatasan berikut berlaku:

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

Arah yang Bisa Diseret

Pengguna bisa memodifikasi arah bersepeda, berjalan atau mengemudi yang ditampilkan menggunakan DirectionsRenderer secara dinamis jika bisa diseret, sehingga memungkinkan pengguna memilih dan mengubah rute dengan mengeklik dan menyeret jalur yang dihasilkan pada peta. Tentukan apakah tampilan renderer memungkinkan arah bisa diseret dengan menyetel properti draggable ke true. Arah angkutan umum tidak bisa dibuat agar bisa diseret.

Bila arah bisa diseret, pengguna bisa memilih titik di jalur (atau titik jalan) pada hasil yang dirender dan memindahkan komponen yang dipilih ke lokasi baru. DirectionsRenderer secara dinamis akan diperbarui untuk menampilkan jalur yang dimodifikasi. Saat dirilis, titik jalan transisi akan ditambahkan ke peta (ditandai dengan marker putih kecil). Memilih dan memindahkan segmen jalur akan mengubah segmen rute tersebut, sedangkan memilih dan memindahkan marker titik jalan (termasuk titik awal dan titik akhir) akan mengubah segmen rute yang melewati titik jalan itu.

Karena arah yang bisa diseret dimodifikasi dan dirender di client-side, Anda mungkin perlu memantau dan menangani kejadian directions_changed pada DirectionsRenderer agar diberi tahu bila pengguna telah memodifikasi petunjuk arah yang ditampilkan.

Kode berikut menampilkan perjalanan dari Perth di pesisir barat Australia ke Sydney di pesisir timur. Kode ini memantau kejadian directions_changed untuk memperbarui total jarak dari semua segmen perjalanan.

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

  var directionsService = new google.maps.DirectionsService;
  var directionsDisplay = new google.maps.DirectionsRenderer({
    draggable: true,
    map: map,
    panel: document.getElementById('right-panel')
  });

  directionsDisplay.addListener('directions_changed', function() {
    computeTotalDistance(directionsDisplay.getDirections());
  });

  displayRoute('Perth, WA', 'Sydney, NSW', directionsService,
      directionsDisplay);
}

function displayRoute(origin, destination, service, display) {
  service.route({
    origin: origin,
    destination: destination,
    waypoints: [{location: 'Adelaide, SA'}, {location: 'Broken Hill, NSW'}],
    travelMode: 'DRIVING',
    avoidTolls: true
  }, function(response, status) {
    if (status === 'OK') {
      display.setDirections(response);
    } else {
      alert('Could not display directions due to: ' + status);
    }
  });
}

function computeTotalDistance(result) {
  var total = 0;
  var myroute = result.routes[0];
  for (var i = 0; i < myroute.legs.length; i++) {
    total += myroute.legs[i].distance.value;
  }
  total = total / 1000;
  document.getElementById('total').innerHTML = total + ' km';
}
<div id="map"></div>
<div id="right-panel">
  <p>Total Distance: <span id="total"></span></p>
</div>
#right-panel {
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

#right-panel select, #right-panel input {
  font-size: 15px;
}

#right-panel select {
  width: 100%;
}

#right-panel i {
  font-size: 12px;
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
  float: left;
  width: 63%;
  height: 100%;
}
#right-panel {
  float: right;
  width: 34%;
  height: 100%;
}
.panel {
  height: 100%;
  overflow: auto;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -24.345, lng: 134.46}  // Australia.
  });

  var directionsService = new google.maps.DirectionsService;
  var directionsDisplay = new google.maps.DirectionsRenderer({
    draggable: true,
    map: map,
    panel: document.getElementById('right-panel')
  });

  directionsDisplay.addListener('directions_changed', function() {
    computeTotalDistance(directionsDisplay.getDirections());
  });

  displayRoute('Perth, WA', 'Sydney, NSW', directionsService,
      directionsDisplay);
}

function displayRoute(origin, destination, service, display) {
  service.route({
    origin: origin,
    destination: destination,
    waypoints: [{location: 'Adelaide, SA'}, {location: 'Broken Hill, NSW'}],
    travelMode: 'DRIVING',
    avoidTolls: true
  }, function(response, status) {
    if (status === 'OK') {
      display.setDirections(response);
    } else {
      alert('Could not display directions due to: ' + status);
    }
  });
}

function computeTotalDistance(result) {
  var total = 0;
  var myroute = result.routes[0];
  for (var i = 0; i < myroute.legs.length; i++) {
    total += myroute.legs[i].distance.value;
  }
  total = total / 1000;
  document.getElementById('total').innerHTML = total + ' km';
}

Tampilkan contoh (directions-draggable.html)

Kirim masukan tentang...

Google Maps JavaScript API
Google Maps JavaScript API
Butuh bantuan? Kunjungi halaman dukungan kami.