Giới thiệu

Trong website Tournament, bản đồ Google Map thường được sử dụng để hiển thị địa điểm tổ chức, địa chỉ liên hệ hoặc văn phòng Ban Tổ Chức. Để bản đồ hiển thị chính xác và đúng vị trí, Admin cần thực hiện lần lượt hai bước: lấy mã nhúng Google Map và gắn mã này vào trang Liên hệ trong Admin.

Hướng dẫn thực hiện

Lấy link nhúng Google Map từ Google Maps

1.png
2.png
Trước tiên, Admin cần truy cập vào Google Maps và xác định chính xác địa điểm muốn hiển thị trên website.
  • Mở Google Maps trên trình duyệt
  • Nhập địa chỉ cần hiển thị (ví dụ: 10 Phan Xích Long, Phường 4, Phú Nhuận, TP. Hồ Chí Minh)
  • Kiểm tra lại pin vị trí trên bản đồ để đảm bảo đúng địa điểm mong muốn
Khi đã chọn đúng địa điểm:
  • Click vào nút Chia sẻ
  • Chuyển sang tab Nhúng bản đồ
  • Google Maps sẽ hiển thị một đoạn mã <iframe>
  • Nhấn Sao chép HTML để copy toàn bộ đoạn mã nhúng
👉 Lưu ý:
  • Nên giữ kích thước bản đồ ở mức Trung bình hoặc Lớn để hiển thị rõ trên desktop
  • Không chỉnh sửa nội dung bên trong link nếu không cần thiết, tránh làm sai tọa độ bản đồ

Truy cập trang Liên hệ trong Admin để cập nhật bản đồ

1.png
Sau khi đã có đoạn mã nhúng Google Map, Admin quay lại hệ thống quản trị của website Tournament để gắn bản đồ vào trang.Từ Admin, vào Các trang:
  • Tìm và chọn trang Hỗ Trợ → Chọn mục liên hệ
  • Nhấn Sửa trang để mở giao diện chỉnh sửa nội dung
Trong nội dung trang, Admin sẽ thấy phần code HTML được chia thành các khu vực, thường bao gồm:
  • Phần thông tin liên hệ (bên trái)
  • Phần bản đồ (bên phải – khu vực div class="map" hoặc Right)

Thay thế iframe Google Map trong nội dung trang

3.png
Tại khu vực hiển thị bản đồ:
  • Tìm thẻ <iframe> hiện tại (đang trỏ tới bản đồ cũ)
  • Dán đoạn mã <iframe> vừa sao chép từ Google Maps vào thay thế hoàn toàn iframe cũ
Một số điểm cần kiểm tra nhanh trong iframe:
  • Thuộc tính src chứa đúng link Google Maps mới
  • Có loading="lazy" để tối ưu tốc độ tải
  • Không bị thiếu thẻ đóng </iframe>
👉 Gợi ý:
  • Chỉ thay phần src nếu muốn giữ nguyên layout
  • Nếu thay toàn bộ iframe, đảm bảo không xóa nhầm thẻ <div> bao quanh

Lưu thay đổi và kiểm tra ngoài website

4.png
Sau khi dán iframe Google Map mới, Admin nhấn Cập nhậtđể lưu nội dung và hệ thống sẽ tự động áp dụng thay đổi lên website Tournament. Tiếp theo, truy cập website, vào menu Liên hệ để kiểm tra bản đồ hiển thị đúng địa điểm đã chọn, có thể zoom/kéo bình thường, không gặp lỗi trắng hoặc lỗi tải iframe, bố cục cân đối với phần thông tin liên hệ và hiển thị ổn định trên cả desktop lẫn mobile; nếu mọi thứ đúng và giao diện không vỡ layout, việc cấu hình Google Map đã hoàn tất.

Lưu ý

✔ Chỉ lấy mã Nhúng bản đồ (iframe) và bấm Sao chép HTML, không dùng link “Gửi liên kết”.
✔ Khi thay iframe, tránh xóa nhầm các thẻ **
** bao quanh để không vỡ layout.✔ Ưu tiên giữ kích thước bản đồ Trung bình/Lớn, có loading="lazy" và đủ thẻ đóng </iframe>.✔ Nếu chỉnh sửa, chỉ nên thay phần src khi muốn giữ nguyên bố cục.