Mengarahkan Pengguna ke Detail dan Rute Tempat Google Maps dengan URL Maps atau Places API

Di dunia yang berbasis lokasi saat ini, pengguna mengharapkan akses yang lancar ke informasi tempat, rute, dan navigasi. Baik melalui aplikasi messenger, aplikasi penemuan konteks lokal, platform logistik dan transportasi, perencana perjalanan, atau platform listingan properti, pengguna sering kali perlu melihat detail lokasi dengan cepat atau menemukan rute terbaik dari A ke B. Meskipun developer dapat membuat pengalaman dalam aplikasi mereka sendiri, memanfaatkan antarmuka Google Maps yang komprehensif dan sudah dikenal akan memberikan pengalaman yang lebih baik.

URL Google Maps yang terstruktur dengan baik sangat penting untuk pengalaman pengguna yang lancar. URL yang salah akan membahayakan pengalaman ini, mengarahkan pengguna ke lokasi yang salah, menampilkan tampilan peta umum, bukan detail spesifik, atau bahkan menyebabkan link rusak. Hal ini membuat pengguna frustrasi dan mencegah mereka mencapai sasaran. Misalnya, meskipun dengan URL Maps yang valid, pengguna yang mengharapkan detail tentang bisnis tertentu mungkin akan diarahkan ke tampilan peta umum tanpa informasi yang relevan. Lihat contoh di bawah ini:

https://www.google.com/maps/search/?api=1&query=-33.8567%2C151.2152

URL Maps ini valid untuk membuka Google Maps dan menampilkan lokasi berdasarkan garis lintang dan bujur. Namun, Place Details tidak memberikan detail tentang tempat tertentu kepada pengguna.

Menelusuri hanya menggunakan lintang dan bujur
Menelusuri hanya menggunakan lintang dan bujur

Menghubungkan aplikasi Anda dengan Google Maps dengan lancar melalui URL yang akurat

Membuka halaman Detail Tempat di Google Maps
URL Maps dengan nama tempat unik mengarahkan pengguna ke halaman detail tempat tersebut di Google Maps

Google Maps Platform (GMP) menawarkan dua metode utama untuk membuat URL yang akurat: Places API(Baru), yang memerlukan kunci API, dan URL Maps, yang gratis dan tidak memerlukan kunci. Solusi berikut menangani berbagai skenario dan kasus penggunaan:

GMP Places API(Baru) menampilkan kumpulan informasi yang komprehensif tentang tempat tertentu. Saat meminta kolom googleMapsUri atau googleMapsLinks (dengan menentukannya di field mask), respons API akan menyertakan objek tempat. Objek ini berisi URL yang telah diformat sebelumnya, yang dapat digunakan untuk langsung membuka tampilan yang sesuai, seperti tampilan detail tempat, di Google Maps.

Contoh:

Permintaan Place Details

curl -X GET -H 'Content-Type: application/json' \
-H "X-Goog-Api-Key: YOUR_API_KEY" \
-H "X-Goog-FieldMask: googleMapsUri,googleMapsLinks" \
https://places.googleapis.com/v1/places/ChIJ3S-JXmauEmsRUcIaWtf4MzE

Respons Place Details:

{
    "googleMapsUri": "https://maps.google.com/?cid=3545450935484072529",
    "googleMapsLinks": {
        "directionsUri": "https://www.google.com/maps/dir//''/data=!4m7!4m6!1m1!4e2!1m2!1m1!1s0x6b12ae665e892fdd:0x3133f8d75a1ac251!3e0",
        "placeUri": "https://maps.google.com/?cid=3545450935484072529",
        "writeAReviewUri": "https://www.google.com/maps/place//data=!4m3!3m2!1s0x6b12ae665e892fdd:0x3133f8d75a1ac251!12e1",
        "reviewsUri": "https://www.google.com/maps/place//data=!4m4!3m3!1s0x6b12ae665e892fdd:0x3133f8d75a1ac251!9m1!1b1",
        "photosUri": "https://www.google.com/maps/place//data=!4m3!3m2!1s0x6b12ae665e892fdd:0x3133f8d75a1ac251!10e5"
    }
}

ChIJ3S-JXmauEmsRUcIaWtf4MzE dalam contoh di atas adalah ID Tempat Sydney Opera House dalam contoh di atas. ID Tempat adalah ID tekstual yang secara unik mengidentifikasi tempat di database Google Places dan di Google Maps.

Mengambil ID Tempat tanpa biaya

Untuk mengambil ID Tempat secara terprogram, Anda dapat menggunakan fungsi Places API: Text Search(ID Only). Ini adalah metode tanpa biaya untuk mendapatkan ID Tempat. Pelajari ID Tempat dan permintaan Place API(Baru) lebih lanjut.

Permintaan Places API Text Search(ID Only):

curl -X POST -d '{"textQuery" : "Sydney Opera House"}' \
-H 'Content-Type: application/json' -H 'X-Goog-Api-Key: YOUR_API_KEY' \
-H 'X-Goog-FieldMask: places.id' \
'https://places.googleapis.com/v1/places:searchText'

Respons Places API Text Search(ID Only):

{
  "places": [
    {
      "id": "ChIJ3S-JXmauEmsRUcIaWtf4MzE"
    }
  ]
}

ID tempat juga dapat diambil saat pengguna mengklik atau mengetuk POI di peta. Cari tahu detail selengkapnya tentang ikon POI yang dapat diklik(JavaScript, Android, iOS)

Penerapan

Saat menggunakan Places API, developer cukup mengekstrak kolom googleMapsUri atau googleMapsLinks dari respons dan menggunakannya untuk meluncurkan tampilan yang sesuai di aplikasi Google Maps atau di browser jika aplikasi tidak diinstal.

Fitur Deskripsi
directionsUri Link untuk membuka Google Maps guna menampilkan rute dari lokasi pengguna saat ini ke tempat ini
placeUri Link untuk membuka Google Maps ke halaman detail tempat untuk tempat ini
writeAReviewUri Link untuk membuka Google Maps ke halaman penulisan ulasan untuk tempat ini
reviewsUri Link untuk membuka Google Maps ke halaman ulasan untuk tempat ini
photosUri Link untuk membuka Google Maps ke halaman foto untuk tempat ini

Lihat panduan developer dan coba fitur ini sekarang.

Menggunakan URL Maps

Dengan menggunakan URL Maps, Anda dapat membuat URL lintas platform yang universal untuk meluncurkan Google Maps dan melakukan penelusuran, mendapatkan rute dan navigasi, serta menampilkan tampilan peta dan gambar panorama. Sintaksis URL-nya sama, apa pun platform yang digunakan. Anda tidak memerlukan kunci Google API untuk menggunakan URL Maps.

Tindakan peta yang tersedia adalah:

  • Fungsi Penelusuran meluncurkan aplikasi Google Maps atau di browser jika aplikasi tersebut tidak diinstal dan menampilkan pin untuk tempat tertentu, atau melakukan penelusuran umum dan meluncurkan peta untuk menampilkan hasilnya.

  • Fungsi Rute meluncurkan aplikasi Google Maps atau di browser jika aplikasi tidak diinstal yang menampilkan rute antar-titik atau mengaktifkan navigasi per-belok di Google Maps untuk perangkat seluler.

  • Fungsi panorama Street View memungkinkan Anda meluncurkan penampil untuk menampilkan gambar Street View sebagai panorama interaktif.

Buka dokumentasi developer URL GMP Maps untuk mempelajari lebih lanjut fungsi dan contoh.

Di sini, kita akan membahas dua fungsi utama URL Maps:

  • Menampilkan detail tempat di Google Maps: Bagian ini menjelaskan cara membuat URL yang akan menampilkan detail untuk lokasi tertentu di Google Maps. Panduan ini juga menjelaskan cara menggunakan tempat yang memiliki nama non-unik menggunakan ID Tempat dan kueri yang tepat.

  • Memberikan Rute menggunakan URL Maps: Bagian ini menjelaskan cara membuat URL yang memberikan rute di antara lokasi, termasuk rute dengan beberapa titik perhentian dan navigasi belokan demi belokan.

Menampilkan detail tempat di Google Maps

Fungsi Penelusuran memerlukan dua parameter untuk menyelesaikan penelusuran tempat, yaitu query(wajib) dan query_place_id(opsional).

Parameter query diperlukan untuk semua permintaan penelusuran. Fungsi ini menerima nama tempat, atau koordinat lintang/bujur yang dipisahkan koma, atau istilah penelusuran umum.

Struktur URL Penelusuran:

https://www.google.com/maps/search/?api=1&parameters

Skenario 1: Menampilkan detail tempat untuk nama tempat yang unik

https://www.google.com/maps/search/?api=1&query=Sydney%20Opera%20House
Dalam contoh ini, hanya nama tempat yang ditentukan. URL ini akan membuka halaman detail untuk Sydney Opera House.

Membuka halaman Detail Tempat di Google Maps
Menelusuri nama tempat dan menampilkan detail tempat

Sekarang, pertimbangkan tempat dengan nama yang tidak unik. Apa yang terjadi jika Anda hanya menelusuri dengan nama yang tidak unik ini? Lihat skenario berikutnya.

Skenario 2: Menelusuri tempat untuk nama tempat yang tidak unik

https://www.google.com/maps/search/?api=1&query=7-Eleven

Karena nama tempat tidak unik, URL ini akan membuka daftar lokasi 7-Eleven terdekat dalam area pandang. Kemudian, pengguna dapat memilih toko tertentu untuk melihat detailnya.

Membuka halaman Daftar Tempat di Google Maps
Halaman daftar tempat untuk menelusuri nama yang tidak unik

Untuk menghindari daftar lokasi dan langsung mengakses halaman detail tertentu, Anda dapat menggunakan metode yang lebih akurat. Lihat contoh berikutnya.

Skenario 3: Menampilkan detail tempat untuk nama tempat yang tidak unik

Saat menangani nama tempat umum, penelusuran nama sederhana sering kali menampilkan daftar lokasi. Untuk menautkan langsung ke halaman detail tertentu, Anda dapat menggunakan salah satu metode berikut:

Metode 1: Menggunakan kueri yang akurat dengan Nama Tempat dan Alamat

https://www.google.com/maps/search/?api=1&query=7-Eleven%2C37%20Swanston%20St%2C%20Melbourne%20Australia

Dalam URL ini, parameter query diformat sebagai nama tempat, alamat. Hal ini membantu mempersempit penelusuran dan menautkan langsung ke lokasi yang diinginkan.

Metode 2: Menggunakan ID Tempat

ID tempat secara unik mengidentifikasi tempat di database Google Places dan Google Maps.

https://www.google.com/maps/search/?api=1&query=7-Elevan&query_place_id=ChIJGcmcg7ZC1moRAOacd3HoEwM

Di sini, ChIJGcmcg7ZC1moRAOacd3HoEwM adalah ID Tempat unik untuk tempat tertentu. Parameter query masih diperlukan, tetapi hanya akan digunakan jika Google Maps tidak dapat menemukan ID tempat.

Skenario 4: Menampilkan detail tempat menggunakan koordinat lintang dan bujur serta ID tempat

Penggunaan ID Tempat memastikan Google Maps menampilkan informasi tempat yang mendetail.

https://www.google.com/maps/search/?api=1&query=-33.8567%2C151.2152&query_place_id=ChIJ3S-JXmauEmsRUcIaWtf4MzE
Halaman Place Detail menggunakan lintang dan bujur serta ID Tempat
Halaman Place Details menggunakan lintang dan bujur serta ID Tempat

Mengambil ID Tempat tanpa biaya

Untuk mengambil ID Tempat secara terprogram, Anda dapat menggunakan fungsi Places API: Text Search(ID Only). Ini adalah metode tanpa biaya untuk mendapatkan ID Tempat. Pelajari ID Tempat dan permintaan Place API(New) lebih lanjut.

Permintaan Places API Text Search(ID Only):

curl -X POST -d '{"textQuery" : "Sydney Opera House"}'
-H 'Content-Type: application/json' -H 'X-Goog-Api-Key: YOUR_API_KEY'
-H 'X-Goog-FieldMask: places.id'
'https://places.googleapis.com/v1/places:searchText'

Respons Places API Text Search(ID Only):

{
  "places": [
    {
      "id": "ChIJ3S-JXmauEmsRUcIaWtf4MzE"
    }
  ]
}

ID tempat juga dapat diambil saat pengguna mengklik atau mengetuk POI di peta. Cari tahu detail selengkapnya tentang ikon POI yang dapat diklik(JavaScript, Android, iOS)

Kesimpulan

Memberikan detail tempat yang akurat sangatlah penting untuk pengalaman yang positif. Untuk memastikan pengguna membuka halaman detail tempat yang benar, buat URL Penelusuran menggunakan salah satu format yang direkomendasikan berikut:

  • query=PLACE_NAME, ADDRESS
  • query=PLACE_NAME&query_place_id=PLACE_ID

Hindari hanya menggunakan koordinat lintang/bujur dalam parameter query jika tujuan Anda adalah menampilkan detail tempat tertentu. Format seperti query=latitude,longitude, query=PLACE_NAME,latitude,longitude, atau query=ADDRESS,latitude,longitude tidak akan secara konsisten mengarah ke halaman detail tempat yang diinginkan. Sebagai gantinya, lintang dan bujur lokasi akan ditampilkan.

Penelusuran kategori menggunakan URL Maps

Dalam penelusuran kategori, Anda meneruskan istilah penelusuran umum, dan Google Maps akan mencoba menemukan listingan yang cocok dengan kriteria Anda di dekat lokasi yang Anda tentukan. Jika tidak ada lokasi yang ditentukan, Google Maps akan mencoba menemukan listingan di sekitar lokasi Anda saat ini.

Skenario 1: Penelusuran tempat terdekat

https://www.google.com/maps/search/?api=1&query=Cafe%20near%20Sydney%20Opera%20House%20that%20are%20open%20now
Penelusuran kategori - tempat terdekat
Penelusuran kategoris - tempat terdekat

Memberikan Rute menggunakan URL Maps

Fungsi Rute menampilkan jalur antara dua titik atau lebih yang ditentukan di peta, serta jarak dan waktu perjalanan. API ini menawarkan kontrol yang lebih besar kepada developer atas rute yang diberikan. Dokumentasi Petunjuk URL Maps GMP memberikan petunjuk mendetail tentang cara membuat URL untuk rute yang disesuaikan.

Struktur URL Rute:

https://www.google.com/maps/dir/?api=1&parameters

Skenario 1: Menemukan rute terbaik dari lokasi pengguna saat ini ke tujuan

https://www.google.com/maps/dir/?api=1&destination=Flinders%20Station%20Melbourne&travelmode=driving

URL ini akan membuka Google Maps dan menampilkan rute mobil dari lokasi pengguna saat ini.

Dalam URL ini, origin dihilangkan. Jika origin dihilangkan, jalur akan ditetapkan secara default ke lokasi awal yang paling relevan, seperti lokasi perangkat, jika tersedia. Jika tidak ada, peta yang dihasilkan akan menyediakan formulir untuk memungkinkan pengguna memasukkan asal. Nilai asal dan tujuan dapat berupa nama tempat, alamat, atau koordinat lintang/bujur yang dipisahkan koma.

travelmode adalah parameter opsional. Kolom ini menentukan metode perjalanan. Parameter ini dapat ditetapkan sebagai:

  • mengemudi
  • berjalan kaki
  • bersepeda
  • sepeda motor
  • transit

Jika tidak ada mode perjalanan yang ditentukan, Google Maps akan menampilkan satu atau beberapa mode yang paling relevan untuk rute yang ditentukan dan/atau preferensi pengguna.

Developer juga dapat menentukan ID Tempat menggunakan parameter origin_place_id dan destination_place_id. Menggunakan ID Tempat adalah jaminan terbaik bahwa Anda akan tertaut ke tempat yang tepat.

Mengambil ID Tempat tanpa biaya

Untuk mengambil ID Tempat secara terprogram, Anda dapat menggunakan fungsi Places API: Text Search(ID Only). Ini adalah metode tanpa biaya untuk mendapatkan ID Tempat. Pelajari ID Tempat dan permintaan Place API(New) lebih lanjut.

Permintaan Places API Text Search(ID Only):

curl -X POST -d '{"textQuery" : "Sydney Opera House"}'
-H 'Content-Type: application/json' -H 'X-Goog-Api-Key: YOUR_API_KEY'
-H 'X-Goog-FieldMask: places.id'
'https://places.googleapis.com/v1/places:searchText'

Respons Places API Text Search(ID Only):

{
  "places": [
    {
      "id": "ChIJ3S-JXmauEmsRUcIaWtf4MzE"
    }
  ]
}

ID tempat juga dapat diambil saat pengguna mengklik atau mengetuk POI di peta. Cari tahu detail selengkapnya tentang ikon POI yang dapat diklik(JavaScript, Android, iOS)

Rute dari lokasi pengguna saat ini
Rute dari lokasi pengguna saat ini

Skenario 3: Menyediakan Navigasi Belokan Demi Belokan

https://www.google.com/maps/dir/?api=1&destination=Flinders%20Station%20Melbourne&travelmode=driving&dir_action=navigate

Menetapkan dir_action=navigate di URL akan meluncurkan Google Maps dalam mode navigasi peta per belokan jika lokasi pengguna saat ini(lokasi perangkat) tersedia dan digunakan sebagai asal (baik diberikan secara eksplisit maupun digunakan secara implisit saat parameter asal dihilangkan). Jika tidak, pratinjau rute akan ditampilkan.

Navigasi belokan demi belokan diluncurkan saat dir_action=navigate ditetapkan dan:

  • Asal ditentukan dan dekat dengan lokasi pengguna saat ini
  • Asal dihilangkan dan lokasi pengguna saat ini tersedia

Pratinjau rute diluncurkan saat:

  • dir_action=navigate tidak ditetapkan
  • dir_action=navigate ditetapkan dan asal ditentukan, dan asal tidak dekat dengan lokasi pengguna saat ini
  • dir_action=navigate ditetapkan dan origin dihilangkan, serta lokasi pengguna saat ini tidak tersedia

Perhatikan bahwa navigasi tidak tersedia di semua produk Google Maps seperti Google Maps Web, dan/atau di antara semua tujuan. Dalam kasus tersebut, parameter ini akan diabaikan.

Navigasi Belokan Demi Belokan Pratinjau Rute
Navigasi Belokan Demi Belokan
Pratinjau Rute

Kesimpulan

Dengan membuat URL Maps dengan benar, Anda dapat memastikan pengguna mendapatkan informasi yang tepat yang mereka butuhkan dengan cepat dan efisien.

  • Selalu tentukan tujuan, dan gunakan ID Tempat jika memungkinkan untuk menjamin akurasi

  • Jika sasarannya adalah memberikan navigasi langsung, sertakan parameter dir_action=navigate untuk memicu navigasi belokan demi belokan. Navigasi akan dimulai dari lokasi pengguna saat ini jika lokasi perangkat tersedia dan digunakan sebagai asal (ditetapkan secara eksplisit atau dihilangkan)

Memilih pendekatan yang tepat untuk aplikasi Anda

Anda memiliki dua opsi utama: memanfaatkan URL yang telah diformat sebelumnya yang disediakan oleh Places API atau membuat URL Maps secara manual di aplikasi Anda. Setiap pendekatan memiliki serangkaian kelebihan dan kekurangannya sendiri.

Places API:

  • Kolom googleMapsUri dan googleMapsLinks dalam respons Place Details menyediakan URL yang siap digunakan. Hal ini mengurangi waktu pengembangan dan meminimalkan risiko error dalam pemformatan URL.

  • Memberikan lebih sedikit kontrol atas konfigurasi rute. Meskipun menawarkan rute dasar, googleMapsLinks tidak mendukung titik jalan atau penyesuaian lanjutan. Selain itu, memicu navigasi belokan demi belokan secara langsung relatif lebih sulit.

URL Maps:

  • Menawarkan fleksibilitas dan kontrol yang lebih besar. Developer dapat membuat URL untuk menampilkan detail tempat dan mengonfigurasi berbagai aspek rute, termasuk menambahkan titik perhentian, menentukan mode perjalanan, dan memulai navigasi belokan demi belokan.

  • Memerlukan pemahaman yang lebih mendalam tentang parameter dan struktur URL. Pembuatan manual meningkatkan potensi error jika tidak dilakukan dengan hati-hati.

Meningkatkan kualitas URL Maps dengan parameter UTM

Untuk membantu Google lebih memahami cara developer mengintegrasikan URL Maps dan untuk memastikan performa yang optimal, sebaiknya sertakan parameter pelacakan UTM dalam konstruksi URL Anda. Dengan menambahkan parameter utm_source dan utm_campaign, Anda memberikan data berharga yang memungkinkan kami menganalisis pola penggunaan dan meningkatkan kualitas produk URL Maps.

Untuk parameter utm_source, gunakan nama aplikasi Anda. Parameter utm_campaign harus mencerminkan tindakan yang diinginkan pengguna, seperti "location_sharing", "place_details_search", atau "directions_request".

Misalnya, URL dengan parameter UTM mungkin terlihat seperti ini:

https://www.google.com/maps/search/?api=1&query=Sydney+Opera+House&query_place_id=ChIJ3S-JXmauEmsRUcIaWtf4MzE&utm_source=YourAppName&utm_campaign=place_details_search

Penggunaan parameter ini secara konsisten membantu kami mengidentifikasi area yang perlu ditingkatkan, memecahkan masalah secara lebih efektif, dan pada akhirnya memberikan pengalaman yang lebih baik bagi semua pengguna.

Langkah Berikutnya

Bacaan lebih lanjut yang disarankan:

Kontributor

Penulis utama:

Teresa Qin | Solutions Engineer Google Maps Platform