Cara Menambahkan Peta Google Maps di WordPress: 5 Metode Biar Pelanggan Mudah Menemukan Toko

Pernah kebayang skenario ini? Calon pembeli sudah tertarik dengan produk Anda, lalu bertanya, “Lokasinya di mana, Kak?” Anda kirim alamat lengkap, tapi ia tetap muter-muter di sekitar gang dan akhirnya menyerah — lalu beli di kompetitor yang lokasinya lebih gampang ditemukan. Setiap pelanggan yang tersesat seperti itu adalah orderan yang hilang.

Solusinya sederhana: pasang peta Google Maps langsung di website WordPress Anda. Pengunjung cukup mengetuk petanya, aplikasi Google Maps di HP mereka langsung terbuka lengkap dengan rute menuju toko Anda. Tidak perlu mengetik alamat manual atau tanya-tanya lewat chat lagi.

Peta juga menaikkan kepercayaan. Bisnis yang berani menampilkan lokasi fisiknya secara terbuka terasa lebih nyata dibanding yang alamatnya samar. Kabar baiknya, cara menambahkan Google Maps di WordPress tidak sesulit kelihatannya — ada lima metode, dari yang paling gampang sampai yang paling fleksibel.

1. Embed Kode Iframe Google Maps Manual (Tanpa Plugin)

Metode paling ringan karena tidak perlu instal apa pun. Google Maps menyediakan fitur berbagi peta yang menghasilkan potongan kode iframe siap tempel. Gratis, interaktif, dan tidak butuh API key.

Langkah-langkahnya:

1. Buka Google Maps di browser, lalu cari nama bisnis atau alamat lengkap toko Anda.
2. Setelah lokasinya muncul, klik tombol Share (Bagikan).
3. Pada jendela yang muncul, pilih tab Embed a map.
4. Atur ukuran peta (kecil, sedang, besar, atau kustom), lalu klik Copy HTML.
5. Buka halaman atau artikel di WordPress tempat peta akan dipasang, tambahkan blok Custom HTML, tempel kode yang disalin, lalu simpan.

Kode yang disalin bentuknya kurang lebih seperti ini:

<iframe src="https://www.google.com/maps/embed?pb=..."
        width="600" height="450"
        style="border:0;"
        allowfullscreen=""
        loading="lazy"></iframe>

Bagian src yang panjang biarkan apa adanya. Sesuaikan width dan height bila perlu — misalnya ganti width="600" menjadi width="100%" supaya peta melebar penuh mengikuti layar HP maupun laptop.

Kelebihan: tidak menambah beban plugin, jadi dalam dua menit. Kekurangan: tampilannya standar dan kurang praktis untuk banyak lokasi.

2. Memakai Blok Custom HTML di Editor Gutenberg

Metode kedua masih satu keluarga dengan cara pertama, tapi pantas dibahas terpisah karena banyak pemilik website memakai editor bawaan WordPress (Gutenberg) dan tidak tahu blok mana yang tepat.

Jangan tempel kode iframe ke blok Paragraph biasa — hasilnya tampil sebagai teks mentah, bukan peta. Gunakan blok Custom HTML (klik tombol +, ketik “Custom HTML”), yang memang dirancang menampung potongan kode seperti iframe.

Caranya: edit halaman Kontak, tambah blok Custom HTML, tempel kode embed, klik Preview untuk memastikan peta tampil benar, lalu tekan Publish/Update.

Tips: letakkan peta di bawah teks alamat dan jam buka, bukan menggantikannya.

3. Memasang Plugin Maps Gratis

Kalau peta dibutuhkan di banyak halaman — misalnya tiap cabang punya halaman sendiri — menempel iframe satu per satu melelahkan. Di sinilah plugin membantu. Salah satu yang paling populer adalah WP Go Maps (dulu bernama WP Google Maps), tersedia gratis di direktori plugin WordPress.

Dengan plugin seperti ini, Anda tidak berkutat dengan kode HTML. Cukup ketik alamatnya, atur ukuran dan tingkat zoom, lalu masukkan shortcode ke halaman mana pun. Fitur tambahannya juga berguna: beberapa pin dalam satu peta, tema warna, sampai store locator untuk bisnis yang cabangnya banyak.

Langkah umumnya:

1. Masuk ke Plugins → Add New, cari “WP Go Maps”, klik Install lalu Activate.
2. Buka menu plugin, klik Add New Map.
3. Isi alamat toko, atur lebar, tinggi, dan level zoom (untuk satu toko, zoom 15–17 biasanya pas agar jalan sekitarnya terlihat).
4. Salin shortcode yang dihasilkan, misalnya [wpgmza id="1"], lalu tempel ke halaman mana pun memakai blok Shortcode.

Kelebihan: sekali bikin, bisa dipakai ulang di banyak halaman. Kekurangan: menambah satu plugin — pilih yang terawat dan ratingnya bagus agar tidak memperlambat situs.

4. Menggunakan Widget Google Maps di Elementor

Bagi pengguna Elementor, ada cara yang lebih visual: widget Google Maps bawaan yang tinggal diseret ke halaman, tanpa menyentuh kode sama sekali.

Caranya:

1. Edit halaman dengan Edit with Elementor.
2. Di panel kiri, cari widget Google Maps, lalu drag ke bagian halaman yang diinginkan.
3. Isi kolom Location dengan alamat lengkap toko — Google akan mencarikan titiknya otomatis.
4. Atur Zoom (sekitar 15–16 ideal untuk satu titik usaha) dan Height (400px nyaman untuk halaman kontak).
5. Klik Publish setelah tampilannya sesuai.

Satu catatan penting: widget Google Maps Elementor membutuhkan API key Google Maps yang dimasukkan lewat Elementor → Settings → Integrations. Kalau tidak ingin repot mengurus API key, tetap bisa pakai cara embed iframe manual (cara nomor 1) lalu tempelkan lewat widget HTML milik Elementor. Hasilnya sama-sama peta interaktif.

5. Google Maps API Key untuk Kustomisasi Lanjutan

Metode kelima untuk yang butuh peta tampil beda — misalnya warna peta disesuaikan identitas brand, penanda lokasi memakai logo toko, atau menampilkan banyak titik sekaligus.

Google menyediakan Maps JavaScript API untuk kustomisasi semacam itu, tapi ada syaratnya: buat API key di Google Cloud Console, aktifkan layanan peta yang dibutuhkan, dan daftarkan kartu pembayaran (ada kuota gratis bulanan, jadi untuk UMKM umumnya tetap gratis).

Setelah API key dibuat, batasi penggunaannya ke domain website Anda saja di menu Credentials (langkah keamanan yang wajib), lalu masukkan kunci itu ke plugin peta atau ke pengaturan Elementor sesuai kebutuhan.

Contoh Penerapan untuk UMKM

Supaya kebayang, berikut susunan halaman Kontak yang ideal untuk sebuah warung kopi:

• Nama dan alamat tertulis jelas: “Kopi Kala — Jl. Kenanga No. 12, Bantul, Yogyakarta 55198.”
• Jam buka: “Senin–Sabtu, 08.00–21.00 WIB.”
• Nomor WhatsApp yang bisa diklik.
• Peta Google Maps tepat di bawah informasi tersebut, sehingga pengunjung tinggal mengetuknya untuk navigasi.

Pola yang sama berlaku untuk toko kelontong, barbershop, bengkel, sampai klinik. Prinsipnya: alamat tertulis + jam buka + peta dalam satu halaman. Pengunjung yang datang dari Google biasanya membuka halaman Kontak dulu; kalau di sana langsung menemukan semuanya, peluang mereka benar-benar datang jauh lebih besar.

Tips SEO Lokal: Biar Peta Ikut Membantu Toko Ditemukan

Memasang peta saja belum cukup. Supaya lokasi bisnis makin mudah ditemukan lewat pencarian Google, lakukan tiga hal ini:

• Jaga konsistensi NAP (Name, Address, Phone). Nama, alamat, dan nomor telepon harus ditulis persis sama di website, Google Business Profile, dan media sosial. Seragamkan penulisan kecil seperti “Jl.” vs “Jalan”.
• Daftarkan dan verifikasi Google Business Profile. Layanan gratis dari Google agar bisnis muncul di Google Maps dan hasil pencarian lokal. Lengkapi jam buka, kategori usaha, dan foto asli tempat usaha.
• Pasang peta di halaman yang relevan saja — halaman Kontak dan halaman tiap cabang. Memasang peta di setiap artikel justru memperlambat website tanpa manfaat.

Kombinasi peta di website + profil bisnis terverifikasi membuat Google makin yakin bisnis Anda benar-benar ada di lokasi tersebut — dan itu membantu Anda muncul saat orang mencari “warung kopi terdekat”.

Kesimpulan

Lima metode di atas bisa diringkas: embed iframe manual paling cepat dan ringan, blok Custom HTML cara tepat menempelkannya di Gutenberg, plugin gratis paling praktis untuk banyak lokasi, widget Elementor paling nyaman untuk pengguna page builder, dan API key untuk kustomisasi tingkat lanjut.

Untuk kebanyakan UMKM, cukup mulai dari metode pertama: buka Google Maps, salin kode embed, tempel ke halaman Kontak — selesai dalam lima menit. Lengkapi dengan alamat tertulis, jam buka, dan Google Business Profile terverifikasi. Pelanggan yang tadinya berpotensi tersesat kini punya peta interaktif di genggaman mereka.

Selamat mencoba, dan semoga toko Anda makin ramai dikunjungi!