Rumahweb Journal
Cara menampilkan Google Maps di WordPress

Cara Menampilkan Google Maps di WordPress

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

  1. Buka google maps, cari lokasi bisnis Anda
  2. Klik share
embed lokasi Gmaps - Cara menampilkan Google Maps di WordPress
  1. 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.

embed lokasi Gmaps - Cara menampilkan Google Maps di WordPress
  1. Login ke dashboard WordPress lalu klik Edit pages yang akan ditambahkan peta lokasi bisnis. Contoh dipanduan ini di page Kunjungi Kami.
Edit pages untuk embed Gmaps - Cara menampilkan Google Maps di WordPress
  1. Klik Add Block
Edit pages untuk embed Gmaps - Cara menampilkan Google Maps di WordPress
  1. Cari dan pilih custom HTML
Edit pages untuk embed Gmaps - Cara menampilkan Google Maps di WordPress
  1. Pada kotak yang muncul, paste link hasil embed dari Google Maps sebelumnya.
  2. Tekan Publish untuk melihat hasilnya
Edit pages untuk embed Gmaps - Cara menampilkan Google Maps di WordPress

Berikut tampilan maps hasil dari embed dari Google Maps.

pages hasil  embed Gmaps - Cara menampilkan Google Maps di WordPress

2. Menambahkan Maps dengan Plugin Elementor

  1. Login ke wp-admin Anda > klik menu page > klik Edit pages yang akan digunakan untuk menampilkan maps. Contoh dipanduan ini di page homeku.
Edit pages elementor gmaps - Cara menampilkan Google Maps di WordPress
  1. Buat section baru untuk meletakkan gambar peta.
  2. Cari dan tarik widgets maps ke section yang sudah ditentukan
Edit pages elementor gmaps - Cara menampilkan Google Maps di WordPress
  1. Cari lokasi bisnis Anda dikolom Location.
    Pada widget Google Maps Anda juga dapat menentukan ukuran peta, tinggi peta, efek transisi, posisi, background.
  2. Setelah lokasi sesuai, klik Update untuk melihat hasilnya.
contoh maps yang berhasil dibuat

Berikut adalah tampilan website dengan Maps yang sudah dibuat.

pages elementor gmaps - Cara menampilkan Google Maps di WordPress

3. Menambahkan Maps dengan Plugin Easy Google Maps

  1. Login ke dashboard WordPress Anda. Setelah itu klik menu Plugin > add plugin.
  2. Cari google maps, pilih plugin Easy Google Maps lalu install
install plugin easy google maps - Cara menampilkan Google Maps di WordPress
  1. Klik activate plugin Easy Google Maps
plugin easy google maps - Cara menampilkan Google Maps di WordPress
  1. Klik menu Easy Google Maps > Klik Add Map
seting plugin easy google maps - Cara menampilkan Google Maps di WordPress
  1. Tentukan nama Map yang akan dibuat.
seting plugin easy google maps - Cara menampilkan Google Maps di WordPress
  1. Isi bagian map center sesuai lokasi bisnis Anda. Untuk penentuan Latitude dan Longitude dengan cara klik kanan lokasi bisnis Anda di Google Maps.
seting plugin easy google maps - Cara menampilkan Google Maps di WordPress
  1. Klik Save Map
seting plugin easy google maps - Cara menampilkan Google Maps di WordPress
  1. Klik tab Marker untuk menambahkan tanda/ikon di Maps website Anda. Isikan Marker Name.
  2. Tentukan marker name yang akan ditampilkan pada website Anda. Anda juga bisa mengubah jenis icon marker.
seting plugin easy google maps - Cara menampilkan Google Maps di WordPress
  1. Isikan Address, Latitude dan Longitude
seting plugin easy google maps - Cara menampilkan Google Maps di WordPress
  1. Jika sudah selesai klik Save Marker. Dibawah Save marker akan menampilkan marker yang telah dibuat.
seting plugin easy google maps - Cara menampilkan Google Maps di WordPress
  1. Lanjutkan dengan klik menu Easy Google Maps > All Maps
seting plugin easy google maps - Cara menampilkan Google Maps di WordPress
  1. Klik edit sesuai nama Map yang sudah dibuat
seting plugin easy google maps - Cara menampilkan Google Maps di WordPress
  1. Copy Map Shortcode
seting plugin easy google maps - Cara menampilkan Google Maps di WordPress
  1. Edit pages yang akan digunakan untuk menampilkan peta. Contoh dipanduan ini di page home
seting plugin easy google maps - Cara menampilkan Google Maps di WordPress
  1. Buat block baru shortcode.
seting plugin easy google maps - Cara menampilkan Google Maps di WordPress
  1. Paste Map Shortcode yang sudah dicopy sebelumnya.
  2. Klik publish untuk melihat hasilnya.
seting plugin easy google maps - Cara menampilkan Google Maps di WordPress

Berikut adalah tampilan website dengan Maps yang sudah dibuat.

seting plugin easy google maps - Cara menampilkan Google Maps di WordPress

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

Cara mendapatkan Google Maps API - Cara menampilkan Google Maps di WordPress

3. Tentukan Negara, jenis ogranisasi, dan ceklis Terms of Services

4. Klik Continue

Cara mendapatkan Google Maps API - Cara menampilkan Google Maps di WordPress

5. Isi bagian Customer Info sesuai data yang Anda miliki

Cara mendapatkan Google Maps API - Cara menampilkan Google Maps di WordPress

6. Klik Start My Free Trial

Cara mendapatkan Google Maps API - Cara menampilkan Google Maps di WordPress

7. Kembali ke dashboard Google Maps di Google Cloud Platform, lalu klik Maps Static API

Cara mendapatkan Google Maps API - Cara menampilkan Google Maps di WordPress

8. Klik Enable

Cara mendapatkan Google Maps API - Cara menampilkan Google Maps di WordPress

9. Klik Overview lalu pilih All Google Maps Platform APIs

10. Klik More APIS

Cara mendapatkan Google Maps API - Cara menampilkan Google Maps di WordPress

11. Cari dan klik Maps Embed API

Cara mendapatkan Google Maps API - Cara menampilkan Google Maps di WordPress

12. Klik Enable

Cara mendapatkan Google Maps API - Cara menampilkan Google Maps di WordPress

13. Cari dan klik Maps Javascript API

Cara mendapatkan Google Maps API - Cara menampilkan Google Maps di WordPress

14. Klik Enable

Cara mendapatkan Google Maps API - Cara menampilkan Google Maps di WordPress

15. Pada Overview Klik menu Credentials

Cara mendapatkan Google Maps API - Cara menampilkan Google Maps di WordPress

16. Klik Create credentials, pilih API key

Cara mendapatkan Google Maps API - Cara menampilkan Google Maps di WordPress

17. Pada tampilan berikut klik Close

Cara mendapatkan Google Maps API - Cara menampilkan Google Maps di WordPress

18. Klik Edit API Key yang sudah dibuat

Cara mendapatkan Google Maps API - Cara menampilkan Google Maps di WordPress

19. Ceklis Restrict Key lalu Select APIS

Cara mendapatkan Google Maps API - Cara menampilkan Google Maps di WordPress

20. Ceklis Maps Embed API, Maps Javascript API, Maps Static API lalu klik OK

Cara mendapatkan Google Maps API - Cara menampilkan Google Maps di WordPress

21. Klik Save

Cara mendapatkan Google Maps API - Cara menampilkan Google Maps di WordPress

22. Salin API Key yang sudah terbuat ke plugin maps yang digunakan.

Cara mendapatkan Google Maps API - Cara menampilkan Google Maps di WordPress

Cara Memasang MAPS API di Plugin Easy Google Maps

Setelah berhasil mendapatkan Maps API, lanjutkan pemasangan API di Plugin yang digunakan.

  1. Klik menu Plugin Easy Google Maps > Settings
memasang MAPS API di Plugin Easy Google Maps - Cara menampilkan Google Maps di WordPress
  1. Paste Maps API dari Google Cloud Platform dibagian User API Key. Lalu Klik Save.
memasang MAPS API di Plugin Easy Google Maps - Cara menampilkan Google Maps di WordPress

3. Akses kembali website yang terpasang maps. Berikut adalah tampilannya.

tampilan web maps dengan Easy Google Maps - Cara menampilkan Google Maps di WordPress

Demikian panduan cara menampilkan Google Maps di WordPress. Mudah kan cara membuatnya? Selamat mencoba!

Bermanfaatkah Artikel Ini?

Klik bintang 5 untuk rating!

Rating rata-rata 5 / 5. Vote count: 4

Belum ada vote hingga saat ini!

Kami mohon maaf artikel ini kurang berguna untuk Anda!

Mari kita perbaiki artikel ini!

Beri tahu kami bagaimana kami dapat meningkatkan artikel ini?

Cloud Hosting Terbaik Rumahweb

Wahyu Januari

satu dari bagian tim Teknis Rumahweb yang bisa membantu Kamu ! Salam kenal <3