Hallo sahabat dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini saya akan membahas tentang Lokasi Pencarian dengan Google Maps JavaScript API Place Autocomplete. Google Maps JavaScript API menyediakan fitur untuk membuat pencarian lokasi dengan autocomplete. Inputan yang dimasukan oleh user akan dimuat dan digunakan untuk mendapatkan saran lokasi dengan layanan pelengkapan otomatis. Saat pengguna mengetik sesuatu di bidang masukan, Google API akan mengembalikan alamat terkait. Alamat ini disarankan kepada pengguna menggunakan widget Google Place JavaScript API Place Autocomplete.

Layanan web Google Maps Places digunakan untuk mengimplementasikan pencarian lokasi berbasis peta dengan autocomplete. Jadi, kita harus mengaktifkan pustaka Google Maps Places dengan memilih proyek di Google API Console. Saya telah melihat lebih banyak contoh berdasarkan Google Maps JavaScript API. Misalnya, mendapatkan lokasi saat ini, merencanakan lokasi yang dinamis di peta dan banyak lagi. Jadi, saya berasumsi bahwa Anda tahu cara membuat dan memilih proyek untuk mendapatkan kunci API dan mengaktifkan perpustakaan yang diperlukan di Google API Console.

Kode HTML untuk Mencari Peta dan Menempatkan Widget Pelengkapan Otomatis

Dalam kode HTML ini, saya telah membuat lapisan untuk menerapkan peta dan widget Place Autocomplete. Saya telah menambahkan bidang input pencarian dan mengikat input bidang ini dengan panggilan pustaka Place Autocomplete untuk mendapatkan alamat terkait di kotak saran. Isi kotak saran akan dimasukkan ke dalam elemen div target di bawah input pencarian. Ketika pengguna memilih lokasi dari kotak saran, maka lokasi akan ditandai pada peta dengan jendela informasi. Saya telah menyediakan konten dari jendela informasi berdasarkan lokasi yang dipilih.

Menginisialisasi Peta dan Memicu Pelengkapan Otomatis Tempat

Dalam JavaScript ini saya telah membuat fungsi initMap () untuk mengatur default Google Maps JavaScript API. Setelah menetapkan opsi default, saya menerapkan layer peta di viewport. Inisialisasi ini akan dipanggil dengan mengimpor Google API JavaScript dengan mengirimkan kunci API. Ditambahkan ke kunci API, kita harus menentukan parameter pustaka untuk memuat pustaka Google Maps Place.

Pada alamat pengetikan di kotak masukan pencarian, kotak saran penempatan otomatis akan ditanggapi. Dengan mengubah lokasi dari kotak saran autocomplete tempat, fungsi pendengar akan menambahkan penanda ke peta untuk lokasi yang dipilih. Juga, saya data ke jendela informasi muncul di dekat marger lokasi

Pencarian Lokasi dengan Pelengkapan Otomatis Tempat Google Maps – Output
Screenshot ini menunjukkan penanda lokasi ditambahkan ke layer peta berdasarkan input pengguna. alert informasi muncul di dekat lokasi yang ditandai dengan detail lokasi.

Lokasi Pencarian dengan Google Maps JavaScript API Place Autocomplete

Oke itulah tadi pembahasan saya tentang Lokasi Pencarian dengan Google Maps JavaScript API Place Autocomplete, semoga bermanfaat.