Aldwin Nayoan Aldwin is a content writer at Niagahoster. Specializing in web hosting and WordPress, he is eager to help people uplevel their business on the internet. Apart from being a tech junkie, Aldwin likes fiction and photography.

Cara Menambahkan Google Maps di WordPress dengan Mudah

5 min read

featured image cara menampilkan Google Maps

Anda ingin tahu cara menambahkan Google Maps di WordPress? Jadi, konsumen tahu lokasi toko atau tempat usaha Anda dengan mudah?

Tenang saja, di artikel ini kami akan menjelaskan cara menampilkan Google Map di website. Dengan cara embed Google Map yang mudah, Anda akan mendapatkan banyak manfaat ketika menggunakannya.

Yuk, simak penjelasannya lebih lanjut!

Mengapa Anda Perlu Memasang Google Map di Website WordPress?

Cara memasukkan Google Map ke website Anda memiliki beberapa manfaat, seperti:

1. Melengkapi Informasi Bisnis di Website

Cara menambahkan Google Maps di WordPress berguna untuk menunjukkan identitas online Anda. Dengan begitu, konsumen bisa menemukan alamat dan nomor telepon toko fisik Anda.

Coba bayangkan jika Anda tidak menyematkan peta. Otomatis, fungsi website untuk menampilkan  informasi bisnis tidak berjalan. Bahkan, upaya untuk menunjukkan kredibilitas bisnis secara online bisa gagal.

2. Membantu Konsumen Menemukan Lokasi Toko Fisik Anda

Menginformasikan alamat bisnis Anda saja tidaklah cukup. Anda perlu memudahkan konsumen menemukan toko fisik Anda. Nah, cara memasang Google Map WordPress adalah opsi tepat untuk tujuan tersebut. 

Dengan jumlah pengguna aktif hingga 154 juta per bulan, semua orang akan memanfaatkan Maps untuk mencari lokasi tertentu. 

Nah, kalau informasi Google Map terhubung ke website Anda, upaya menemukannya akan lebih mudah. Terutama, bagi pengguna perangkat mobile

Setelah menemukan informasi lokasi lewat Google Maps di website toko online Anda, mereka akan mendapatkan rute menuju toko atau kantor usaha Anda.

3. Meningkatkan Waktu Konsumen di Website Anda

Dengan cara membuat Map di WordPress, pengunjung tidak perlu lagi membuka tab baru untuk sekadar mencari rute ke lokasi Anda. Itu artinya, waktu kunjungan mereka di website toko online Anda semakin lama.

Hal ini dapat memberikan dampak positif. Sebab, lamanya waktu kunjungan website sebagai salah satu faktor Google ranking di hasil pencarian.

Makin banyak konsumen memanfaatkan Google Maps di website Anda, makin besar kemungkinan peringkat website naik karena rata-rata waktu kunjungan yang lama.

Baca Juga: Local SEO

Cara Menambahkan Google Maps di WordPress

Cara menampilkan Google Map di website tidak serumit yang Anda bayangkan, kok. Anda bisa menggunakan plugin Google Maps WordPress maupun tanpa plugin.

Mari praktikkan kedua metode tersebut!

Cara Embed Google Map di Website Tanpa Plugin

Bagi pengguna WordPress dengan editor Gutenberg, Anda bisa memanfaatkan Gutenberg Block, sebagai cara memasang Google Map ke website. Urutan langkahnya adalah:

  1. Cari Lokasi Bisnis di Google Maps
  2. Klik Tombol Share
  3. Salin Link Embed a Map
  4. Buka Halaman Web via Editor Gutenberg
  5. Tempel Link Embed Google Maps

Mulai dari cara embed Google Map langkah pertama, yuk!

1. Cari Lokasi Bisnis di Google Maps

Cara memasang Google Maps WordPress tanpa plugin dimulai dengan membuka Google Maps lewat browser Anda. Lalu, ketikkan nama bisnis Anda di kolom pencarian.

1 cara menambahkan google maps di wordpress buka map

 

2. Klik Tombol Share

Cara menambahkan Google Maps di WordPress langkah selanjutnya yaitu pilih tombol Share di atas alamat bisnis Anda.

2 cara menampilkan google map di website klik share

 

Cara membuat map di WordPress berlanjut dengan klik tab Embed a map. Di sini, Anda akan menemukan kode embed lokasi. Klik Copy HTML untuk menyalin link tersebut.

3 cara memasang google map ke website copy html

Anda juga bisa mengatur ukuran peta yang nantinya ditampilkan di website terlebih dahulu. Caranya, klik menu drop-down bertuliskan Medium di sebelah kiri link embed.

4 cara embed google map custom size

 

4. Buka Halaman Web via Editor Gutenberg

Cara memasang Google Maps selanjutnya yaitu login ke dashboard WordPress. Kemudian, buka halaman website yang ingin digunakan untuk memasang peta lokasi bisnis.

Caranya, klik menu Pages di sidebar WordPress untuk menampilkan daftar halaman di website Anda. Kemudian, arahkan kursor ke nama halaman yang diinginkan dan klik Edit. Pada contoh kali ini, kamu akan melakukan edit pada halaman Homepage.

5 cara membuat map di wordpress edit homepage

 

Cara memasukkan Google Map ke website langkah nomor lima yaitu menempelkan link embed peta. 

Di editor Gutenberg, klik tombol + dan cari menu Custom HTML, atau lakukan pencarian. Klik blok tersebut untuk menambahkannya ke halaman.

6 cara memasukkan google map ke website custom html

Pada kolom yang muncul, masukkan link embed yang sudah Anda salin. 

Peta lokasi bisnis Anda di Google Maps langsung muncul di halaman website Anda. Contohnya seperti berikut ini:

7 cara menambahkan google maps di wordpress berhasil

Terakhir, jangan lupa simpan perubahan di halaman tersebut.

Bagaimana, mudah bukan cara membuat map di WordPress tanpa plugin?

Cara Menampilkan Google Map di Website dengan Plugin Google Maps

Selain cara embed Google Map, Anda juga bisa menjajal cara memasang Google Maps di WordPress menggunakan plugin. Nah, keuntungannya yaitu:

  • Bisa mengatur tampilan peta, seperti ukuran, warna, dan bentuk pointer-nya
  • Bisa menampilkan peta di sidebar atau footer menggunakan shortcode, sehingga bisa muncul di semua halaman website

Ada beberapa plugin Google Maps WordPress yang bisa Anda gunakan. Untuk panduan ini, kami menggunakan Easy Google Maps yang pengaturannya mudah. Berikut langkahnya:

  1. Install Plugin Easy Google Maps
  2. Buat dan Atur Peta
  3. Sematkan Peta di Halaman Situs

Mulai dari cara menambahkan Google Maps di WordPress langkah pertama yuk!

1. Install Plugin Easy Google Maps

Cara memasang Google Maps langkah yang pertama yakni install dan aktifkan plugin Easy Google Maps. Caranya adalah sebagai berikut:

Pertama, masuk ke dashboard WordPress. Kemudian, klik Plugins > Add New di sidebar.

8 add new plugin

Jika sudah, ketikkan Easy Google Maps pada kolom pencarian untuk mencari plugin tersebut.

9 cari easy google maps

Setelah itu, klik Install pada plugin tersebut. Anda tinggal menunggu proses instalasi lalu klik Activate.

10 cara menampilkan google map di website install plugin

2. Buat dan Atur Peta

Anda perlu cara membuat map di WordPress terlebih dahulu sebelum bisa menambahkannya ke halaman web. Caranya, klik Easy Google Maps > Add Map di sidebar WordPress.

11 cara memasang google map ke website add map

Di halaman pembuatan peta, ada berbagai fitur yang bisa Anda ubah sesuai kebutuhan, seperti ukuran dan tema.

Selain itu, ada juga opsi yang bisa Anda tampilkan atau sembunyikan, seperti tombol Zoom dan Street View.

Yang penting, pastikan Anda isi dulu kolom Map Name untuk memberi nama peta yang Anda buat. Ini penting karena Easy Google Maps memungkinkan Anda membuat lebih dari satu peta. Dengan menamai masing-masing peta, Anda tidak akan keliru antara satu peta dengan yang lain.

12 cara embed google map nama peta

Pastikan juga Anda mengisi kolom Map Center. Ini adalah lokasi yang akan ditampilkan di peta Anda, misalnya lokasi toko atau kantor Anda.

13 cara membuat map di wordpress map center

Di kolom ini, masukkan alamat bisnis Anda yang terdaftar di Google Map dan koordinatnya.

Untuk mendapatkan koordinat di Google Maps, Anda tinggal situs resminya. Kemudian, klik kanan di lokasi pada peta. Koordinat lokasi Anda akan muncul seperti di bawah ini:

14 cara memasukkan google map ke website longitude

Jika sudah menentukan nama peta, map center, dan pengaturan tampilan, klik tombol Save Map untuk menyimpan peta.

15 save map

 

3. Sematkan Peta di Halaman Situs

Untuk bisa melanjutkan cara memasukkan Google Map ke website, Anda butuh shortcode peta. Cara mendapatkannya, klik Easy Google Maps > All Maps dan klik ikon pensil seperti yang ditunjuk di gambar berikut ini:

16 sematkan peta

Shortcode peta Anda ada di pojok kanan atas halaman. Salin kode tersebut.

17 cara menambahkan google maps di website shortcode

Selanjutnya, buka halaman yang ingin Anda beri peta di editor Gutenberg WordPress. Lalu, tambahkan blok Shortcode.

18 cara menampilkan google map di website shortcode

Tempelkan shortcode peta ke kolom yang tersedia dan simpan perubahan halaman Anda. Peta yang tadi Anda buat akan muncul.

19 cara memasang google map ke website masih error

Ketika muncul pesan error “This page can’t load Google Maps correctly”,  jangan dulu khawatir. Semua plugin Google Map memerlukan Google Maps API agar bisa menampilkan peta dari aplikasi tersebut. 

Untuk mendapatkan API agar bisa menyelesaikan cara menambahkan Google Maps di WordPress, ikuti langkahnya di bagian selanjutnya.

Cara Mendapatkan Google Maps API

Google Maps API adalah kode yang digunakan Google Maps untuk berhubungan dengan plugin Google Maps WordPress. Google Maps API bisa digunakan gratis selama Anda hanya menggunakannya untuk menampilkan map sederhana seperti contoh di atas.

Berikut ini langkah-langkah untuk mendapatkan API Key Google:

  1. Akses Google Cloud Platform Console
  2. Pilih Negara Anda
  3. Aktifkan Free Trial Google Cloud Platform (Opsional)
  4. Buat API untuk Peta
  5. Tambahkan API di Plugin Easy Google Maps

1. Akses Google Cloud Platform Console

Cara mendapatkan API Key Google untuk memasang Google Maps adalah akses Google Cloud Platform Console menggunakan akun Google Anda.

2. Pilih Negara Anda

Pada pop-up yang muncul, pilih negara Anda pada kolom Country lalu klik Checkbox untuk menyetujui ketentuan penggunaan Google Cloud Platform. Kalau sudah, klik AGREE AND CONTINUE.

20 cara embed google map google cloud platform

 

3. Aktifkan Free Trial Google Cloud Platform (Opsional)

Jika akun Google Anda merupakan akun pribadi, Anda bisa melewati cara menampilkan Google map di website langkah langkah yang satu ini.

Namun jika Anda mendaftar Google Cloud Platform, Anda bisa mengaktifkan free trial lewat langkah mudah berikut:

Caranya, klik tombol Activate di pojok kanan atas halaman.

21 cara membuat map di wordpress activate

Di halaman selanjutnya, pilih Country, tentukan Business Category, dan klik Checkbox ketentuan penggunaan. Jika sudah, klik Continue.

22 cara memasukkan google map ke website step 1

Masukkan nomor telepon Anda. Nomor ini akan digunakan Google untuk mengirimkan kode verifikasi. Kemudian, klik SEND CODE.

23 step 2

Selanjutnya, Anda diminta untuk membuat akun pembayaran Google Cloud Platform. Meski demikian, Anda tidak akan perlu membayar kecuali meng-upgrade ke akun premium. Jadi, lengkapi formulir dan klik Start My Free Trial.

24 step 3

 

4. Buat API untuk Peta

Cara memasang Google Map ke website berlanjut. Di sini, silakan kembali ke dashboard Google Maps di Google Cloud Platform, lalu klik Maps Static API.

25 cara menambahkan google maps di wordpress maps static api

Di halaman selanjutnya, klik Enable.

26 cara menampilkan google map di website enable

Kemudian, klik fitur Credentials di sidebar.

27 cara memasang google map ke website credentials

Klik CREATE CREDENTIALS.

28 cara embed google map create credentials

Lalu, pilih API Key.

29 cara membuat map di wordpress api key

Akan muncul pop-up berisi API Google Maps. Salin API pada kolom Your API key untuk digunakan di plugin Easy Google Maps.

30 cara memasukkan google map ke website api key created

5. Tambahkan API di Plugin Easy Google Maps

Sekarang kembali ke dashboard WordPress Anda. Klik Easy Google Maps > Settings di sidebar. Kemudian, masukkan API key ke kolom User API key.

31 cara menambahkan google maps di wordpress memasukkan api

Terakhir, klik tombol Save setelah memasukkan kode dengan benar.

Sampai di sini, Anda telah berhasil mempraktikkan cara embed Google Map dengan dan tanpa plugin. Metode cara memasang Google Map ke website manakah yang lebih Anda suka? 

Praktikkan Cara Memasang Google Maps ke Website WordPress Anda!

Demikian cara menambahkan Google Maps di WordPress. Tidak sulit, bukan?

Jika ingin menjajal cara memasukkan Google Map ke website dengan mudah, Anda bisa menambahkan kode embed dari Google Map ke halaman website dengan blok custom HTML WordPress.

Namun, kalau ingin mencoba cara membuat map di WordPress yang lebih kaya fitur, gunakanlah plugin Google Maps. Namun, pastikan Anda sudah mendapatkan Google Maps API dari Google Cloud Platform.

Dengan cara embed Google Maps di website, pelanggan jadi tahu lokasi bisnis Anda tanpa perlu meninggalkan website dan membuka Google Maps terlebih dahulu.

Nah, selain Google Maps, fitur apalagi yang belum dimiliki website bisnis Anda? Supaya tahu, simak daftar fitur wajib toko online di ebook gratis kami dengan klik link di bawah!

32 banner ebook fitur toko online

Aldwin Nayoan Aldwin is a content writer at Niagahoster. Specializing in web hosting and WordPress, he is eager to help people uplevel their business on the internet. Apart from being a tech junkie, Aldwin likes fiction and photography.

Leave a Reply

Your email address will not be published. Required fields are marked *