Cara benamkan widget peta pada mana-mana laman web

Mulakan di pembina (satu-satunya kerja sebenar)

Semuanya bermula di pembina benaman peta. Geokod berlaku sekali, di situ — petikan kod yang anda salin membawa koordinat tetap, jadi gangguan geokod atau “penormalan alamat” tidak akan menggerakkan pin anda kemudian. Taip alamat, lihat pin mendarat, kemudian seret ia ke pintu masuk sebenar anda sebelum menyalin: seretan sepuluh detik itu ialah perbezaan antara “jalan yang betul” dan “pintu yang betul”.

Mahu lihat persiapan berbilang cawangan yang sudah siap sebelum membina milik anda? Buka demo pembina — ia memuatkan contoh syarikat tiga cawangan dengan alamat, pin bernombor berwarna, dan panel lokasi secara langsung dalam pratonton, siap untuk dicuba.

WordPress: shortcode plugin atau iframe mentah?

Kedua-dua cara menghasilkan widget yang sama — pilih ikut selera.

Cara plugin (disyorkan): muat turun whatismylocation-widget.zip → wp-admin ▸ Plugins ▸ Add New ▸ Upload Plugin → Activate. Kemudian tambah blok Shortcode:

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

Atributnya sama seperti pilihan dalam pembina: theme, marker, zoom, height, directions, dan untuk cawangan pins="lat,lng,Label~Address|…" dengan panel= dan motion= (lihat jadual rujukan di bawah). Bahagian WordPress dalam pembina menjana shortcode lengkap untuk anda — tanpa perlu menaip.

Cara tanpa plugin: tampal iframe daripada pembina ke dalam blok Custom HTML. Widget yang sama, tiada plugin untuk dikemas kini; harganya ialah markup yang lebih panjang dalam kandungan anda, dan anda tidak boleh menyunting melalui atribut kemudian.

Squarespace, Shopify, Notion — dan yang lain

Di luar WordPress, kerjanya biasanya satu tampalan sahaja: tambah elemen HTML/benaman platform anda (Wix Embed HTML, blok Code Squarespace, Embed Webflow) dan letakkan iframe di dalamnya. Satu perbezaan menjadikan widget peta lebih mudah daripada widget lokasi: ia tidak perlukan atribut allow="geolocation", kerana ia tidak pernah meminta apa-apa daripada pelawat — jadi tiada apa-apa yang rapuh untuk dijaga apabila pembina laman menulis semula HTML anda.

Squarespace: tambah blok Code dan tampal. Satu perkara yang elok diketahui awal-awal: blok Code memerlukan pelan Business atau lebih tinggi — pada pelan Personal, blok itu memaparkan kod anda sebagai teks biasa dan tidak memaparkan petanya.

Shopify layak mendapat lebih daripada sekadar tampalan: kami sediakan bahagian tema yang siap pakai — satu fail dalam tema anda memberi panel tetapan asli dengan cawangan sebagai blok yang boleh diseret untuk disusun semula, tanpa apl dan tanpa kunci API.

Notion dan Google Sites membenamkan melalui URL, bukan HTML. Kedua-duanya tidak menerima petikan iframe sama sekali — sebaliknya, tekan Copy widget URL dalam pembina dan tampalkannya ke dalam blok /embed Notion atau Embed ▸ By URL Google Sites. Widget ini ialah laman berasingan yang lengkap, jadi ia dipaparkan dengan sempurna dalam kedua-dua cara.

Salesforce Experience Cloud (laman komuniti awam): letakkan iframe ke dalam komponen HTML Editor — kemudian minta pentadbir anda menambah whatismylocation.ai di bawah Setup ▸ Trusted URLs dengan arahan CSP frame-src. Jika tidak, Salesforce akan menyekat frame itu secara senyap. Pasukan yang membina dengan kod boleh membalut URL yang sama dalam Lightning Web Component ~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';
}

Berbilang cawangan: panel lokasi

Sehingga 10 lokasi boleh dimuatkan dalam satu benaman. Dalam mod Advanced pembina, letakkan setiap pin, beri label dan alamat kepadanya, kemudian tekan Add location. Pelawat mendapat panel lokasi — akordion di sebelah peta pada desktop, jalur kad yang boleh dileret pada telefon — dengan pin bernombor: memilih satu cawangan akan menerbangkan peta ke situ dan menunjukkan alamatnya bersama pautan Dapatkan arah tersendiri.

• panel= memilih susun atur: auto (lalai — di sebelah pada iframe lebar, jalur pada iframe sempit), side, bottom, atau none untuk pin biasa + pop timbul.
• motion= menetapkan animasi pertukaran: smooth (terbangan lalai), fade, lively, atau none. Pelawat yang menetapkan “kurangkan gerakan” dalam sistem mereka sentiasa mendapat versi segera, apa pun pilihan anda.
• open=no bermula dengan setiap entri dikuncupkan; peta melaraskan sendiri untuk memuatkan semua cawangan dan zoom anda menjadi nilai maksimum.

Rujukan pilihan

Menyelesaikan masalah WordPress

Shortcode terpapar sebagai teks biasa pada laman. Blok itu tidak memproses shortcode. Dalam penyunting blok, gunakan blok Shortcode (bukan blok kod atau praformat); dalam Elementor gunakan widget Shortcode, dalam Divi gunakan modul Code. Pengguna penyunting klasik: taipkannya dalam tab Visual sebagai teks biasa.

Tiada apa-apa yang muncul. Lihat sumber laman dan cari whatismylocation. Komen HTML tentang lat/lng yang hilang bermakna koordinat tiada atau tidak sah — salin shortcode lengkap daripada pembina, jangan taip atribut secara manual.

Iframe hilang apabila anda menyimpan (cara tanpa plugin). WordPress membuang iframe bagi peranan pengguna yang tiada keupayaan unfiltered_html — pada multisite ini termasuk pentadbir secara lalai — dan sebahagian plugin keselamatan berbuat sama. Shortcode plugin ialah penyelesaian yang bersih: ia tidak bergantung pada kebenaran peranan anda untuk menyimpan iframe mentah.

Peta kelabu / jubin tidak dimuatkan. Jubin datang daripada tile.openstreetmap.org; penghalang iklan yang sangat agresif atau rangkaian korporat boleh menyekatnya (kad tindanan masih terpapar). Sahkan pada rangkaian lain atau telefon yang menggunakan data mudah alih.

Tiada panel lokasi. Panel muncul bermula dari 2 pin — satu lokasi mendapat kad tindanan klasik. Periksa juga bahawa panel="none" tidak ditetapkan.

Animasi pertukaran tidak dimainkan. Hampir selalunya kerana tetapan “kurangkan gerakan” pada sistem pengendalian pelawat (atau anda sendiri) — widget menghormatinya secara reka bentuk dan bertukar dengan segera. Ini bukan pepijat, dan pelawat lain masih melihat praset pilihan anda.

Suntingan tidak kelihatan. Plugin cache (atau cache hos) sedang menyajikan laman lama. Bersihkan cache laman selepas menyunting atribut shortcode — widget itu sendiri tiada apa-apa untuk dicache.