PROMO HARI PAHLAWAN, diskon Cloud Hosting 35%. Kode Vocher:PAHLAWAN * Promo terbatas hanya di tanggal 30 NOVEMBER 2023.
  • Home
  • Cara Mudah Memasang Google Maps di WordPress untuk Menampilkan Lokasi Bisnis

Cara Mudah Memasang Google Maps di WordPress untuk Menampilkan Lokasi Bisnis

Cara Mudah Memasang Google Maps di WordPress untuk Menampilkan Lokasi Bisnis

Wordpress
Contents hide
1 Pentingnya Maps Dari Website
2 Cara untuk Memasang Google Maps di WordPress
2.1 A. Cara Termudah – Menggunakan Embed (Kode HTML dari Google Maps)
2.2 B. Menggunakan Plugin Google Maps (Praktis & Banyak Fitur)
2.3 C. Cara Developer – Menggunakan Google Maps API Manual
3 Tips agar Google Maps Berfungsi dengan Baik
4 Langkah-langkah Mendapatkan Google Maps API Key
5 Cara Memasang MAPS API di Plugin Easy Google Maps

Seperti yang kita ketahui, saat ini maps banyak tersedia di situs web dan aplikasi belanja daring. Hal ini menjadikan peta elemen krusial untuk suatu situs, terutama bagi yang ditujukan untuk tujuan bisnis. Oleh karena itu, dalam panduan ini, kami akan menjelaskan cara menampilkan Google Maps di platform WordPress.

Dengan adanya peta yang menunjukkan lokasi toko Anda di situs, akan lebih mudah bagi pelanggan untuk menemukan toko fisik Anda. Selain itu, peta juga dapat meningkatkan kepercayaan pelanggan karena mereka menyadari keberadaan toko online Anda. Dalam panduan ini, kami akan membahas signifikansi peta pada situs web dan langkah-langkah untuk menambahkan peta di WordPress.

Pentingnya Maps Dari Website

Berikut beberapa alasan yang bisa kamu pahami mengapa Maps di website itu penting:

  • Mempermudah Pengunjung Menemukan Lokasi Bisnis

Peta (Google Maps) membantu pengunjung mengetahui di mana lokasi bisnis kamu berada dengan jelas dan akurat. Dengan satu klik, mereka bisa langsung melihat arah menuju lokasi tanpa perlu mencari manual di aplikasi lain. Ini sangat penting untuk bisnis seperti toko, kafe, salon, klinik, atau kantor layanan.

  • Meningkatkan Kepercayaan Pengunjung

Website yang mencantumkan Maps terlihat lebih profesional dan terpercaya. Pengunjung akan merasa yakin bahwa bisnis tersebut benar-benar ada secara fisik, bukan sekadar online. Hal ini bisa meningkatkan rasa aman dan kepercayaan calon pelanggan.

  • Mendukung Strategi SEO Lokal (Local SEO)

Google akan lebih mudah menampilkan websitemu di hasil pencarian lokal (misalnya: “salon terdekat” atau “toko kue di Jakarta”) jika kamu menambahkan Google Maps dan alamat yang valid. Artinya, Maps bisa bantu websitemu muncul di hasil pencarian lokal lebih tinggi.

  • Memudahkan Interaksi dan Kunjungan Offline

Dengan fitur Maps, pengunjung bisa langsung melihat rute perjalanan, estimasi waktu tempuh, dan opsi transportasi. Ini mempermudah pelanggan untuk langsung datang ke lokasi bisnismu tanpa repot mencari alamat secara manual.

  • Meningkatkan Pengalaman Pengguna (User Experience)

Menampilkan Maps di halaman “Kontak” atau “Tentang Kami” membuat tampilan website lebih interaktif dan informatif. Pengguna tidak hanya membaca alamat, tapi juga melihat peta visual yang mudah dipahami.

  • Mendukung Keputusan Pembelian

Bagi bisnis fisik, kejelasan lokasi bisa menjadi faktor penting dalam keputusan pembelian. Misalnya, pelanggan akan lebih memilih toko yang lokasinya mudah ditemukan dan dekat dengan tempat mereka berada.

  • Memberi Nilai Tambah untuk Brand
Baca Juga  Buat Logo Online Mudah, Cepat dan Gratis di 6 situs ini

Dengan tampilan Maps yang terintegrasi, website tampak lebih modern dan profesional. Ini memberi kesan bahwa bisnismu serius, transparan, dan mudah diakses, yang bisa menambah nilai positif untuk brand image.

Cara untuk Memasang Google Maps di WordPress

Kamu bisa memilih sesuai kebutuhan dan tingkat kemudahan:

A. Cara Termudah – Menggunakan Embed (Kode HTML dari Google Maps)

Cocok kalau kamu hanya ingin menampilkan peta statis di halaman “Kontak” atau “Tentang Kami”.

Langkah-langkah:

  1. Buka Google Maps → https://maps.google.com

  2. Cari alamat atau lokasi yang ingin kamu tampilkan.

  3. Klik tombol Share (Bagikan).

  4. Pilih tab Embed a map (Sematkan peta).

  5. Pilih ukuran peta → klik Copy HTML.

  6. Masuk ke WordPress Dashboard → buka halaman atau postingan tempat kamu ingin menampilkan peta.

  7. Tambahkan blok Custom HTML → Paste kode yang kamu salin tadi.

  8. Simpan dan Preview hasilnya.

Tips:
Agar peta responsif (menyesuaikan ukuran layar HP), tambahkan kode CSS berikut di Custom CSS tema:

.map-responsive {
position: relative;
padding-bottom: 56.25%; /* Rasio 16:9 */
height: 0;
overflow: hidden;
}
.map-responsive iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}

Lalu bungkus iframe kamu dengan div:

<div class="map-responsive">
<!-- paste iframe dari Google Maps di sini -->
</div>

B. Menggunakan Plugin Google Maps (Praktis & Banyak Fitur)

Kalau kamu ingin peta lebih interaktif, bisa tambahkan marker, warna, dan info bisnis.

Rekomendasi Plugin Terbaik:

  • WP Google Maps

  • Easy Google Maps

  • MapPress Maps for WordPress

  • Google Maps Widget

Langkah-langkah (contoh pakai WP Google Maps):

  1. Masuk ke Dashboard WordPress → Plugins → Add New.

  2. Cari WP Google Maps → klik Install Now → Activate.

  3. Setelah aktif, buka Maps → Settings.

  4. Masukkan Google Maps API Key (kalau diminta).

    • Jika belum punya API Key, kamu bisa buat di Google Cloud Console.

  5. Klik Add New Map → isi nama, lokasi, dan zoom level.

  6. Simpan, lalu salin shortcode yang diberikan (contoh: [wpgmza id="1"]).

  7. Tempel shortcode itu di halaman atau postingan tempat kamu ingin menampilkan peta.

  8. Klik Update/Publish dan lihat hasilnya.

C. Cara Developer – Menggunakan Google Maps API Manual

Untuk kamu yang ingin tampilan custom dan integrasi lanjutan.

Langkah-langkah singkat:

  1. Dapatkan Google Maps API Key dari Google Cloud Console.

    • Aktifkan Maps JavaScript API.

    • Aktifkan billing (Google kasih kredit gratis $200/bulan).

  2. Masukkan kode berikut ke halaman atau template WordPress:

<div id="map" style="height: 400px; width: 100%;"></div>

<script>
function initMap() {
var lokasi = { lat: -6.200000, lng: 106.816666 }; // Ganti dengan koordinatmu
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 14,
center: lokasi
});
var marker = new google.maps.Marker({
position: lokasi,
map: map
});
}
</script>

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

  1. Ganti YOUR_API_KEY dengan API Key milikmu.

  2. Simpan dan lihat hasilnya.

Baca Juga  White Screen pada WordPress? Ini Cara Mengatasinya

Tips agar Google Maps Berfungsi dengan Baik

  • Pastikan situsmu sudah HTTPS (aman).
  • Jangan lupa aktifkan billing di Google Cloud agar API berfungsi.
  • Gunakan restriction API key agar tidak disalahgunakan orang lain.
  • Jika pakai plugin, update secara rutin untuk mencegah bug atau error.
  • Gunakan lazy-load jika peta membuat halaman berat.

Langkah-langkah Mendapatkan Google Maps API Key

1. Masuk ke Google Cloud Console

  1. Buka link berikut 👉 https://console.cloud.google.com/

  2. Login menggunakan akun Google (Gmail) kamu.

    Kalau belum pernah pakai Google Cloud, nanti kamu akan diminta mengisi data akun terlebih dahulu.

2. Buat “Project” Baru

  1. Setelah masuk ke dashboard Google Cloud, klik menu drop-down di atas kiri (biasanya tertulis “Select a project”).

  2. Klik tombol “New Project” (Proyek Baru).

  3. Masukkan:

    • Project Name: misal My WordPress Maps

    • Organization: pilih No organization (jika tidak ada)

  4. Klik Create.

  5. Tunggu beberapa detik hingga project selesai dibuat.

3. Aktifkan API yang Dibutuhkan

Setelah project siap:

  1. Masuk ke menu “APIs & Services” → “Library”.

  2. Di kolom pencarian, ketik Maps JavaScript API → klik hasilnya → klik Enable.

  3. Ulangi langkah yang sama untuk API lain yang mungkin dibutuhkan (tergantung plugin):

    • Geocoding API

    • Places API

    • Maps Embed API

    • Directions API (jika ingin rute perjalanan)

  4. Setelah semua aktif, lanjut ke tahap membuat kunci.

4. Buat API Key

  1. Pergi ke APIs & Services → Credentials.

  2. Klik tombol “+ CREATE CREDENTIALS” → “API Key”.

  3. Google akan langsung menampilkan API Key baru milik kamu.

  4. Salin kode tersebut (karena ini yang nanti kamu tempelkan di plugin WordPress atau kode website).

5. Amankan API Key (Penting!)

Jangan biarkan API Key kamu terbuka untuk semua orang, karena bisa disalahgunakan.

  1. Klik Restrict Key di bagian bawah API Key yang baru kamu buat.

  2. Di bagian Application Restrictions, pilih sesuai kebutuhan:

    • HTTP referrers (websites) → kalau dipakai di website (misal https://namadomainkamu.com/*)

    • IP addresses → kalau untuk VPS/server.

  3. Di bagian API restrictions, pilih hanya API yang kamu aktifkan tadi (misal Maps JavaScript API).

  4. Klik Save.

6. Aktifkan Billing (Wajib agar Peta Muncul)

Google sekarang mengharuskan setiap akun Maps API mengaktifkan billing, tapi tenang aja:

Google memberi kredit gratis $200/bulan, yang biasanya cukup untuk ribuan tampilan peta.

  1. Masuk ke menu Billing di Google Cloud.

  2. Klik “Add Billing Account”.

  3. Isi data (negara, nama, dan kartu debit/kredit aktif).

  4. Setelah selesai, hubungkan akun billing ke project kamu.

Baca Juga  11 Keunggulan Softaculous Apps Installer

7. Tes API Key

  1. Buka plugin WordPress kamu (misal: Easy Google Maps atau WP Google Maps).

  2. Tempelkan API Key yang baru kamu buat di kolom Google Maps API Key.

  3. Simpan dan lihat hasilnya di halaman website kamu.

    • Kalau peta tampil normal, berarti API sudah aktif dan berfungsi.

Cara Memasang MAPS API di Plugin Easy Google Maps

1. Pastikan Kamu Sudah Punya API Key

Sebelum bisa digunakan di plugin, kamu harus punya Google Maps API Key.
Kalau belum, ikuti langkah singkat ini:

  • Masuk ke Google Cloud Console.

  • Buat project baru (atau pilih project yang sudah ada).

  • Aktifkan Maps JavaScript API dan Geocoding API.

  • Buat API Key di menu Credentials → Create Credentials → API Key.

  • Batasi penggunaan API Key untuk domain websitemu (HTTP referrer).

  • Aktifkan Billing Account (Google memberikan kredit gratis $200/bulan).

Setelah selesai, salin API key tersebut karena nanti akan kamu masukkan ke plugin Easy Google Maps.

2. Masuk ke Dashboard WordPress

  • Login ke dashboard WordPress kamu (namadomainmu.com/wp-admin).

  • Di menu kiri, klik Easy Google Maps.

  • Buka tab Settings atau API Settings (tergantung versi plugin yang kamu pakai).

3. Masukkan API Key ke Plugin

  • Di halaman pengaturan plugin, kamu akan melihat kolom bertuliskan:

    “Enter your Google Maps API Key”

  • Paste API Key yang sudah kamu salin dari Google Cloud Console.

  • Klik Save Changes.

4.: Cek Koneksi API

Setelah menyimpan pengaturan:

  • Buka menu Maps → Add New Map.

  • Tambahkan lokasi (alamat atau koordinat).

  • Klik Preview Map.

  • Jika peta muncul tanpa error (“This page can’t load Google Maps correctly”), artinya API Key kamu sudah aktif.

Jika muncul error, periksa:

  • Apakah API sudah diaktifkan di Google Cloud (Maps JavaScript API wajib).

  • Apakah Billing sudah aktif.

  • Apakah domain website sudah ditambahkan di bagian restriction API key.

5. Tampilkan Peta di Halaman

Setelah peta berhasil dibuat:

  • Plugin akan memberikan shortcode, misalnya:

    [easy_google_map id="1"]

  • Salin shortcode tersebut.

  • Tempelkan di halaman atau postingan tempat kamu ingin menampilkan peta (gunakan blok Shortcode di editor Gutenberg).

  • Simpan dan lihat hasilnya.

6. Uji Tampilan Peta

  • Buka halaman tempat kamu menaruh shortcode.

  • Pastikan peta tampil normal dan marker sesuai lokasi yang diatur.

  • Jika masih error, coba Clear Cache browser dan plugin, lalu reload halaman. sehat sehat algoritma tiktok,

5/5 - (1 vote)

Share this post