Nhúng Google Maps vào WordPress: 3 cách không cần plugin, dễ làm và không làm chậm web

Cách nhanh nhất để nhúng Google Maps vào WordPress là sao chép mã từ nút Chia sẻ của Google Maps rồi dán vào khối HTML tùy chỉnh, không cần plugin và chỉ mất vài phút. Nếu có nhiều chi nhánh hoặc muốn tùy biến sâu hơn, bạn có thêm hai lựa chọn khác. Bảng so sánh ở mục đầu giúp bạn chọn nhanh, còn mục cuối tổng hợp các lỗi hay gặp sau khi nhúng.

1. Nên chọn cách nhúng Google Maps vào WordPress nào?

Cả ba cách đều cho ra một khung bản đồ tương tác trên trang. Khác biệt nằm ở số địa điểm, mức độ kỹ thuật và khả năng tùy chỉnh. Với đa số doanh nghiệp có một cửa hàng, cách 1 đã đủ dùng.

Trước khi làm, hãy đảm bảo doanh nghiệp đã có hồ sơ đúng thông tin trên Google. Khi đó, bản đồ nhúng sẽ hiện tên, điểm đánh giá và nút chỉ đường của doanh nghiệp thay vì chỉ một ghim địa chỉ. Nếu chưa có, xem bài Google Business Profile là gì.

2. Cách 1: Dán mã iframe vào khối HTML tùy chỉnh

Đây là cách nhanh nhất, chỉ mất vài phút. Bạn lấy mã trên Google Maps bằng máy tính rồi dán vào WordPress như sau:

1. Mở Google Maps trên máy tính, tìm đúng tên doanh nghiệp của bạn.
2. Nhấn Chia sẻ ở bảng thông tin địa điểm, chuyển sang thẻ Nhúng bản đồ.
3. Chọn kích thước, nhấn Sao chép HTML.
4. Trong WordPress, mở trang cần chèn, nhấn dấu +, gõ "HTML" và chọn khối HTML tùy chỉnh.
5. Dán mã vừa sao chép, chuyển sang xem trước để kiểm tra, rồi nhấn Cập nhật.

Mã bạn nhận được có dạng như sau (phần địa chỉ trong src là của riêng từng địa điểm, hãy dùng đúng mã Google cung cấp):

<iframe src="https://www.google.com/maps/embed?pb=..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

Nếu dùng trình soạn thảo cổ điển, hãy chuyển sang thẻ Văn bản rồi mới dán mã. Để đưa bản đồ vào chân trang, bạn dùng khối HTML tùy chỉnh trong phần Giao diện, mục Tiện ích (Widget) nếu giao diện đang dùng có hỗ trợ.

3. Cách 2: Dùng Google My Maps cho nhiều địa điểm

Mã iframe thông thường chỉ hiển thị một địa điểm. Nếu có nhiều chi nhánh, bạn có thể tạo bản đồ riêng bằng Google My Maps, một công cụ miễn phí của Google.

1. Truy cập Google My Maps, đăng nhập và chọn Tạo bản đồ mới.
2. Tìm từng chi nhánh, nhấn Thêm vào bản đồ. Đặt tên dễ hiểu và có thể đổi màu ghim.
3. Nhấn Chia sẻ, bật chế độ để bất kỳ ai có đường liên kết đều xem được, vì bản đồ riêng tư sẽ không hiển thị với khách.
4. Mở menu ba chấm, chọn Nhúng vào trang web của tôi và sao chép mã.
5. Dán mã vào khối HTML tùy chỉnh như cách 1.

Điểm cần nhớ: bản đồ My Maps do bạn tự quản lý, không tự cập nhật theo hồ sơ doanh nghiệp. Khi chi nhánh đổi địa chỉ hoặc đóng cửa, hãy sửa lại trên My Maps. Cũng nên kiểm tra lại mã nhúng sau khi đổi quyền chia sẻ.

4. Cách 3: Dùng Maps Embed API khi cần tùy biến

Cách này phù hợp khi bạn muốn tạo đường dẫn bản đồ theo dữ liệu, chẳng hạn mỗi trang chi nhánh tự hiển thị đúng địa chỉ, hoặc chọn chế độ như chỉ đường hay tìm kiếm. Theo tài liệu của Google, Maps Embed API được dùng miễn phí và không giới hạn số yêu cầu, nhưng mỗi yêu cầu phải có khóa API.

1. Vào Google Cloud Console, tạo dự án và bật Maps Embed API.
2. Tạo khóa API, sau đó giới hạn khóa theo tên miền website để người khác không dùng được.
3. Tạo iframe với đường dẫn có khóa API và tên địa điểm, rồi dán vào khối HTML tùy chỉnh.

<iframe src="https://www.google.com/maps/embed/v1/place?key=KHOA_API&q=Ten+doanh+nghiep,Dia+chi" width="600" height="450" style="border:0;" allowfullscreen loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

Nếu website chỉ cần một bản đồ ở trang liên hệ, bạn không cần dùng đến cách này. Hãy để phần kỹ thuật này cho lập trình viên hoặc đơn vị quản trị website, đặc biệt nếu bạn chưa quen với việc quản lý khóa API.

5. Tối ưu và xử lý lỗi sau khi nhúng

Sau khi bản đồ đã hiện, bạn nên kiểm tra trên điện thoại vì đây là nơi khách hay dùng bản đồ nhất. Mã mặc định có chiều rộng cố định nên có thể tràn màn hình. Cách đơn giản là đổi width thành 100%:

<iframe src="..." width="100%" height="400" style="border:0;" allowfullscreen loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

Các lưu ý để bản đồ không ảnh hưởng tới tốc độ và trải nghiệm:

• Giữ thuộc tính loading="lazy" để bản đồ chỉ tải khi khách cuộn tới.
• Chỉ nhúng ở trang cần thiết, thường là trang liên hệ và trang chi nhánh, tránh đặt ở mọi trang.
• Luôn ghi địa chỉ bằng chữ cạnh bản đồ, khớp với hồ sơ doanh nghiệp, để khách và công cụ tìm kiếm đều đọc được. Xem thêm SEO Google Maps.

Một số lỗi hay gặp và cách xử lý:

• Hiện mã chữ thay vì bản đồ: bạn đã dán vào đoạn văn thường. Hãy xóa đi và dán vào khối HTML tùy chỉnh.
• Lưu xong iframe biến mất: tài khoản có thể không đủ quyền. Trên WordPress, thường chỉ quản trị viên và biên tập viên mới được lưu mã HTML không lọc, nên hãy dùng tài khoản phù hợp.
• Khung bản đồ trắng: kiểm tra plugin bảo mật, cấu hình Content-Security-Policy hoặc tính năng tối ưu tải iframe của plugin cache.
• Sai địa điểm: lấy lại mã từ đúng hồ sơ doanh nghiệp thay vì từ tọa độ hoặc địa chỉ gần đó.

Website nhanh và rõ thông tin cũng là một phần của nền tảng SEO. Nếu đang xây dựng hoặc làm lại website, bạn có thể tham khảo bài thiết kế website chuẩn SEO.

Kết luận

Nhúng xong, hãy mở trang bằng điện thoại một lần: bản đồ có tràn màn hình không, có bấm mở chỉ đường được không, địa chỉ đã được ghi bằng chữ bên cạnh chưa. Nếu mọi thứ đều ổn, mã iframe hoặc Google My Maps đã đủ cho phần lớn website và bạn không cần cài thêm plugin. Maps Embed API chỉ đáng dùng khi thật sự cần tùy biến.