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 Menampilkan Google Maps di Website WordPress

5 min read

featured image cara menampilkan Google Maps

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

Tenang saja, di artikel ini kami akan menjelaskan cara memasang google maps di WordPress. Dengan cara embed Google Maps di website yang mudah, Anda akan mendapatkan banyak manfaat ketika menggunakannya.

Yuk, simak penjelasannya lebih lanjut!

Mengapa Perlu Menampilkan Google Maps di Website Anda?

Menambahkan Google Maps di website bisnis Anda memiliki beberapa manfaat, seperti:

1. Melengkapi Informasi Bisnis di Website

Website bisnis berguna untuk menunjukkan identitas online Anda. Namun, bayangkan kalau konsumen malah tidak bisa menemukan alamat atau nomor telepon bisnis Anda. 

Kalau itu terjadi, fungsi website untuk menampilkan  informasi bisnis tidak berjalan. Bahkan, upaya untuk menunjukkan kredibilitas bisnis secara online bisa gagal.

2. Membantu Konsumen Menemukan Lokasi Bisnis Anda

Menginformasikan alamat bisnis Anda saja tidaklah cukup. Anda perlu memudahkan konsumen menemukan lokasi usaha Anda. Nah, Google Maps adalah aplikasi yang 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 Maps terhubung ke website Anda, upaya menemukannya akan lebih mudah. Terutama, bagi pengguna perangkat mobile

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

3. Meningkatkan Waktu Konsumen di Website Anda

Dengan adanya Google Maps di website, pengunjung tidak perlu lagi membuka tab baru untuk sekadar mencari rute ke lokasi Anda. Itu artinya, waktu kunjungan mereka di website Anda semakin lama.

Hal ini dapat memberikan dampak positif. Sebab, lamanya waktu kunjungan website sebagai salah satu faktor ranking website 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: Panduan Lengkap Local SEO untuk Kesuksesan Bisnis Online Anda

Cara Menampilkan Google Maps di Website WordPress

Cara menampilkan Google Maps di website tidak serumit yang Anda bayangkan. Bisa  menggunakan plugin atau tanpa plugin. Mari mulai dengan cara memasang Google Maps di WordPress tanpa plugin yang lebih mudah.

Cara Memasang Google Maps di WordPress Tanpa Plugin

Bagi pengguna WordPress dengan editor Gutenberg, Anda bisa memanfaatkan fitur bawaan, Gutenberg block, untuk memasang Google Maps di WordPress. Langkah-langkahnya sebagai berikut:

  1. Temukan lokasi bisnis di Google Maps
  2. Klik tombol share
  3. Dapatkan link embed
  4. Buka halaman website di editor Gutenberg WordPress
  5. Tambahkan link embed Google Maps

Ini dia cara embed Google Maps tanpa plugin selengkapnya:

1. Temukan Lokasi Bisnis di Google Maps

Buka Google Maps melalui browser Anda. Kemudian ketikkan nama bisnis Anda di kolom pencarian.

contoh lokasi bisnis di Google Maps

2. Klik Tombol Share

Pilih tombol Share yang berada di atas alamat bisnis Anda.

tombol share lokasi Google Maps

3. Dapatkan Link Embed

Klik tab Embed a map. Di sini, Anda akan menemukan link embed lokasi. Klik Copy HTML untuk menyalin link tersebut.

cara mendapatkan link embed Google Maps

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.

mengatur ukuran embed Google Maps sebagai bagian cara embed Google Maps

4. Buka Halaman Website di Editor Gutenberg WordPress

Setelah mendapatkan link embed Google Maps, login ke WordPress. Selanjutnya, 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.

menu edit halaman WordPress

5. Tambahkan Link Embed Google Maps

Anda akan masuk ke halaman editor Homepage. Kemudian, tentukan letak Google Maps yang diinginkan. 

Selanjutnya, klik tombol + dan cari menu custom HTML, atau lakukan pencarian. Klik blok tersebut untuk menambahkannya ke halaman.

mencari blok custom HTML untuk cara embed Google Maps

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:

contoh Google Maps di website

Jika sudah, jangan lupa simpan perubahan di halaman tersebut.

Cara Memasang Google Maps di WordPress dengan Plugin

Selain dengan cara embed, cara memasang Google Maps di WordPress juga bisa menggunakan plugin. Keuntungannya:

  • 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 yang bisa Anda gunakan. Untuk panduan ini, kami menggunakan Easy Google Maps yang pengaturannya mudah. Langkahnya adalah:

  1. Install dan aktifkan plugin
  2. Buat peta
  3. Pasang peta di halaman website

Berikut ini cara lengkapnya:

1. Install dan Aktifkan Plugin

Untuk menginstal Easy Google Maps, klik Plugins > Add New di sidebar. Kemudian, ketikkan Easy Google Maps untuk mencari plugin tersebut. Kalau sudah, klik Install dan Activate.

2. Buat Peta

Anda perlu membuat peta dulu sebelum bisa menambahkannya ke halaman website. Caranya, klik Easy Google Maps > Add Map di sidebar WordPress.

menu untuk membuat peta dengan plugin Easy Google Maps

Di halaman pembuatan peta, ada berbagai pengaturan yang bisa Anda ubah sesuai kebutuhan, seperti ukuran dan tema. Selain itu, ada juga pengaturan 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.

kolom map name di plugin Easy Google Maps

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

kolom map center di plugin Easy Google Maps

Di kolom ini, masukkan alamat bisnis Anda yang terdaftar di Google Maps dan koordinatnya. Untuk mendapatkan koordinat di Google Maps, Anda tinggal klik kanan di lokasi pada peta. Koordinat lokasi Anda akan muncul seperti di bawah ini:

menampilkan koordinat di Google Maps

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

tombol save map di plugin Easy Google Maps

3. Pasang Peta di Halaman Website

Untuk memasang peta yang Anda buat, Anda butuh shortcode-nya. Cara mendapatkannya, klik Easy Google Maps > All Maps dan klik ikon pensil seperti yang ditunjuk di gambar berikut ini:

tombol edit peta di plugin Easy Google Maps

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

shortcode Easy Google Maps

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

blok shortcode WordPress

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

Google Maps tidak bisa ditampilkan

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

Untuk mendapatkan API tersebut, ikuti langkahnya di bagian selanjutnya.

Cara Mendapatkan Google Maps API

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

Nah, berikut ini adalah langkah-langkah untuk mendapatkannya:

1. Akses Google Cloud Platform Console

Log in ke akun Google Anda, lalu akses Google Cloud Platform Console.

2. Pilih Negara

Pada pop-up yang muncul, pilih negara Anda dan klik checkbox untuk menyetujui ketentuan penggunaan Google Cloud Platform. Kalau sudah, klik Agree and continue.

menyetujui ketentuan penggunaan Google Cloud Platform

3. Aktifkan Free Trial Google Cloud Platform

Lewati langkah ini jika akun Google Anda merupakan akun pribadi (tidak dibuat menggunakan domain perusahaan).

Caranya, klik tombol Activate di pojok kanan atas halaman.

tombol aktivasi trial Google Cloud Platform

Di halaman selanjutnya, pilih negara, tentukan kategori bisnis Anda, dan klik checkbox ketentuan penggunaan. Klik continue untuk lanjut.

mengisi informasi akun Google Cloud Platform

Masukkan nomor telepon Anda. Nomor ini akan digunakan Google untuk mengirimkan kode verifikasi.

verifikasi identitas akun Google Cloud Platform melalui sms

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.

membuat akun pembayaran Google Cloud Platform

4. Buat API

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

menu Maps Static API

Di halaman selanjutnya, klik Enable.

mengaktifkan Maps Static API

Kemudian, klik menu Credentials di sidebar.

menu credentials Google Maps API

Klik Create Credentials.

menu create credentials Google Maps API

Pilih API Key.

membuat API key Google Maps

Akan muncul pop-up berisi API Google Maps. Salin API tersebut untuk digunakan di plugin.

contoh API key Google Maps

5. Pasang API di Plugin

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

kolom API key Easy Google Maps

Jangan lupa klik tombol Save setelah memasukkan kode dengan benar. 

Terapkan Cara Menampilkan Google Maps di Website Anda!

Demikian cara menampilkan Google Maps di website. Tidak sulit, bukan?

Jika ingin memasang peta dengan mudah, Anda bisa melakukan embed link dari Google Maps ke halaman website dengan blok custom HTML WordPress.

Namun, kalau ingin mengatur tampilan peta, 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!

ebook fitur wajib 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.