Cách nhúng widget bản đồ trên mọi website

Bắt đầu ở trình tạo (phần việc thực sự duy nhất)

Mọi thứ bắt đầu tại trình tạo mã nhúng bản đồ. Mã hóa địa lý chỉ diễn ra một lần, ở đó — đoạn mã bạn sao chép mang tọa độ cố định, nên sự cố của bộ mã hóa địa lý hay việc “chuẩn hóa địa chỉ” không bao giờ có thể làm ghim của bạn dịch chuyển sau này. Nhập địa chỉ, xem ghim rơi xuống, rồi kéo nó vào đúng cửa vào thật của bạn trước khi sao chép: mười giây kéo đó chính là khác biệt giữa “đúng con phố” và “đúng cửa”.

Muốn xem một thiết lập nhiều chi nhánh hoàn chỉnh trước khi tự tạo? Mở bản demo của trình tạo — nó tải một công ty mẫu có ba chi nhánh, kèm địa chỉ, ghim đánh số có màu và bảng vị trí hiển thị trực tiếp trong bản xem trước, sẵn sàng để bạn thử.

WordPress: shortcode của plugin hay iframe thuần?

Cả hai cách đều cho ra widget giống hệt nhau — chọn theo sở thích.

Cách dùng plugin (khuyến nghị): tải whatismylocation-widget.zip → wp-admin ▸ Plugins ▸ Add New ▸ Upload Plugin → Activate. Rồi thêm một khối Shortcode:

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

Các thuộc tính đọc giống như các tùy chọn trong trình tạo: theme, marker, zoom, height, directions, và với chi nhánh thì pins="lat,lng,Label~Address|…" cùng panel= và motion= (xem bảng tham chiếu bên dưới). Phần WordPress trong trình tạo sẽ tạo sẵn shortcode hoàn chỉnh cho bạn — không phải gõ gì.

Cách không dùng plugin: dán iframe từ trình tạo vào một khối Custom HTML. Cùng một widget, không có plugin phải cập nhật; đánh đổi là mã dài hơn trong nội dung và sau này không sửa được theo kiểu thuộc tính.

Squarespace, Shopify, Notion — và phần còn lại

Ngoài WordPress, công việc thường chỉ là một lần dán: thêm phần tử HTML/nhúng của nền tảng bạn dùng (Wix Embed HTML, khối Code của Squarespace, Embed của Webflow) rồi dán iframe vào. Có một điểm khiến widget bản đồ dễ hơn widget vị trí: nó không cần thuộc tính allow="geolocation", vì nó không bao giờ hỏi khách truy cập điều gì — nên không có gì mong manh phải giữ lại khi trình tạo trang viết lại HTML của bạn.

Squarespace: thêm một khối Code rồi dán. Có một lưu ý nên biết trước: khối Code yêu cầu gói Business hoặc cao hơn — với gói Personal, khối sẽ hiển thị mã của bạn dưới dạng văn bản thuần thay vì kết xuất nó.

Shopify xứng đáng hơn một lần dán: chúng tôi cung cấp sẵn một section cho theme — một tệp trong theme cho bạn một bảng thiết lập gốc, với các chi nhánh là những block kéo để sắp xếp lại, không cần app và không cần khóa API.

Notion và Google Sites nhúng bằng URL, không phải HTML. Chúng không nhận đoạn mã iframe — thay vào đó, hãy nhấn Copy widget URL trong trình tạo rồi dán vào khối /embed của Notion hoặc Embed ▸ By URL của Google Sites. Widget là một trang độc lập hoàn chỉnh, nên nó hiển thị hoàn hảo theo cả hai cách.

Salesforce Experience Cloud (các trang community công khai): dán iframe vào một thành phần HTML Editor — sau đó nhờ quản trị viên thêm whatismylocation.ai vào Setup ▸ Trusted URLs với chỉ thị CSP frame-src, nếu không Salesforce sẽ âm thầm chặn khung. Đội ngũ làm việc bằng mã có thể bọc chính URL đó trong một Lightning Web Component khoảng 10 dòng:

<!-- 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';
}

Nhiều chi nhánh: bảng vị trí

Một mã nhúng chứa được tối đa 10 vị trí. Ở chế độ Advanced của trình tạo, hãy đặt vị trí từng ghim, cho nó một nhãn và địa chỉ, rồi nhấn Add location. Khách truy cập sẽ thấy một bảng vị trí — dạng accordion cạnh bản đồ trên máy tính, dải thẻ trượt được trên điện thoại — với các ghim đánh số: chọn một chi nhánh sẽ đưa bản đồ bay tới đó và hiện địa chỉ của nó cùng liên kết chỉ đường riêng.

• panel= chọn cách bố trí: auto (mặc định — cạnh bên với iframe rộng, dải thẻ với iframe hẹp), side, bottom, hoặc none cho ghim thường + popup.
• motion= đặt hiệu ứng chuyển: smooth (bay mượt, mặc định), fade, lively, hoặc none. Khách truy cập đã bật “giảm chuyển động” trong hệ thống luôn nhận bản chuyển tức thì, dù bạn chọn gì.
• open=no khởi đầu với mọi mục thu gọn; bản đồ tự khớp khung cho tất cả chi nhánh và zoom của bạn trở thành mức tối đa.

Tham chiếu các tùy chọn

Khắc phục sự cố trên WordPress

Shortcode hiện ra dưới dạng văn bản thuần trên trang. Khối đó không xử lý shortcode. Trong trình soạn thảo khối, hãy dùng khối Shortcode (không phải khối code hay preformatted); trong Elementor dùng widget Shortcode của nó, trong Divi dùng module Code. Người dùng trình soạn thảo cổ điển: gõ nó ở tab Visual dưới dạng văn bản thuần.

Không có gì xuất hiện cả. Xem mã nguồn trang và tìm whatismylocation. Một chú thích HTML về việc thiếu lat/lng nghĩa là tọa độ bị thiếu hoặc không hợp lệ — hãy sao chép shortcode hoàn chỉnh từ trình tạo thay vì tự gõ các thuộc tính.

Iframe biến mất khi bạn lưu (cách không dùng plugin). WordPress loại bỏ iframe với những vai trò người dùng không có quyền unfiltered_html — trên multisite, mặc định điều này bao gồm cả quản trị viên — và một số plugin bảo mật cũng làm vậy. Shortcode của plugin là cách sửa gọn gàng: nó không phụ thuộc vào việc vai trò của bạn có được phép lưu iframe thuần hay không.

Bản đồ bị xám / các ô bản đồ không tải. Ô bản đồ đến từ tile.openstreetmap.org; một trình chặn quảng cáo rất khắt khe hoặc mạng công ty có thể chặn chúng (thẻ thông tin vẫn hiển thị). Hãy kiểm tra lại trên mạng khác hoặc trên điện thoại dùng dữ liệu di động.

Không có bảng vị trí. Bảng chỉ xuất hiện từ 2 ghim trở lên — một vị trí duy nhất sẽ nhận thẻ thông tin cổ điển. Cũng hãy kiểm tra xem panel="none" có bị đặt hay không.

Hiệu ứng chuyển không chạy. Gần như luôn là do thiết lập “giảm chuyển động” của hệ điều hành nơi khách truy cập (hoặc chính bạn) — widget tôn trọng điều đó theo thiết kế và chuyển tức thì. Đây không phải lỗi, và những khách khác vẫn thấy hiệu ứng bạn đã chọn.

Các chỉnh sửa không hiện ra. Một plugin cache (hoặc cache của nhà cung cấp hosting) đang phục vụ trang cũ. Hãy xóa cache trang sau khi sửa thuộc tính shortcode — bản thân widget không có gì để cache.