Cara Menyematkan Google Maps di WordPress

Menambahkan peta ke situs WordPress Anda adalah tugas yang hanya memakan waktu lima menit. Peta lokasi membantu membangun kepercayaan, memperkuat SEO lokal, dan memudahkan pelanggan untuk membeli dari Anda. Namun, memastikan peta tampil dengan benar dan memiliki fitur yang Anda butuhkan bisa memakan waktu berjam-jam. Dan jika Anda lupa memperhitungkan pengguna perangkat seluler, Anda mungkin tidak menyadari bahwa peta terpotong di layar kecil.

Panduan ini memandu Anda melalui tiga opsi untuk menambahkan Google Maps di WordPress: iFrame bawaan, plug-in peta, dan widget gratis. Kami juga akan membahas masalah dan pertimbangan agar Anda bisa menentukan mana yang paling cocok untuk Anda.

Watch on youtube

How to Customize and Embed Google Maps on Your WordPress Site

Tiga opsi untuk embed Google Maps di WordPress

Opsi 1: Gunakan iFrame bawaan Google Maps

Opsi iFrame Google Maps adalah cara paling sederhana dan tercepat untuk menampilkan peta di situs web Anda. Anda cukup mencari bisnis Anda di Google Maps, klik Bagikan, salin kode-nya, dan tempelkan ke halaman WordPress. Kami menyediakan panduan langkah demi langkah di sini agar Anda bisa langsung menggunakannya.

Kesederhanaannya justru menjadi keterbatasan tersendiri. Anda tidak bisa menyesuaikan tampilan peta, menambahkan beberapa pin, atau menampilkan informasi tambahan di atas tampilan default. Anda juga harus bereksperimen dengan ukuran peta dan tata letak halaman WordPress untuk memastikan peta dapat digunakan dengan baik di perangkat seluler.

Cara embed Google Maps dengan iFrame

Sebelum memulai, daftarkan bisnis Anda di platform Google Business Profile. Ini memungkinkan Anda menampilkan informasi lengkap di Google Maps, termasuk jam buka, ulasan, atau menu makanan Anda. Jika Anda hanya ingin menunjuk ke alamat yang bukan milik Anda atau sebuah landmark, langsung lanjut ke langkah pertama.

Dapatkan kode embed dari Google Maps

1. Buka google.com/maps dan cari nama bisnis atau alamat Anda.

2. Pastikan Anda memilih pin yang benar dengan memeriksa detail bisnis di sisi kiri layar.

3. Klik Bagikan.

4. Sebuah popup akan muncul di layar. Klik tab Sematkan peta.

5. Pratinjau tampilan peta di situs web Anda akan muncul. Ukurannya diatur ke sedang secara default; Anda dapat memilih untuk menampilkan peta kecil atau besar, atau bahkan memilih ukuran kustom menggunakan dropdown di kiri atas.

6. Setelah memilih ukuran, klik Salin HTML. Ini akan menyalin cuplikan kode iFrame ke clipboard.

Embed di WordPress (Editor Blok/Gutenberg)

7. Di WordPress, buka halaman atau postingan tempat Anda ingin menempatkan peta.
8. Klik ikon penyisip blok +, ketik HTML untuk memfilter, dan klik Custom HTML untuk menambahkan blok ke halaman.

9. Di blok baru, klik Edit HTML.

10. Tempelkan kode iFrame ke popup. Pratinjau akan ditampilkan di sisi kanan. Klik Perbarui untuk menyelesaikan.

11. Halaman sekarang menampilkan peta iFrame yang disematkan. Klik Terbitkan atau Simpan untuk menayangkannya di situs web Anda, lalu lihat halaman tersebut untuk memeriksa tampilannya.

Jika cara ini tidak sesuai dengan cara Anda mengedit halaman di WordPress, lihat cara menambahkan HTML menggunakan salah satu editor berikut:

• WordPress Classic Editor
• Widget HTML Elementor
• Modul Kode Divi

Opsi 2: Instal plug-in peta WordPress khusus

Dibandingkan dengan Opsi 1, plug-in WordPress khusus menawarkan lebih banyak kustomisasi dan fungsionalitas. Anda menginstalnya di situs dengan cara yang sama seperti menginstal plug-in lainnya, membuat dan menempelkan API key Google Maps ke pengaturan, lalu menambahkan elemen peta ke halaman.

Opsi ini menambah sedikit kerumitan. Untuk mendapatkan API key Google Maps, Anda perlu membuat akun di Google Cloud Platform, menyiapkan akun penagihan, dan melewati alur pengaturan teknis. Selain itu, plug-in peta bekerja dengan model freemium, menawarkan paket gratis yang cukup memadai dengan fitur dasar, tetapi fitur terbaiknya dikunci di balik lisensi sekali bayar atau biaya tahunan.

Anda menambahkan plug-in baru, jadi uji kecepatan situs web Anda setelah menyelesaikan pengaturan. Jika Anda menghosting situs di paket berbiaya rendah, terlalu banyak plug-in dapat memperlambat semuanya secara signifikan, memengaruhi pengalaman pengguna, dan berpotensi membuat pengunjung meninggalkan situs Anda.

Agar peta berfungsi dengan baik untuk pengguna seluler, hal ini bergantung pada plug-in yang digunakan dan cara Anda mengonfigurasinya. Misalnya, WP Go Maps merekomendasikan pengaturan nilai tinggi dan lebar tertentu untuk menghindari tampilan yang terlalu sempit.

Cara menyiapkan plug-in peta WordPress

Untuk contoh ini, saya akan menggunakan salah satu plug-in Google Maps untuk WordPress yang paling populer, yaitu WP Go Maps.

Siapkan WP Go Maps

1. Instal dan aktifkan WP Go Maps.

2. Klik Lewati Pengenalan untuk menyelesaikan pengaturan.

3. Klik Pengaturan di menu sisi kiri.

4. Di tab Umum, pilih Google Maps sebagai mesin peta.

Dapatkan API key Google Maps Anda

Untuk menarik data peta dari platform Google, Anda perlu mendaftarkan akun terlebih dahulu untuk mendapatkan API key.

5. Buka situs web Google Maps Platform dan buat akun.

6. Anda akan diarahkan ke alur konfigurasi di Google Cloud Platform. Buat akun penagihan baru dengan mengatur nama, negara, dan mata uang.

7. Tambahkan informasi kontak dan metode pembayaran Anda. Setelah selesai, klik tombol Kirim dan Aktifkan Penagihan.



Dengan opsi ini, Anda mendapatkan 10.000 pemuatan peta gratis per bulan; jika melebihi batas tersebut, biayanya $7 per 1.000 pemuatan. Jika Anda tetap di bawah batas, kartu Anda tidak akan dikenakan biaya, tetapi akun penagihan tetap diperlukan. (Pada Maret 2025, Google mengganti kredit bulanan $200 yang lama dengan kuota gratis terpisah untuk setiap API; banyak tutorial lama masih menyebutkan kredit ini, tetapi kredit tersebut sudah tidak ada lagi.)

8. Google akan mengajukan beberapa pertanyaan tentang rencana Anda menggunakan layanan Maps. Jawab pertanyaan tersebut dan klik Kirim.

9. Klik Keys & Credentials di menu sisi kiri.

10. Klik dropdown Buat Kredensial, lalu pilih API Key.

11. Pada modal yang muncul, Anda dapat mengatur nama dan izin API key baru Anda. Anda tidak harus mengubah pengaturan ini; gulir ke bawah hingga akhir dan klik Buat.

12. Salin API key tersebut.

Penting untuk membatasi key Anda sebelum situs ditayangkan. Key yang tidak dibatasi di kode sumber halaman Anda dapat disalin dan digunakan untuk menaikkan tagihan Anda. Ikuti praktik terbaik API key dari Google untuk menguncinya ke domain Anda.

Selesaikan pengaturan plug-in di WordPress

13. Kembali ke halaman pengaturan plug-in WP Go Maps di instalasi WordPress Anda dan tempelkan API key di kolom Google Maps API Key. Klik tombol Simpan Pengaturan setelah selesai.

14. Klik Maps di menu sisi kiri.

15. Plug-in sudah membuat peta pertama untuk Anda. Klik tombol Edit untuk melihatnya.

16. Di sinilah Anda mengonfigurasi tampilan peta di situs web Anda. Klik tab Penanda untuk mulai menambahkan bisnis Anda.

17. Klik menu tiga titik dan hapus penanda peta bawaan.

18. Klik Tambah Penanda di bagian atas.

19. Cari alamat bisnis Anda dan pilih setelah muncul di daftar.

20. Klik tombol Tambah Penanda untuk menyelesaikan.

21. Bisnis Anda kini sudah ditandai di peta. Anda dapat menyesuaikan tingkat zoom dan pengaturan visual lainnya dengan kembali dan mengklik tombol Pengaturan. Jangan lupa klik Simpan Peta di bagian bawah layar setelah selesai.

22. Saat Anda siap menempatkan peta di halaman situs web, klik tombol Dapatkan Shortcode di kiri bawah. Ini akan menyalin shortcode ke clipboard Anda.

23. Buka halaman tempat Anda ingin menambahkan peta, klik untuk menambahkan blok baru, dan ketik Shortcode untuk memfilter opsi. Klik setelah muncul.

24. Tempelkan shortcode ke kolom input dan klik Terbitkan atau Simpan.

25. Saat Anda mengunjungi halaman tersebut, peta menampilkan penanda dengan pengaturan yang telah Anda pilih.

Opsi 3: Tambahkan widget Google Maps gratis yang dapat dikustomisasi (direkomendasikan)

Widget Google Maps dari Jotform adalah peta gratis dan sepenuhnya dapat dikustomisasi yang tidak memerlukan instalasi plug-in atau biaya lisensi. Dengan widget ini, Anda dapat

• Menambahkan satu atau beberapa lokasi yang ditampilkan di peta yang sama.
• Memilih tampilan peta, termasuk peta jalan atau satelit.
• Menyesuaikan tema terang atau gelap, dengan kontrol radius sudut untuk kotak.
• Mengatur ukuran, tata letak, dan tingkat zoom peta.

Dibandingkan dengan iFrame bawaan, widget ini dapat dikustomisasi, memungkinkan beberapa pin di peta yang sama, dan sudah responsif sejak awal. Dibandingkan dengan plug-in, widget ini tidak membebani situs web Anda dan tidak memerlukan paket berbayar untuk membuka semua fiturnya.

Meskipun memiliki keunggulan tersebut, Widget Google Maps dari Jotform tetap memerlukan API key Google Maps. Anda harus melalui langkah-langkah pengaturan dan membuat akun penagihan di Google.

Cara menambahkan Widget Google Maps Jotform ke situs web Anda

1. Kunjungi halaman Widget Google Maps Jotform. Dalam kebanyakan kasus, alat konfigurasi dimuat secara otomatis; jika tidak, klik Buat Widget Situs Web Baru untuk memulai.

2. Ikuti panduan ini tentang cara mendapatkan API key Google Maps Anda. Panduan ini mencakup semua langkah yang dijelaskan di Opsi 2, serta cara membatasi key Anda agar tetap aman. (Ingat bahwa Google Maps mengizinkan 10.000 pemuatan peta gratis setiap bulan. Setiap 1.000 pemuatan setelahnya dikenakan biaya $7.) Setelah selesai, tempelkan API key Google Maps Anda ke kolom input.

3. Sesuaikan pengaturan umum sesuai keinginan Anda. Ini mencakup tampilan peta dan berapa banyak lokasi yang ingin Anda tambahkan. Tangkapan layar di sini menggunakan kantor Jotform di San Francisco dan Kanada untuk menunjukkan peta dengan beberapa pin, tetapi Anda dapat menambahkan satu lokasi atau sebanyak yang Anda butuhkan. Klik Lanjutkan setelah selesai.

4. Ubah pengaturan gaya seperti tema, font, atau CSS kustom. Klik Lanjutkan setelah selesai.

5. Kustomisasi tata letak dan fitur tambahan di langkah terakhir ini. Klik Coba Gratis di Situs Web Anda saat Anda siap.

6. Daftar akun Jotform gratis atau masuk ke akun yang sudah ada. Kode embed akan muncul setelah Anda selesai masuk. Klik Salin Kode.

7. Tambahkan kode embed ke halaman Anda dengan blok HTML kustom, ikuti langkah 7–11 dari Opsi 1: Sisipkan blok, tempelkan kode, lalu klik Terbitkan atau Simpan.

8. Buka halaman di ponsel Anda. Berbeda dengan iFrame bawaan di Opsi 1, widget ini menyesuaikan ukurannya secara otomatis agar pas di layar, sehingga peta yang terpotong di tampilan seluler sebelumnya kini ditampilkan secara penuh di sini.

Kembangkan situs WordPress Anda dengan widget cerdas tanpa server

Membangun fitur cerdas ke dalam situs web Anda biasanya berarti membayar plug-in baru atau berkutat dengan kode. Jotform membantu Anda melewati semua itu: Selain Widget Google Maps, direktori widget situs web Jotform menawarkan lebih dari 150 widget gratis tanpa kode, yang dapat dikonfigurasi cukup dengan menempelkan cuplikan HTML sederhana di situs web Anda.

Opsi-opsi berikut cocok dipasangkan dengan widget Maps:

• Widget Jam Operasional: Widget ini menampilkan jam buka, termasuk status buka atau tutup secara langsung yang dapat Anda tempatkan di samping peta, sehingga pengunjung yang menemukan Anda di peta langsung tahu apakah Anda sedang buka. Tidak memerlukan API key.
• Widget Pemesanan Janji Temu: Tambahkan fitur pemesanan ke situs web Anda sehingga orang dapat menjadwalkan waktu dengan Anda. Widget ini mendukung penambahan ketersediaan, daftar jenis layanan Anda dengan durasi dan harga, serta menerima reservasi tanpa memerlukan alat tambahan.
• Widget FAQ: Widget ini menampilkan jawaban atas pertanyaan yang sering diajukan dalam akordeon yang dapat dicari. Melakukan hal yang sama di WordPress memang mudah, tetapi mendapatkan tampilan profesional yang ditawarkan widget ini berarti harus berurusan dengan kode atau menginstal plug-in lagi.

Jika Anda menggunakan paket hosting WordPress tingkat dasar, plug-in mengonsumsi sumber daya server yang penting, memperlambat situs web Anda, dan memberikan pengalaman pengguna yang buruk bagi pengunjung. Widget Jotform berjalan di infrastruktur Jotform, sehingga beban tidak ditangani oleh situs web Anda. Ini membebaskan sumber daya server, membuat situs web Anda lebih cepat dan lebih mudah digunakan.

Ingin meningkatkan situs WordPress Anda? Lihat

• Panduan Cara menggunakan WordPress kami untuk mempelajari cara membangun situs web profesional tanpa harus mengikuti kursus desain web
• Integrasi WordPress dari Jotform, yang menyederhanakan pengumpulan data Anda dengan otomatisasi, pembayaran, dan fitur lanjutan dalam satu platform