Seperti yang kita ketahui, saat ini maps banyak ditemukan pada website dan di aplikasi toko online. Hal ini membuat maps menjadi salah satu hal yang penting dari sebuah website, terutama bagi website yang digunakan untuk bisnis. Karenanya, pada panduan ini kami akan berbagi cara menampilkan Google Maps di WordPress.
Dengan adanya maps atau peta lokasi toko anda di website, maka itu akan memudahkan customer untuk menemukan toko offline anda. Tidak hanya itu, maps juga akan meningkatkan kepercayaan customer anda karena mereka tahu bahwa toko oline anda exist.
Pada panduan ini kami akan menjelaskan pentingnya Maps dari Website dan cara memasang Maps di WordPress.
Pentingnya Maps Dari Website
Selain memudahkan customer dalam mengetahui lokasi, berikut alasan pentingnya maps dari sebuah website :
1. Meningkatkan kredibilitas bisnis Anda
Para customer tentu penasaran dengan lokasi dari suatu bisnis dan ingin memastikan kredibilitas dari bisnis tersebut. Dengan ditampilkannnya lokasi bisnis, customer akan merasa lebih yakin jika ingin melakukan transaksi dengan bisnis tersebut.
2. Mempermudah Konsumen Menemukan Lokasi Bisnis Anda
Pencantuman alamat bisnis/toko saja tidak cukup. Anda perlu membuat customer mudah dalam menemukan lokasi toko Anda terutama jika memiliki toko fisik.
Pastikan Anda memberi informasi lokasi yang tepat, sehingga customer bisa mengunjungi toko fisik Anda dengan cara memanfaatkan Google Maps. Google maps memungkinkan pembacanya dapat dengan mudah menuju titik lokasi yang akan dituju.
3. Meningkatkan waktu kunjungan di Website Anda
Dengan ditampilkannya Google Maps pada website, pengunjung menjadi lebih lama dalam mengakses website Anda. Hal ini karena pengunjung tidak perlu membuka tab baru untuk sekedar mencari lokasi bisnis Anda.
Semakin lamanya pengunjung mengakses web Anda, hal itu akan menguntungkan karena akan meningkatkan ranking website Anda dimesin pencarian.
Memasang Google Maps di WordPress
Pada panduan ini, kami akan menjelaskan cara memasang Google Maps di WordPress melalui 2 cara yaitu tanpa plugin dengan konsep embed, dan dengan plugin elementor. Berikut langkah-langkahnya :
1. Memasang Google Maps di WordPress tanpa Plugin
- Buka google maps, cari lokasi bisnis Anda
- Klik share
- Klik tab Embed a map
Pada bagian ini Anda dapat menemukan link embed lokasi. Klik COPY HTML untuk menyalin link tersebut. Anda juga bisa mengatur ukuran peta yang ditampilkan di website dengan cara klik menu drop-down bertuliskan Medium di sebelah kiri link embed.
- Login ke dashboard WordPress lalu klik Edit pages yang akan ditambahkan peta lokasi bisnis. Contoh dipanduan ini di page Kunjungi Kami.
- Klik Add Block
- Cari dan pilih custom HTML
- Pada kotak yang muncul, paste link hasil embed dari Google Maps sebelumnya.
- Tekan Publish untuk melihat hasilnya
Berikut tampilan maps hasil dari embed dari Google Maps.
2. Menambahkan Maps dengan Plugin Elementor
- Login ke wp-admin Anda > klik menu page > klik Edit pages yang akan digunakan untuk menampilkan maps. Contoh dipanduan ini di page homeku.
- Buat section baru untuk meletakkan gambar peta.
- Cari dan tarik widgets maps ke section yang sudah ditentukan
- Cari lokasi bisnis Anda dikolom Location.
Pada widget Google Maps Anda juga dapat menentukan ukuran peta, tinggi peta, efek transisi, posisi, background. - Setelah lokasi sesuai, klik Update untuk melihat hasilnya.
Berikut adalah tampilan website dengan Maps yang sudah dibuat.
3. Menambahkan Maps dengan Plugin Easy Google Maps
- Login ke dashboard WordPress Anda. Setelah itu klik menu Plugin > add plugin.
- Cari google maps, pilih plugin Easy Google Maps lalu install
- Klik activate plugin Easy Google Maps
- Klik menu Easy Google Maps > Klik Add Map
- Tentukan nama Map yang akan dibuat.
- Isi bagian map center sesuai lokasi bisnis Anda. Untuk penentuan Latitude dan Longitude dengan cara klik kanan lokasi bisnis Anda di Google Maps.
- Klik Save Map
- Klik tab Marker untuk menambahkan tanda/ikon di Maps website Anda. Isikan Marker Name.
- Tentukan marker name yang akan ditampilkan pada website Anda. Anda juga bisa mengubah jenis icon marker.
- Isikan Address, Latitude dan Longitude
- Jika sudah selesai klik Save Marker. Dibawah Save marker akan menampilkan marker yang telah dibuat.
- Lanjutkan dengan klik menu Easy Google Maps > All Maps
- Klik edit sesuai nama Map yang sudah dibuat
- Copy Map Shortcode
- Edit pages yang akan digunakan untuk menampilkan peta. Contoh dipanduan ini di page home
- Buat block baru shortcode.
- Paste Map Shortcode yang sudah dicopy sebelumnya.
- Klik publish untuk melihat hasilnya.
Berikut adalah tampilan website dengan Maps yang sudah dibuat.
Seperti yang terlihat, saat penggunaan Plugin Maps dijumpai Warning pada Maps “This page can’t load Google Maps correctly”. Solusi dari Warning tersebut adalah dengan menambahkan Google Maps API.
Cara Mendapatkan Google Maps API
Berikut kami informasikan langkah-langkah mendapatkan Google Maps API:
1. Login ke akun Google lalu akses Google Cloud Platform Console
2. Klik Activate untuk mengaktifkan Trial Google cloud platform
3. Tentukan Negara, jenis ogranisasi, dan ceklis Terms of Services
4. Klik Continue
5. Isi bagian Customer Info sesuai data yang Anda miliki
6. Klik Start My Free Trial
7. Kembali ke dashboard Google Maps di Google Cloud Platform, lalu klik Maps Static API
8. Klik Enable
9. Klik Overview lalu pilih All Google Maps Platform APIs
10. Klik More APIS
11. Cari dan klik Maps Embed API
12. Klik Enable
13. Cari dan klik Maps Javascript API
14. Klik Enable
15. Pada Overview Klik menu Credentials
16. Klik Create credentials, pilih API key
17. Pada tampilan berikut klik Close
18. Klik Edit API Key yang sudah dibuat
19. Ceklis Restrict Key lalu Select APIS
20. Ceklis Maps Embed API, Maps Javascript API, Maps Static API lalu klik OK
21. Klik Save
22. Salin API Key yang sudah terbuat ke plugin maps yang digunakan.
Cara Memasang MAPS API di Plugin Easy Google Maps
Setelah berhasil mendapatkan Maps API, lanjutkan pemasangan API di Plugin yang digunakan.
- Klik menu Plugin Easy Google Maps > Settings
- Paste Maps API dari Google Cloud Platform dibagian User API Key. Lalu Klik Save.
3. Akses kembali website yang terpasang maps. Berikut adalah tampilannya.
Demikian panduan cara menampilkan Google Maps di WordPress. Mudah kan cara membuatnya? Selamat mencoba!