Cara menyematkan widget peta di situs mana pun

Mulai dari builder (satu-satunya kerja nyata)

Semuanya dimulai di builder sematan peta. Geocoding terjadi sekali, di sana — potongan kode yang Anda salin membawa koordinat tetap, jadi gangguan geocoder atau “normalisasi alamat” tidak akan pernah bisa menggeser pin Anda nanti. Ketik alamatnya, lihat pin mendarat, lalu geser pin ke pintu masuk Anda yang sebenarnya sebelum menyalin: geseran sepuluh detik itulah pembeda antara “jalan yang benar” dan “pintu yang benar”.

Ingin melihat contoh multi-cabang yang sudah selesai sebelum membuat milik Anda? Buka demo builder — demo memuat contoh perusahaan dengan tiga cabang beserta alamat, pin bernomor berwarna, dan panel lokasi yang aktif di pratinjau, siap dicoba.

WordPress: shortcode plugin atau iframe mentah?

Kedua jalur menghasilkan widget yang sama — pilih sesuai selera.

Jalur plugin (disarankan): unduh whatismylocation-widget.zip → wp-admin ▸ Plugins ▸ Add New ▸ Upload Plugin → Activate. Lalu tambahkan blok Shortcode:

[whatismylocation_map lat="48.858400" lng="2.294500" name="Acme SARL" address="Champ de Mars, Paris"]

Atributnya mirip opsi di builder: theme, marker, zoom, height, directions, dan untuk cabang pins="lat,lng,Label~Address|…" dengan panel= dan motion= (lihat tabel referensi di bawah). Bagian WordPress di builder membuat shortcode lengkapnya untuk Anda — tanpa perlu mengetik.

Jalur tanpa plugin: tempel iframe dari builder ke blok Custom HTML. Widget sama, tak ada plugin yang perlu diperbarui; imbalannya markup di konten Anda jadi lebih panjang dan nanti tidak bisa diedit lewat atribut.

Squarespace, Shopify, Notion — dan yang lainnya

Di luar WordPress biasanya cukup satu kali tempel: tambahkan elemen HTML/embed platform Anda (Wix Embed HTML, blok Code Squarespace, Embed Webflow) lalu masukkan iframe-nya. Satu perbedaan membuat widget peta lebih mudah daripada widget lokasi: widget ini tidak butuh atribut allow="geolocation", karena ia tak pernah meminta apa pun dari pengunjung — jadi tak ada bagian rapuh yang harus dijaga saat page builder menulis ulang HTML Anda.

Squarespace: tambahkan blok Code lalu tempel. Satu hal yang perlu diketahui sejak awal: blok Code memerlukan paket Business atau lebih tinggi — pada paket Personal, blok itu menampilkan kode Anda sebagai teks biasa, bukan merendernya.

Shopify layak dapat lebih dari sekadar tempel: kami menyediakan bagian tema siap pakai — satu berkas di tema Anda memberi panel pengaturan native dengan cabang sebagai blok yang bisa digeser untuk diurutkan, tanpa aplikasi dan tanpa kunci API.

Notion dan Google Sites menyematkan lewat URL, bukan HTML. Keduanya sama sekali tidak menerima potongan iframe — sebagai gantinya, tekan Copy widget URL di builder lalu tempel ke blok /embed Notion atau Embed ▸ By URL di Google Sites. Widget ini adalah halaman mandiri yang lengkap, jadi tampilannya tetap sempurna di kedua cara.

Salesforce Experience Cloud (situs komunitas publik): masukkan iframe ke komponen HTML Editor — lalu minta admin Anda menambahkan whatismylocation.ai di Setup ▸ Trusted URLs dengan direktif CSP frame-src, kalau tidak Salesforce akan memblokir frame itu tanpa pemberitahuan. Tim yang membangun dengan kode bisa membungkus URL yang sama dalam Lightning Web Component sekitar 10 baris:

<!-- wimlMap.html -->
<template>
  <iframe src={src} width="100%" height="340"
          loading="lazy" title="Map"></iframe>
</template>

// wimlMap.js
import { LightningElement } from 'lwc';
export default class WimlMap extends LightningElement {
  src = 'https://whatismylocation.ai/widget/map?lat=48.858400&lng=2.294500&name=Acme';
}

Beberapa cabang: panel lokasi

Hingga 10 lokasi bisa masuk dalam satu sematan. Di mode Advanced pada builder, tempatkan setiap pin, beri label dan alamat, lalu tekan Add location. Pengunjung mendapat panel lokasi — akordeon di samping peta pada desktop, deretan kartu yang bisa digeser di ponsel — dengan pin bernomor: memilih satu cabang membuat peta terbang ke cabang itu dan menampilkan alamatnya beserta tautan Get-directions miliknya sendiri.

• panel= memilih tata letak: auto (default — di samping pada iframe lebar, deretan kartu pada iframe sempit), side, bottom, atau none untuk pin biasa + popup.
• motion= mengatur animasi perpindahan: smooth (terbang, default), fade, lively, atau none. Pengunjung yang mengaktifkan “kurangi gerakan” di sistemnya selalu mendapat versi instan, apa pun pilihan Anda.
• open=no membuat semua entri tertutup di awal; peta otomatis menyesuaikan agar semua cabang terlihat dan zoom Anda menjadi batas maksimum.

Referensi opsi

Pemecahan masalah WordPress

Shortcode tampil sebagai teks biasa di halaman. Blok itu tidak memproses shortcode. Di editor blok, gunakan blok Shortcode (bukan blok kode atau preformatted); di Elementor gunakan widget Shortcode, di Divi modul Code. Pengguna editor klasik: ketik sebagai teks biasa di tab Visual.

Tidak ada apa pun yang muncul. Lihat kode sumber halaman lalu cari whatismylocation. Komentar HTML tentang lat/lng yang hilang berarti koordinatnya tidak ada atau tidak valid — salin shortcode lengkap dari builder, jangan mengetik atribut secara manual.

Iframe hilang saat Anda menyimpan (jalur tanpa plugin). WordPress membuang iframe untuk peran pengguna yang tidak punya kapabilitas unfiltered_html — di multisite, secara default itu termasuk admin — dan beberapa plugin keamanan melakukan hal yang sama. Shortcode plugin adalah solusi bersihnya: ia tidak bergantung pada izin peran Anda untuk menyimpan iframe mentah.

Peta abu-abu / tile tidak dimuat. Tile berasal dari tile.openstreetmap.org; pemblokir iklan yang sangat agresif atau jaringan perusahaan bisa memblokirnya (kartu overlay tetap tampil). Coba periksa lewat jaringan lain atau ponsel dengan data seluler.

Panel lokasi tidak muncul. Panel baru tampil dari 2 pin ke atas — satu lokasi mendapat kartu overlay klasik. Periksa juga bahwa panel="none" tidak disetel.

Animasi perpindahan tidak berjalan. Hampir selalu karena pengaturan “kurangi gerakan” di sistem operasi pengunjung (atau Anda sendiri) — widget memang menghormatinya dan berpindah secara instan. Ini bukan bug, dan pengunjung lain tetap melihat preset pilihan Anda.

Perubahan tidak tampil. Plugin caching (atau cache hosting) masih menyajikan halaman lama. Bersihkan cache halaman setelah mengubah atribut shortcode — widget-nya sendiri tidak punya apa pun untuk di-cache.