Cara Menambahkan Pencari Lokasi Toko Google Maps di WordPress

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

Memungkinkan pengguna menemukannya di peta, mendapatkan petunjuk arah, atau berbagi lokasi dengan teman. Menambahkan influencer toko ke situs web bisnis Anda atau bahkan toko online membantu Anda mendapatkan kepercayaan pengguna secara langsung.

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

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 mengunduh dan melihat peta. Untuk 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 dari situs Anda.

Kami 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

Metode ini sederhana dan gratis. Kelemahannya adalah Anda tidak dapat menampilkan banyak toko dalam satu peta.

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

Pertama, Anda perlu 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 terpasang di peta.

Pastikan untuk menempatkan kursor di tempat yang tepat. Anda dapat memilih tingkat zoom dengan mengklik tombol zoom. Ketika Anda puas dengan tingkat zoom, Anda harus mengklik tombol split di kolom kiri.

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

Klik tautan Salin HTML untuk mendapatkan kode sematan.

Sekarang masuk ke area admin situs WordPress Anda. Setelah berada di area admin, lanjutkan dan edit posting atau halaman di mana Anda ingin melihat peta lokasi toko.

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

Pada layar edit berikut, Anda harus menambahkan blok HTML khusus.

Di area teks blok HTML khusus, Anda perlu 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 menampilkan lokasi toko yang Anda pilih di peta dengan tautan ke alamat atau untuk menyimpan lokasi.

metode 2. Tambahkan pencari toko Google Maps menggunakan plugin WordPress

Metode ini direkomendasikan untuk pengguna yang ingin melihat beberapa lokasi toko di Google Map.

Hal pertama yang harus dilakukan adalah menginstal dan mengaktifkan plugin WP Store Locator. Untuk informasi 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 memasukkan informasi pembayaran untuk menggunakan kunci API. Kunjungi situs web Google Maps Platform untuk mengetahui harga dan informasi lainnya.

Tentu, mari kita mulai.

Dia lulus 1. Hasilkan Google Maps API Key

Untuk menggunakan plugin WP Store Locator, Anda harus 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 Konsol Pengembang Google untuk membawa Anda ke situs web Google API dengan semua API yang diperlukan diaktifkan.

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

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

Maka Anda perlu mengatur “Pembatasan Aplikasi” di bawah “Informasi HTTP”. Selama waktu itu, Anda harus menyetel bidang “Terima permintaan dari” ke nama domain Anda dalam format berikut.

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

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

Maka Anda perlu membuat kunci API server. Klik tautan ini di Google Developer Console dan Anda akan dibawa langsung ke konsol dengan API yang dipilih diaktifkan.

Anda akan melihat halaman tentang membuat proyek lagi. Tetapi karena Anda sudah membuat proyek, Anda dapat mengklik menu tarik-turun dan memilih proyek Anda.

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

Di bagian “Pembatasan Program”, Anda harus memilih alamat IP. Pada prinsipnya, kami mengharuskan Google untuk hanya menerima permintaan server yang berasal dari alamat IP tertentu.

Sekarang Anda perlu menanyakan host web WordPress Anda untuk rentang IP yang digunakan oleh akun server Anda. Ini akan memiliki format berikut:

172.16.0.0/12

Kemudian Anda harus 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.

Masuk ke browser Google Maps dan API keys di server yang Anda buat tadi. Kemudian pilih bahasa dan wilayah Peta, lalu klik Simpan Perubahan untuk menyimpan pengaturan Anda.

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

Ada banyak opsi lain di halaman pengaturan termasuk gaya peta, tingkat zoom standar, 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 lokasi utama »Toko baru untuk menambahkan lokasi pertama Anda. Halaman Store baru akan terlihat seperti entri default atau editor halaman di WordPress.

Masukkan 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 diperbarui ke alamat yang Anda masukkan. Anda harus mengklik tombol Publikasikan untuk menyimpan lokasi Anda. Kemudian segarkan halaman sehingga peta mengarah ke alamat yang Anda masukkan.

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

Dia lulus 4. Tambahkan peta fasilitas toko di WordPress

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

Pada layar edit terbitkan, Anda harus menambahkan blok “Kode Pendek” ke area edit terbitkan Anda. Kemudian tambahkan (Wpl) kode tag di dalamnya.

Anda sekarang dapat menyimpan atau menerbitkan halaman Anda dan mengklik tombol pratinjau untuk melihat toko Google Maps beraksi.

Ini menampilkan penanda peta Anda untuk setiap lokasi toko dan memulai peta dari titik awal yang Anda inginkan. 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 lokasi 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.