Cara Mudah Menambahkan Pencarian Lokasi ke Situs Web Direktori di WordPress

Ada banyak cara berbeda untuk meningkatkan situs web direktori Anda dan salah satunya adalah mengaktifkan pencarian berbasis lokasi. Jika Anda menjalankan situs web direktori atau iklan baris yang mirip dengan Yelp, TripAdvisor, Craigslist, atau situs serupa lainnya yang memerlukan pencarian berbasis lokasi, Anda dapat melakukannya dengan mudah dengan mengintegrasikannya dengan Google Maps. Ini adalah fitur penting bagi beberapa pengguna karena mereka dapat mencari produk, layanan, atau tempat di wilayah mereka. Selain itu, platform Google Maps memiliki batas bulanan gratis yang seharusnya cukup jika situs web Anda mendapatkan lalu lintas sedang.

Dalam tutorial langkah demi langkah ini, kami akan menjelaskan cara menambahkan pencarian lokasi ke situs web direktori Anda. Kami akan menggunakan HivePress, plugin WordPress gratis yang memungkinkan Anda membuat situs web direktori dalam sekejap mata. Juga, akan menggunakan ListingHive, tema direktori WordPress gratis, bersama dengan ekstensi HivePress Geolocation untuk integrasi dengan Google Maps.

Namun, jika Anda sudah memiliki situs direktori yang dibuat dengan plugin atau tema lain, Anda dapat melewati langkah pertama dan menggulir ke “Cara Memperbaiki” Ups! Ada yang salah. Halaman ini tidak memuat Google Maps dengan benar” ” untuk memecahkan masalah kesalahan yang paling umum.

Jadi, mari kita beralih ke langkah pertama!

Memasang HivePress

Pertama-tama, Anda perlu menginstal HivePress. Anda dapat menginstalnya seperti plugin gratis lainnya di WordPress. Cukup navigasikan ke bagian Plugins > Add New dan temukan dengan bilah pencarian, lalu instal dan terakhir aktifkan dengan mengklik tombol "Aktifkan". Setelah selesai memasang, Anda dapat melanjutkan ke langkah berikutnya – memasang ekstensi.

Juga, jika Anda merasa kesulitan, Anda dapat mengikuti screencast di bawah ini untuk menginstal HivePress langsung dari dashboard WordPress.

Memasang Ekstensi

Langkah selanjutnya adalah memasang ekstensi Geolokasi untuk memungkinkan pengguna mencari cantuman berdasarkan lokasi. Untuk menginstalnya, cukup arahkan kursor ke bagian HivePress dan klik tautan "Ekstensi". Temukan ekstensi Geolokasi dalam daftar, klik tombol "Instal", dan akhirnya aktifkan ekstensi.

Juga, screencast berikut menunjukkan proses umum menginstal ekstensi HivePress, sehingga Anda dapat mengikutinya langkah demi langkah.

Membuat Proyek Baru

Setelah Anda selesai dengan penginstalan plugin dan ekstensi Geolokasi, saatnya membuat proyek di Google Cloud Platform. Dengan asumsi Anda sudah memiliki akun Google, Anda seharusnya dapat mengakses dasbor ini tanpa masalah. Namun, jika Anda tidak memilikinya, maka penting untuk mendaftar akun Google.

Sekarang Anda perlu membuat proyek dengan mengklik tombol "Buat Proyek", lalu beri nama, dan terakhir, klik tombol "Buat".

Menyiapkan Penagihan

Sekarang, jika Anda tidak memiliki akun penagihan dengan Google, Anda perlu membuat akun baru untuk mengaktifkan penagihan proyek. Tapi jangan khawatir, Anda tidak perlu membayar apa pun sekarang, itu hanya salah satu persyaratan untuk menggunakan Google Maps API. Cukup ikuti tautan dan isi semua bidang formulir, termasuk detail metode pembayaran.

Anda akan mendapatkan kredit gratis senilai $200 setiap bulan, dan dalam kebanyakan kasus, itu lebih dari cukup untuk menutupi biaya penggunaan layanan Google di situs web Anda. Juga, dimungkinkan untuk mengatur batas dan pemberitahuan, sehingga Anda tidak pernah melebihi kredit gratis. Anda dapat memeriksa Harga untuk mendapatkan ide yang lebih baik tentang cara kerjanya dan untuk memastikan bahwa Anda dapat menggunakan peta secara gratis.

Setelah Anda menambahkan info penagihan, Anda akan mendapatkan jendela pop-up dengan jenis API yang ingin Anda aktifkan. Pilih Peta dan Tempat seperti pada tangkapan layar di bawah dan klik tombol "Aktifkan". Selain itu, jika tidak ada jendela pop-up, Anda dapat mengaktifkan API ini melalui halaman Pustaka Google API.

Membuat Kunci API

Langkah selanjutnya adalah membuat kunci API untuk situs web Anda. Untuk melakukannya, navigasikan ke halaman Kredensial dan pilih proyek Anda.

Di halaman Kredensial, Anda dapat melihat Kunci API yang sudah dibuat. Jika Anda baru saja membuat akun penagihan, kunci mungkin dibuat secara otomatis. Dalam hal ini, Anda cukup mengkliknya untuk mengedit. Namun, jika tidak ada Kunci API di halaman, Anda dapat membuat yang baru di bagian Buat Kredensial > Kunci API .

Selanjutnya, Anda perlu mengatur Kunci API Anda dengan mengatur batasan Aplikasi. Ini penting karena jika Anda hanya menyematkan kunci, itu akan ditampilkan dalam teks biasa di kode sumber situs web Anda. Itulah mengapa Anda perlu membatasi ini agar orang lain tidak dapat menggunakan Kunci API Anda untuk proyek mereka. Untuk melakukan ini, cukup tambahkan perujuk HTTP untuk mengizinkan permintaan API dari situs web Anda saja. Cukup atur alamat situs web Anda, tetapi tambahkan juga bagian “/*” di bagian akhir untuk mengizinkan permintaan API dari salah satu subhalaman situs web, sehingga Google Maps akan berfungsi di semua halaman situs web Anda.

Sekarang Anda perlu mengatur batasan API di bidang berikutnya. Klik Batasi kunci dan pilih Maps JavaScript API, Places API, Geocoding API dari menu tarik-turun. Jika beberapa API yang disebutkan tidak terdaftar, Anda harus mengaktifkannya di halaman Perpustakaan Maps API terlebih dahulu. Setelah ketiga Google API diaktifkan dan dipilih di menu tarik-turun, klik tombol "Simpan".

Mengaktifkan Integrasi Google Maps

Itu dia! Anda baru saja membuat Kunci API, dan sentuhan akhir adalah mengaktifkan Google Maps di situs web Anda. Pertama-tama salin Kunci API di halaman APIs & Services > Credentials . Sekarang, jika Anda menggunakan plugin HivePress, navigasikan ke dasbor WordPress Anda dan buka bagian HivePress > Pengaturan > Integrasi > Google Maps . Kemudian cukup tempel Kunci API Anda di bidang yang sesuai dan klik tombol "Simpan Perubahan" untuk menambahkan pencarian lokasi ke situs web Anda.

Selamat! Mulai saat ini, situs web Anda terintegrasi dengan Google Maps, dan sekarang Anda dapat menambahkan lokasi ke cantuman yang ada di bagian Cantuman . Selain itu, pengguna harus menyetel lokasi untuk cantuman yang baru ditambahkan. Selain itu, ada bidang pencarian lokasi di situs web Anda dan Google Map, sehingga Anda dapat mencobanya dan mencari beberapa cantuman berdasarkan lokasinya.

Penyelesaian masalah

Jika ada masalah dengan kunci API yang Anda buat, peta mungkin menampilkan pesan “Ups! Ada yang salah. Halaman ini tidak memuat Google Maps dengan benar” . Ini adalah kesalahan yang cukup umum karena menyiapkan kunci API bukanlah proses yang sangat ramah pengguna, dan pengguna sering melewatkan beberapa langkah penyiapan. Namun, Anda dapat memperbaikinya dalam waktu singkat jika Anda mengetahui akar masalahnya.

Untuk mengetahui alasan kesalahan itu, Anda perlu membuka Konsol JavaScript. Anda dapat membukanya dengan beberapa penekanan tombol yang berbeda tergantung pada browser Anda. Periksa jawabannya di StackOverflow yang menjelaskan cara membuka Konsol JavaScript. Jika Anda menggunakan browser Chrome, Anda cukup menekan CTRL+Shift+I untuk membukanya. Setelah Anda membukanya, Anda akan melihat pesan kesalahan, seperti ini.

Sangat penting untuk mengetahui persis apa yang menyebabkan kesalahan sehingga Anda dapat memperbaikinya. Mungkin ada beberapa kesalahan yang berbeda, tetapi kami akan menunjukkan cara mengatasi kesalahan yang paling sering:

• MissingKeyMapError;
• KesalahanKeyMapError;
• ApiNotActivatedMapError;
• RefererNotAllowedMapError.

Namun, jika Anda memiliki kesalahan yang tidak tercantum di atas, periksa dokumentasi Pesan Kesalahan Google Maps API untuk mengetahui apa yang salah dan cara memperbaikinya.

KesalahanPetaKunci Hilang

Kesalahan ini berarti tidak ada kunci API sama sekali, jadi Anda harus membuatnya jika ingin mengaktifkan Google Maps di situs web Anda. Jika Anda mendapatkan kesalahan ini, kami sarankan Anda mengikuti tutorial ini mulai dari langkah pertama untuk membuat Kunci API dan menyiapkan peta dengan benar.

KesalahanKeyMapError

Kesalahan ini muncul saat Anda menggunakan Kunci API yang salah. Kemungkinan besar Anda telah membuatnya tetapi tidak menambahkannya ke situs web Anda dengan benar. Untuk memperbaiki kesalahan ini, buka halaman Kredensial dan salin Kunci API.

Jika Anda menggunakan plugin HivePress dan ekstensi Geolokasinya, buka bagian Dasbor WordPress > HivePress > Pengaturan > Integrasi > Google Maps , tempel Kunci API Anda di bidang yang sesuai, dan klik tombol "Simpan Perubahan".

ApiNotActivatedMapError

Jika Anda mendapatkan jenis kesalahan ini, itu berarti Anda tidak mengaktifkan API yang diperlukan. Ada banyak API berbeda di Pustaka Google Maps API, jadi Anda harus membuka Pustaka dan mengaktifkan yang diperlukan untuk proyek Anda. Setelah Anda mengaktifkannya, ingatlah untuk juga menambahkannya ke bagian Pembatasan API di setelan kunci API Anda di bagian Kredensial.

Misalnya, jika Anda menggunakan plugin HivePress dengan ekstensi Geolokasi dan ingin menambahkan penelusuran lokasi ke situs web direktori, Anda harus mengaktifkan dan mengizinkan akses ke Google API berikut: Maps JavaScript API, Places API, Geocoding API . Anda dapat melihat tangkapan layar dengan API yang diperlukan.

RefererNotAllowedMapError

Kesalahan ini terjadi jika batasan perujuk API tidak disetel dengan benar. Misalnya, jika peta berfungsi di satu halaman situs web Anda dan tidak berfungsi di halaman lain, kemungkinan besar Anda menghadapi masalah yang sama.

Kabar baiknya adalah Anda telah menyiapkan dan memasukkan Kunci API dengan benar, dan hanya ada satu detail kecil yang perlu Anda perbaiki. Buka halaman Kredensial dan klik Kunci API Anda untuk mengeditnya. Di bagian Batasan aplikasi, pilih "Perujuk HTTP (situs web)". Kemudian isi batasan situs web seperti yang ditunjukkan di bawah ini tetapi ganti "contoh" dengan nama domain Anda dan klik tombol "Simpan". Mungkin diperlukan waktu hingga 5 menit agar pengaturan diterapkan.

Penting untuk menambahkan bagian “/*” di bagian akhir untuk mengizinkan permintaan API dari salah satu subhalaman situs web, sehingga Google Maps berfungsi di semua halaman situs web Anda.

Masih Tidak Berfungsi

• Jika Anda mengubah sesuatu dalam batasan Kunci API Anda – tunggu hingga 5 menit hingga setelan diterapkan;
• Jika masih ada kesalahan – periksa kembali konsol JavaScript untuk detail selengkapnya. Mungkin ada kesalahan setelah Anda menyelesaikan yang pertama;
• Anda juga dapat mencoba menghapus cache browser.

Kesimpulan

Itu dia! Mereka bilang kalau ada kemauan pasti ada jalan. Anda baru saja menambahkan fitur pencarian lokasi ke situs direktori Anda, dan sekarang pengguna Anda dapat mencari cantuman berdasarkan lokasi. Ini adalah fitur yang sangat penting untuk sebagian besar direktori. Meskipun mungkin terlihat seperti proses yang rumit untuk menambahkan Google Maps, itu sepadan dengan garamnya. Setelah Anda menambahkan pencarian lokasi ke situs web Anda, itu akan memengaruhi pengalaman pengguna secara positif. UX sangat penting untuk situs web apa pun karena merupakan salah satu landasan lalu lintas yang baik.

Seperti yang Anda lihat, Anda dapat mengintegrasikan Google Maps ke situs web Anda tanpa keterampilan pengkodean apa pun. Jika Anda belum memutuskan plugin apa yang akan digunakan untuk membangun situs direktori Anda, Anda dapat mempertimbangkan HivePress. Ini memungkinkan Anda untuk membuat direktori dan daftar situs web jenis apa pun. Juga, itu sudah termasuk ekstensi gratis yang memungkinkan pencarian berbasis lokasi dan beberapa fitur gratis lainnya yang mungkin berguna bagi Anda.

Selain itu, jangan ragu untuk memeriksa artikel kami:

• Plugin direktori WordPress gratis paling populer
• Tema direktori WordPress teratas
• Kesalahan yang harus dihindari saat membangun situs direktori WordPress