Hầu hết trang liên hệ của cửa hàng đều có một khung bản đồ. Nhưng mở thử trên điện thoại, nhiều khung bị tràn ra ngoài màn hình, ghim nằm giữa ngã tư chứ không phải ở cửa hàng, hoặc trang tải chậm hẳn vì bản đồ. Bài này đi thẳng vào kỹ thuật: cách nhúng bản đồ Google vào website cho đúng, vài dòng mã cần chỉnh và cách kiểm tra. Nếu bạn muốn biết trang liên hệ nói chung nên có những gì, bài trang Liên hệ chuẩn đã đi qua phần đó.
Bước 1: Tìm đúng ghim của cửa hàng, không phải địa chỉ chữ
Có hai cách lấy bản đồ: gõ địa chỉ (số nhà, đường, xã) hoặc tìm tên cửa hàng đã có trên Google Maps. Nên dùng cách thứ hai. Khi nhúng theo ghim cửa hàng, khung bản đồ hiện tên cửa hàng, khách bấm vào xem được giờ mở cửa, đánh giá và ảnh. Khi nhúng theo địa chỉ chữ, Google tự đoán vị trí; với những địa chỉ mới sau sắp xếp xã, phường hoặc đường chưa có số nhà, ghim có thể lệch cả trăm mét.
Nếu cửa hàng chưa có trên Google Maps, hãy tạo hồ sơ doanh nghiệp trước, chờ được duyệt, rồi mới nhúng.
Bước 2: Lấy mã nhúng
Trên máy tính, mở Google Maps, tìm cửa hàng, bấm Chia sẻ, chọn thẻ Nhúng bản đồ. Chọn cỡ (cỡ nào cũng được, vì ta sẽ chỉnh lại), rồi bấm Sao chép HTML. Bạn nhận được một đoạn mã bắt đầu bằng <iframe.
Bước 3: Chỉnh mã cho vừa điện thoại và tải nhẹ
Đoạn mã Google đưa ra có chiều rộng cố định (ví dụ 600 điểm ảnh). Trên điện thoại, khung này tràn ra ngoài, khách phải kéo ngang. Hai chỉnh sửa nhỏ giải quyết phần lớn vấn đề:
- Đổi
width="600"thànhwidth="100%"để khung co giãn theo màn hình. - Giữ hoặc thêm
loading="lazy"để bản đồ chỉ tải khi khách cuộn tới, không làm chậm phần đầu trang.
Thêm một thuộc tính title mô tả khung, ví dụ "Bản đồ đường đến cửa hàng", giúp người dùng trình đọc màn hình hiểu khung này là gì. Đoạn mã sau khi chỉnh trông giống như sau (phần đường dẫn dài giữ nguyên như Google cấp):
<iframe src="…đường dẫn Google cấp…" width="100%" height="320"
style="border:0" loading="lazy" title="Bản đồ đường đến cửa hàng"
referrerpolicy="no-referrer-when-downgrade"></iframe>Chiều cao khoảng 300–400 điểm ảnh là vừa: đủ thấy đường xung quanh mà không chiếm cả màn hình điện thoại.
Bước 4: Đặt bản đồ đúng chỗ trên trang
Bản đồ không nên là thứ đầu tiên khách thấy. Thứ tự hợp lý: tên cửa hàng, địa chỉ bằng chữ (theo xã, phường mới), giờ mở cửa, nút Gọi và nút Chỉ đường, rồi mới đến khung bản đồ. Địa chỉ chữ vẫn cần thiết vì Google đọc được, khách sao chép được, và bản đồ có thể không tải trong vùng sóng yếu.
Nút "Chỉ đường" mở thẳng ứng dụng
Trên điện thoại, một nút mở thẳng ứng dụng Google Maps với chỉ đường đến cửa hàng tiện hơn thao tác trên khung nhúng nhỏ. Cách đơn giản là dùng đường link chia sẻ của địa điểm (nút Chia sẻ, chọn Gửi đường liên kết), hoặc dạng đường link chỉ đường của Google Maps có tham số destination là tên và địa chỉ cửa hàng.
Lỗi hay gặp và cách sửa
Ghim lệch, không hiện tên cửa hàng
Thường do nhúng theo địa chỉ chữ. Lấy lại mã từ trang của chính cửa hàng trên Google Maps. Nếu ghim trên Google Maps bị sai, phải sửa vị trí trong hồ sơ doanh nghiệp trước.
Khung tràn ngang trên điện thoại
Chiều rộng cố định. Đổi sang 100% như bước 3. Một số trình tạo website có ô "chiều rộng" riêng, ghi đè thuộc tính trong mã; kiểm tra cả ô đó.
Trang tải chậm
Bản đồ nằm ở đầu trang hoặc thiếu loading="lazy". Với trang có nhiều chi nhánh, mỗi chi nhánh một khung bản đồ sẽ rất nặng; cân nhắc dùng ảnh chụp bản đồ tĩnh kèm nút "Mở bản đồ" cho từng chi nhánh.
Dán mã vào bị hiện chữ thay vì bản đồ
Mã được dán vào ô văn bản thường, nên bị hiện nguyên dạng chữ. Cần dán vào khối HTML hoặc chế độ mã của trình soạn thảo.
Bản đồ hiện tên cửa hàng cũ, địa chỉ cũ
Khung nhúng lấy thông tin từ Google Maps. Cập nhật hồ sơ doanh nghiệp (tên, địa chỉ theo xã, phường mới) thì khung bản đồ cũng thay đổi theo, không cần nhúng lại.
Một lưu ý về quyền riêng tư
Khi khách mở trang có bản đồ nhúng, trình duyệt của họ tải nội dung từ Google, và Google có thể ghi nhận lượt xem đó. Nếu website có trang chính sách bảo mật, nên nhắc rằng trang có dùng bản đồ của bên thứ ba. Đây là chuyện nhỏ nhưng thể hiện sự minh bạch.
Kiểm tra lại sau khi nhúng
- Mở trang trên điện thoại thật, xoay ngang, xoay dọc.
- Bấm vào tên cửa hàng trên khung bản đồ xem có mở đúng hồ sơ không.
- Bấm nút Chỉ đường từ một nơi khác xem lộ trình có hợp lý không.
Muốn hỏi trực tiếp, bạn xem giờ làm việc và các kênh liên lạc ở trang liên hệ của WebCut. Nếu cần làm mới cả trang liên hệ hoặc cả website, chi nhánh Bình Sơn hỗ trợ cửa hàng trong tỉnh; xem trang làm website cho cửa hàng ở Quảng Ngãi.
Bản đồ trên website của bạn bị lệch ghim hoặc tràn màn hình điện thoại? Nhắn Zalo 0947805184 hoặc gọi 0947588971, gửi đường link trang liên hệ để được xem giúp.
Câu hỏi thường gặp
Nhúng bản đồ Google có mất phí không?
Mã nhúng lấy từ nút Chia sẻ của Google Maps dùng miễn phí. Các tính năng bản đồ nâng cao qua lập trình mới cần khóa API và có thể phát sinh phí.
Bản đồ nhúng có giúp lên top Google Maps không?
Không có bằng chứng rõ ràng như vậy. Bản đồ chủ yếu giúp khách tìm đường; việc xuất hiện trên Google Maps phụ thuộc hồ sơ doanh nghiệp, đánh giá và thông tin nhất quán.
Có nhiều chi nhánh thì nhúng thế nào?
Mỗi chi nhánh một khối thông tin riêng. Để trang nhẹ, có thể chỉ nhúng bản đồ cho chi nhánh chính, các chi nhánh khác dùng nút "Chỉ đường".
