Tips untuk menciptakan pengalaman pengguna terbaik saat menavigasi ke lokasi dengan mobil

Dokumen ini adalah pembaruan untuk artikel lama yang menggunakan versi GMP API sebelumnya. Konten ini diperbarui ke versi baru Places API yang diluncurkan pada 2023-24 dan Routes API yang diluncurkan pada tahun 2023.

Biasanya, saat pengguna berkendara ke tempat menarik (POI), mereka sebenarnya memerlukan navigasi ke lokasi terdekat seperti tempat parkir atau titik akses. Bayangkan pengemudi yang perlu pergi ke bandara atau pusat perbelanjaan. Saat pergi ke bandara, pengemudi mencoba mencapai terminal atau titik pengantaran, bukan pusat kompleks bandara. Demikian pula, tempat parkir di samping pusat perbelanjaan mungkin merupakan opsi yang jauh lebih baik bagi pengguna yang memiliki mobil. Dalam hal ini, saat mengembangkan aplikasi atau layanan untuk memandu pengemudi, temukan terlebih dahulu lokasi yang akan mereka tuju, lalu tawarkan tujuan opsional di dekat lokasi tersebut kepada pengemudi. Pendekatan ini memungkinkan Anda memberikan layanan yang lebih baik kepada pelanggan dan menunjukkan bahwa Anda menghargai waktu mereka, dengan upaya pengembangan yang kecil tetapi cerdas yang memanfaatkan data lokasi yang disediakan oleh Google Maps Platform.

Diagram sistem

Kami akan menunjukkan cara menggunakan Places API baru dan Routes API secara berurutan atau kombinasi untuk mengidentifikasi lokasi yang tepat untuk parkir di samping tujuan Anda. Solusi ini bertujuan untuk menghilangkan ketidakpastian dan beberapa interaksi untuk menemukan tempat parkir saat berkendara setelah lebih dekat ke tujuan akhir. Lihat dua contoh cara kasus ini dapat diterapkan secara mendetail.

Contoh 1 - tempat wisata tanpa tempat parkir

Pilih lokasi yang tidak terhubung langsung ke tepi jalan sehingga rute harus diambil secara terpisah, tujuannya adalah Notre Dame di Paris dan sebagai titik awal kita akan menggunakan stasiun kereta Gare de l'Est (48.87697775149635, 2.3592247806755564).

Gare l'Est

Pengemudi meninggalkan stasiun sekitar 16 menit di utara Notre Dame. Notre Dame adalah tempat wisata terkenal di pulau dengan akses jembatan, beberapa jalan satu arah, dan tidak ada tempat parkir besar yang tersedia di dekatnya, jadi ini akan menjadi tantangan yang menarik.

1. Permintaan Places API

Contoh permintaan Places API ini menggunakan penelusuran teks untuk menemukan Notre Dame. Lihat dokumentasi developer untuk mengetahui detailnya. $APIKEY" dalam contoh ini adalah Kunci API yang Anda miliki untuk Places dan Routes API Google Maps Platform yang diaktifkan di Konsol Google Cloud. Untuk penjelasan yang lebih mendetail, lihat dokumentasi untuk memulai Google Maps Platform.

Permintaan Places API baru memiliki format baru. Kolom respons tidak lagi tetap dan sebagai developer, Anda harus menentukan fieldmask di header. Penggunaan fieldmask ditentukan dalam dokumentasi.

curl -X POST --data @notre_dame.json \
-H 'Content-Type: application/json' -H "X-Goog-Api-Key: $APIKEY" \
-H 'X-Goog-FieldMask: places.id,places.displayName,places.formattedAddress,places.location' \
'https://places.googleapis.com/v1/places:searchText'

Dengan konten "notre_date.json" untuk parameter penelusuran:

{
   "textQuery": "Notre Dame, Paris",
   "languageCode": "en"
}

Respons terhadap permintaan di atas memberikan koordinat lintang &bujur berikut:

{
  "places": [
    {
      "id": "ChIJATr1n-Fx5kcRjQb6q6cdQDY",
      "formattedAddress": "6 Parvis Notre-Dame - Pl. Jean-Paul II, 75004 Paris, France",
      "location": {
        "latitude": 48.852968200000007,
        "longitude": 2.3499021
      },
      "displayName": {
        "text": "Cathédrale Notre-Dame de Paris",
        "languageCode": "en"
      }
    }
  ]
}

Seperti yang dapat Anda lihat, koordinat memang menunjukkan Notre Dame.

Foto pintu masuk Notre Dame Peta area Notre Dame

Sebagai developer atau penyedia layanan, sebaiknya otomatis meminta pengemudi "Mencari tempat parkir di dekat Notre Dame?" atau jika pengemudi memiliki kendaraan listrik, Anda mungkin ingin menelusuri stasiun pengisian daya. Pengalaman pengguna akan berbeda bergantung pada perangkat dan layar, tetapi teks dialog halus yang menghilang setelah waktu singkat mungkin layak dipertimbangkan dalam hal ini. Untuk menemukan tempat parkir di dekat Notre Dame, lakukan penelusuran di sekitar Places API dengan jenis "parking" dan "electric_vehicle_charging_station" dengan radius 500 meter. Contoh berikut akan memprioritaskan hasil ke area parkir dalam jarak 500 meter dari Notre Dame.

curl -X POST -d '{
  "includedTypes": ["parking", "electric_vehicle_charging_station"],
  "maxResultCount": 10,
  "rankPreference": "DISTANCE",
  "locationRestriction": {
    "circle": {
      "center": {
        "latitude": 48.852968200000007,
        "longitude": 2.3499021},
      "radius": 500.0
    }
  }
}' \
-H 'Content-Type: application/json' -H "X-Goog-Api-Key: $APIKEY" \
-H "X-Goog-FieldMask: places.displayName,places.location" \
https://places.googleapis.com/v1/places:searchNearby

Hasil pertama adalah stasiun pengisian daya di 48.854981, 2.350629, meskipun pada saat Anda menjalankan contoh ini, hasil Anda mungkin berbeda. Gunakan lokasi ini di bagian berikutnya saat kita melakukan permintaan Routes API.

2. Permintaan Routes API

Untuk menemukan rute dari stasiun ke stasiun pengisian daya yang dekat dengan Notre Dame, Anda harus melakukan permintaan Routes API. Cukup tetapkan parameter asal dan tujuan. Lihat dokumentasi developer untuk opsi lainnya.

curl -X POST -d '{
  "origin":{
    "location":{
      "latLng":{
        "latitude": 48.87697775149635,
        "longitude": 2.3592247806755564
      }
    }
  },
  "destination":{
    "location":{
      "latLng":{
       "latitude": 48.854981,
        "longitude": 2.350629
      }
    }
  },
  "travelMode": "DRIVE",
  "routingPreference": "TRAFFIC_AWARE",
  "departureTime": "2024-05-16T15:01:23.045123456Z",
  "computeAlternativeRoutes": false,
  "routeModifiers": {
    "avoidTolls": false,
    "avoidHighways": false,
    "avoidFerries": false
  },
  "languageCode": "en-US",
  "units": "METRIC"
}' \
-H 'Content-Type: application/json' -H "X-Goog-Api-Key: $APIKEY" \
-H 'X-Goog-FieldMask: routes.duration,routes.distanceMeters,routes.legs,routes.polyline.encodedPolyline' \
'https://routes.googleapis.com/directions/v2:computeRoutes'

Respons Routes API biasanya berisi beberapa saran rute. Untuk menyertakan data rute dalam respons, tentukan "routes.legs" di fieldmask. Setiap rute terdiri dari beberapa "legs" dan berisi beberapa "steps" yang menunjukkan jarak dan koordinat perjalanan. Untuk menemukan koordinat akhir yang dapat dijangkau dengan mobil, gunakan kolom "endLocation" dari langkah terakhir dari leg terakhir dalam rute yang Anda pilih. "latitude": 48.854937299999996, "longitude": 2.3505841999999997

Lokasi ini mungkin tampak bukan pilihan pertama, tetapi jika Anda melihat peta atau Google Street View, Anda akan menemukan bahwa lokasi ini berada dalam jarak berjalan kaki yang sangat singkat, sekitar 6-7 menit, dari Notre Dame.

Rute ke Notre Dame

Rute jalan kaki dari tempat parkir stasiun pengisian daya ke Notre Dame

Ringkasan untuk contoh 1

Seperti yang dapat Anda lihat, menemukan area parkir untuk mobil hanya memerlukan beberapa panggilan API dan menampilkan saran kepada pengemudi. Hal ini menghemat waktu bagi pengguna Anda karena mereka tidak berkendara di jalan satu arah atau mencoba menemukan tempat untuk memarkir mobil di tempat wisata yang ramai. Sebagai ringkasan, kami melakukan permintaan API berikut:

  • Permintaan penelusuran teks Places API untuk menemukan koordinat Notre Dame
  • Penelusuran di sekitar Places API untuk menemukan area parkir dengan stasiun pengisian daya mobil listrik dalam jarak 500 meter dari koordinat tersebut
  • Permintaan Routes API untuk menemukan rute ke stasiun pengisian daya

Contoh 2 - Memandu ke terminal di bandara besar

Peta bandara Heathrow

Pertimbangkan contoh lain saat pengemudi mencoba mencapai area besar yang memiliki beberapa lokasi, POI, atau potensi titik pengantaran. Pengemudi berangkat dari stadion Wembley, Inggris (51.557263604707224, -0.2794575145680608) dan mencoba menuju terminal 5 bandara London Heathrow.

Hal yang menarik dari pelengkapan otomatis Places API baru adalah kemampuan untuk menentukan jenis utama sebagai kriteria penelusuran yang dikombinasikan dengan API yang memprediksi sub-lokasi sebagai potensi hasil penelusuran. Dalam hal ini, penelusuran bandara dan tempat parkir juga akan menampilkan terminal atau tempat parkir mobil. Anda dapat menemukan daftar lengkap jenis yang akan disertakan atau dikecualikan dalam dokumentasi.

curl -X POST -d '{
  "input": "Heathrow",
  "includedPrimaryTypes": ["airport", "parking"]
}' \
-H 'Content-Type: application/json' -H "X-Goog-Api-Key: $APIKEY" \
https://places.googleapis.com/v1/places:autocomplete

Kueri di atas memberi kita daftar terminal dan titik pengantaran individual di terminal tersebut. Dari daftar hasil, kita dapat menemukan "London Heathrow Airport Terminal 5" dan ID tempatnya:

"place_id" : "ChIJo21hnPxxdkgRksRL0KQRWII",

Dengan menggunakan parameter "placeId", kita dapat memberi tahu Routes API bahwa kita mencoba mencapai suatu tempat, bukan beberapa koordinat arbitrer.

curl -X POST -d '{
  "origin":{
    "location":{
      "latLng":{
        "latitude": 51.557263604707224,
        "longitude": -0.2794575145680608
      }
    }
  },
  "destination":{
    "placeId": "ChIJo21hnPxxdkgRksRL0KQRWII"
  },
  "travelMode": "DRIVE",
  "routingPreference": "TRAFFIC_AWARE",
  "departureTime": "2024-05-16T15:01:23.045123456Z",
  "computeAlternativeRoutes": false,
  "languageCode": "en-US",
  "units": "METRIC"
}' \
-H 'Content-Type: application/json' -H "X-Goog-Api-Key: $APIKEY" \
-H 'X-Goog-FieldMask: routes.duration,routes.distanceMeters,routes.legs,routes.polyline.encodedPolyline' \
'https://routes.googleapis.com/directions/v2:computeRoutes'

Sekali lagi, seperti pada contoh sebelumnya, dengan membaca semua langkah dalam respons JSON, Anda akan menemukan bagian terakhir perjalanan dan koordinat lintang & bujur lokasi akhir (51.4714348, "longitude": -0.48967890000000003).

Street View Terminal 5

Ringkasan untuk contoh 2

Seperti pada contoh sebelumnya, upaya pengembangan untuk memberikan panduan yang lebih baik kepada pengemudi sangat kecil dan manfaat dalam waktu yang dihemat bagi pengemudi dapat diukur. Kami melakukan permintaan berikut:

  • Permintaan pelengkapan otomatis Places API (baru) untuk menemukan terminal 5 bandara Heathrow
  • Permintaan Routes API untuk mendapatkan rute dari Wembley ke terminal 5

Contoh ini hanya membahas fitur Places API baru. Lihat beberapa jenis tempat baru seperti landasan pacu dan bandara internasional.

Kesimpulan

Seperti yang dapat Anda lihat, upaya pengembangan yang diperlukan untuk memberikan layanan premium kepada pelanggan yang bepergian dengan mobil cukup kecil dan Anda dapat menunjukkan bagaimana Anda memikirkan kebutuhan pelanggan.

Untuk tujuan pengembangan, Anda dapat menggunakan banyak library dan alat yang tersedia untuk membantu Anda membuat layanan bagi pelanggan. Lihat repositori GitHub Google Maps Platform yang tersedia secara publik.

Tindakan Berikutnya

Mulai menggunakan GMP : https://developers.google.com/maps/get-started

Bacaan lanjutan yang disarankan

Dokumentasi pelengkapan otomatis Places API (baru) : https://developers.google.com/maps/documentation/places/web-service/place-autocomplete

Dokumentasi Routes API : https://developers.google.com/maps/documentation/routes

Kontributor

Penulis utama: Mikko Toivanen | Google Maps Platform Solutions Engineer