Cara Menambahkan Pencari Lokasi Toko Google Maps di WordPress

Ingin menambahkan pencari toko Google Maps ke WordPress? Pencari lokasi toko adalah peta yang menunjukkan lokasi bisnis Anda.

Memungkinkan pengguna menemukan lokasi di peta, mendapatkan petunjuk arah mengemudi, atau berbagi lokasi dengan teman. Menambahkan pencari toko ke situs web bisnis Anda atau bahkan toko online membantu Anda langsung mendapatkan kepercayaan dari pengguna Anda.

Pada artikel ini, kami akan menunjukkan cara menambahkan pencari toko Google Maps ke WordPress dengan mudah.

Google Maps memperkenalkan API berbayar untuk menampilkan peta di halaman web. Mereka masih menawarkan opsi gratis terbatas untuk menyematkan peta Google di halaman web kecil.

Sebagian besar plugin Google Maps untuk WordPress menggunakan Google API untuk mengambil dan menampilkan peta. Jika Anda ingin menggunakan plugin Google Maps, Anda harus mendaftar ke platform Google API dan mengaktifkan opsi pembayaran.

Ini adalah layanan bayar sesuai pemakaian, yang berarti Anda akan dikenakan biaya berdasarkan jumlah panggilan API yang dilakukan dari situs Anda.

Kami akan menunjukkan kepada Anda metode gratis dan berbayar dengan kelebihan dan kekurangannya, kemudian Anda dapat memilih metode yang paling sesuai dengan kebutuhan Anda.

metode 1. Tambahkan Google Maps ke situs web Anda secara gratis

Cara ini mudah dan gratis. Kelemahannya adalah Anda tidak dapat menampilkan banyak toko dalam satu peta.

Kami menyarankan pengguna yang hanya ingin menambahkan satu lokasi toko Google Maps di situs web mereka.

Pertama, Anda harus mengunjungi situs web Google Maps di komputer Anda. Kemudian masukkan alamat toko Anda di kolom pencarian dan Google Maps akan menampilkannya di peta dengan penanda yang disematkan di peta.

Pastikan untuk menempatkan penanda pada posisi yang benar. Anda dapat memilih tingkat zoom dengan mengklik tombol zoom. Ketika Anda puas dengan tingkat zoom, Anda harus mengklik tombol bagikan di kolom kiri.

Sebuah pop-up akan muncul di mana Anda harus beralih ke tab “Sematkan Peta”. Anda sekarang akan melihat lokasi pencarian Anda di peta dengan kode HTML.

Klik tautan Salin HTML untuk mendapatkan kode sematan.

Sekarang pergi melalui area admin situs WordPress Anda. Setelah berada di area admin, lanjutkan dan edit postingan atau halaman tempat Anda ingin menampilkan peta lokasi toko.

Biasanya, pengguna menambahkan peta lokasi toko ke halaman formulir kontak mereka dengan nomor telepon dan jam buka.

Pada layar pengeditan berikutnya, Anda harus menambahkan blok HTML khusus.

Di area teks blok HTML khusus, Anda harus menempelkan kode yang Anda salin dari Google Maps.

Anda sekarang dapat beralih ke tab pratinjau untuk melihat Google Maps yang disematkan di halaman Anda. Ini akan menunjukkan lokasi toko Anda yang ditandai di peta dengan tautan ke alamat atau untuk menyimpan lokasi.

metode 2. Tambahkan pencari toko Google Maps menggunakan plugin WordPress

Cara ini disarankan bagi pengguna yang ingin menampilkan beberapa lokasi toko di Google maps.

Hal pertama yang harus dilakukan adalah menginstal dan mengaktifkan plugin WP Store Locator. Untuk detail lebih lanjut, lihat panduan langkah demi langkah kami tentang cara menginstal plugin WordPress.

Ini adalah plugin Google Maps gratis yang memungkinkan Anda membuat peta khusus dengan beberapa lokasi toko dan bidang khusus.

Kelemahan dari metode ini adalah Anda harus menambahkan kunci API. Anda harus memberikan informasi pembayaran untuk menggunakan kunci API. Untuk harga dan informasi lainnya, kunjungi situs web Google Maps Platform.

Selesai, mari kita mulai.

Dia lulus 1. Hasilkan Google Maps API Key

Untuk menggunakan plugin WP Store Locator, Anda perlu membuat dua kunci API. Yang pertama disebut kunci API browser dan yang kedua disebut kunci server.

Mari kita mulai dengan kunci browser terlebih dahulu. Klik tautan ini di Google Developer Console dan Anda akan dibawa ke situs web Google API dengan semua API yang diperlukan diaktifkan.

Anda harus membuat proyek baru dan memberinya nama untuk membantu Anda mengidentifikasinya. Maka Anda harus menunggu beberapa saat sementara konsol membuat proyek untuk Anda.

Anda kemudian akan diarahkan ke halaman konfigurasi kunci API. Anda harus memberikan judul untuk kunci API Anda sehingga Anda dapat dengan mudah mengidentifikasinya sebagai kunci API browser untuk proyek Google Maps Anda.

Selanjutnya, Anda harus mengatur “Pembatasan Aplikasi” di bawah “Referensi HTTP”. Di bawah itu, Anda harus mengatur bidang “Terima permintaan dari” pada nama domain Anda dalam format berikut.

https://contoh.com/*
https://*.example.com/* (jika Anda menggunakan subdomain)

Terakhir, klik tombol “Buat”. Konsol sekarang akan menyimpan pengaturan Anda dan menunjukkan kepada Anda kunci browser. Anda harus menyalin dan menempelkan kunci ini ke editor teks, Anda akan membutuhkannya nanti.

Selanjutnya, Anda harus membuat kunci API server. Klik tautan ini di Google Developer Console dan itu akan membawa Anda langsung ke konsol dengan API yang dipilih diaktifkan.

Anda akan melihat halaman pembuatan proyek lagi. Namun, karena Anda telah membuat proyek, Anda dapat mengeklik menu tarik-turun dan memilih proyek Anda.

Anda kemudian akan diarahkan ke halaman konfigurasi API. Berikan nama untuk kunci API ini untuk membantu Anda mengenalinya sebagai kunci server.

Di bagian “Pembatasan Aplikasi”, Anda harus memilih Alamat IP. Kami pada dasarnya memberi tahu Google untuk hanya menerima permintaan server yang berasal dari alamat IP tertentu.

Sekarang Anda perlu meminta penyedia hosting WordPress Anda untuk memberi tahu Anda kisaran IP yang digunakan oleh akun hosting Anda. Ini akan memiliki format berikut:

172.16.0.0/12

Anda kemudian perlu mengklik tombol “Hasilkan” untuk menyimpan pengaturan Anda dan menyalin kunci API dari server.

Dia lulus 2. Menyiapkan plugin WP Store Locator

Setelah Anda membuat kunci API, Anda harus mengunjungi Pencari toko » Pengaturan halaman untuk mengkonfigurasi plugin.

Masukkan browser Google Maps dan kunci API server yang Anda buat sebelumnya. Selanjutnya, pilih bahasa dan wilayah Peta, lalu klik tombol Simpan Perubahan untuk menyimpan pengaturan Anda.

Sekarang Anda perlu menggulir ke bawah halaman pengaturan ke bagian “Peta” dan memasukkan titik awal untuk peta. Titik awal ini dapat berupa kota atau negara, sehingga pengguna dapat melihat bookmark yang terletak di lokasi yang berbeda.

Ada banyak opsi lain di halaman pengaturan termasuk gaya peta, tingkat zoom default, jenis peta, radius pencarian, negara, dll. Anda dapat meninjau dan menyesuaikannya sesuai dengan kebutuhan Anda.

Setelah selesai, saatnya menambahkan lokasi.

Dia lulus 3. Tambahkan lokasi toko

Pergi Pencari toko »Toko baru halaman untuk menambahkan lokasi pertama Anda. Halaman Toko baru akan terlihat seperti posting default atau editor halaman di WordPress.

Berikan judul untuk toko Anda, lalu gulir ke bawah ke bagian “Detail toko”. Dari sini, Anda harus memasukkan alamat toko Anda.

Anda akan melihat peta di kolom kanan, tetapi tidak otomatis memperbarui ke alamat yang Anda masukkan. Anda harus mengklik tombol Publikasikan untuk menyimpan lokasi Anda. Kemudian segarkan halaman dan peta akan mengarah ke alamat yang Anda berikan.

Sekarang ulangi proses untuk menambahkan lokasi toko lainnya. Anda dapat menambahkan sebanyak mungkin lokasi toko yang Anda inginkan.

Dia lulus 4. Tambahkan peta pencari lokasi toko di WordPress

Untuk menampilkan pencari toko Anda di situs WordPress, cukup buat halaman baru atau edit yang sudah ada di mana Anda ingin menampilkan peta.

Pada layar edit terbitkan, Anda harus menambahkan blok kode ringkas ke area edit terbitkan Anda. Kemudian tambahkan [wpls] kode pendek di dalamnya.

Sekarang Anda dapat menyimpan atau memublikasikan halaman Anda dan mengeklik tombol pratinjau untuk melihat pencari toko Google Maps.

Ini akan menampilkan penanda peta Anda untuk setiap lokasi toko dan memulai peta dari titik awal pilihan Anda. Misalnya, pada peta ini berfokus pada kota West Palm Beach dan menunjukkan dua lokasi toko di peta.

Itu saja yang kami harap artikel ini membantu Anda mempelajari cara menambahkan pencari toko Google Maps ke WordPress. Anda mungkin juga ingin melihat daftar alat Google gratis kami yang harus digunakan setiap pemilik situs web.

Jika Anda menyukai artikel ini, berlangganan saluran kami YouTube untuk menonton video tutorial WordPress. Anda juga dapat menemukan kami di Twitter dan Facebook.