Nhúng Google Map vào website, HTML và WordPress bằng iframe responsive
Công cụ tạo mã nhúng Google Map nhận địa chỉ, tên địa điểm, tọa độ, link Google Maps hoặc chính mã nhúng bạn lấy từ Google, rồi sinh đoạn iframe co giãn theo chiều rộng màn hình, có tải chậm, tiêu đề cho trình đọc màn hình và chính sách referrer. Bạn chọn mức zoom, kiểu bản đồ, tỷ lệ khung, xem trước ngay trên trang và lấy mã cho HTML, khối HTML tùy chỉnh của WordPress hoặc component React, Next.js.
Tính năng nổi bật
- Nhận năm dạng đầu vào: địa chỉ hoặc tên địa điểm, tọa độ thập phân (21.0285, 105.8542), tọa độ độ phút giây (21°01'42.6"N 105°51'15.1"E), link Google Maps đầy đủ, mã iframe có sẵn của Google
- Đọc link Google Maps: tên địa điểm trong /place/ và /search/, vị trí ghim chính xác trong phần data (!3d, !4d), tâm khung nhìn và mức zoom trong @vĩ độ,kinh độ,zoom, điểm đi và điểm đến trong /dir/, tham số q, ll, z
- Nhận ra link rút gọn maps.app.goo.gl, goo.gl: không gọi mạng để mở mà hướng dẫn cách lấy link đầy đủ
- Hai kiểu mã: không cần API key (maps.google.com/maps?...&output=embed) hoặc Maps Embed API chính thức với khóa của bạn (để trống thì ghi YOUR_API_KEY)
- Chỉ đường giữa hai điểm, chọn phương tiện ô tô, đi bộ, xe đạp, công cộng khi dùng Maps Embed API
- Chọn mức zoom 3 đến 21 hoặc tự động theo link, kiểu bản đồ thường, vệ tinh, vệ tinh có nhãn, địa hình, ngôn ngữ nhãn
- Khi link có cả tên lẫn tọa độ, chọn ghim theo tên địa điểm (hiện thẻ thông tin) hay theo tọa độ chính xác
- Responsive bằng CSS aspect-ratio với tỷ lệ 16:9, 4:3, 1:1, 21:9, hoặc kích thước cố định theo pixel
- Mã có loading="lazy", referrerpolicy="no-referrer-when-downgrade", allowfullscreen, thuộc tính title tự đặt theo địa điểm hoặc tự nhập; ký tự đặc biệt được thoát đúng cho HTML và JSX
- Ba dạng mã: HTML, WordPress (khối HTML tùy chỉnh), component React/Next.js với referrerPolicy, allowFullScreen, aspectRatio
- Xem trước bản đồ thật ngay trên trang, cập nhật sau khi ngừng gõ; mã nhúng Google dán vào được làm responsive mà giữ nguyên src
Google Maps đã có mã nhúng, sao còn cần công cụ này
Nút Chia sẻ, Nhúng bản đồ của Google Maps cho một đoạn iframe rộng 600, cao 450 điểm ảnh. Đặt nguyên đoạn đó vào website, bản đồ sẽ tràn ngang hoặc bị cắt trên điện thoại, và trang liên hệ trông lỗi ngay ở màn hình nhiều người xem nhất. Muốn bản đồ co giãn, bạn phải bọc iframe trong một khung có tỷ lệ và sửa thuộc tính, chưa kể thêm title cho trình đọc màn hình. Khi làm React hay Next.js, mã HTML của Google còn phải đổi sang cú pháp JSX. Ngoài ra, nhiều người chỉ có địa chỉ hoặc tọa độ của cửa hàng chứ không muốn mở Google Maps, tìm đúng chỗ, mở menu chia sẻ. Công cụ gom các bước đó lại: nhập thứ bạn đang có, chỉnh vài lựa chọn, xem trước rồi chép mã đúng nền tảng.
Lợi ích khi sử dụng
- Bản đồ co giãn đúng tỷ lệ trên điện thoại, máy tính bảng và màn hình rộng, không tràn ngang
- Trang tải nhanh hơn vì bản đồ chỉ tải khi người xem cuộn tới
- Đạt yêu cầu khả năng tiếp cận nhờ iframe có tiêu đề mô tả
- Có sẵn mã JSX cho React và Next.js, không phải tự đổi thuộc tính
- Không phải mở Google Maps nếu đã có địa chỉ hoặc tọa độ
- Biết rõ giới hạn của từng kiểu mã để chọn cách bền vững cho website
Cách lấy mã nhúng Google Map responsive
- 1Trong ô Địa điểm, nhập địa chỉ hoặc tên địa điểm, tọa độ, dán link Google Maps đầy đủ, hoặc dán mã nhúng lấy từ nút Chia sẻ, Nhúng bản đồ của Google. Dòng chữ xanh bên dưới cho biết công cụ đã đọc được gì.
- 2Nếu cần chỉ đường, nhập điểm đến vào ô Chỉ đường đến (tùy chọn).
- 3Ở khối Tùy chọn bản đồ, chọn Kiểu mã nhúng: Không cần API key, hoặc Maps Embed API rồi nhập Khóa API của bạn.
- 4Chọn Mức zoom, Ngôn ngữ nhãn, Kiểu bản đồ, Kích thước (tỷ lệ hoặc Cố định px), sửa Tiêu đề iframe nếu muốn, bật hoặc tắt Tải chậm.
- 5Ở khối Mã nhúng, chọn HTML, WordPress hoặc React / Next.js rồi bấm Sao chép mã.
- 6Bấm Hiện bản xem trước để kiểm tra bản đồ trước khi dán lên website.
Ba cách nhúng Google Maps vào website
Cách thứ nhất là nút Chia sẻ, Nhúng bản đồ trong Google Maps: chính thức, không cần khóa, nhưng phải tìm địa điểm trên Google Maps trước và mã có kích thước cố định. Src của mã này có dạng www.google.com/maps/embed?pb=... chứa dữ liệu mã hóa; bạn có thể dán nguyên mã vào công cụ để bọc thành responsive. Cách thứ hai là Maps Embed API: địa chỉ www.google.com/maps/embed/v1/place?key=...&q=... có tài liệu đầy đủ, hỗ trợ chế độ ghim địa điểm, chỉ đường, tìm kiếm, cần một khóa API tạo trong Google Cloud Console. Cách thứ ba là địa chỉ cũ maps.google.com/maps?q=...&output=embed: không cần khóa, chỉ cần địa chỉ hoặc tọa độ, nhưng không nằm trong tài liệu hiện hành của Google. Ngày 27/10/2026, chúng tôi gọi thử dạng này bằng curl: Google trả về chuyển hướng 301 sang trang nhúng chính thức /maps/embed?origin=mfe&pb=..., trang đích trả về 200 và không có tiêu đề chặn nhúng X-Frame-Options. Vì không có cam kết, hãy kiểm tra lại bản đồ định kỳ nếu dùng cách này.
Dùng Maps Embed API và giữ an toàn cho khóa
Khóa API nằm công khai trong mã HTML của trang, ai xem mã nguồn cũng thấy, nên bảo vệ khóa bằng giới hạn chứ không phải bằng giấu. Trong Google Cloud Console, tạo dự án, bật Maps Embed API, tạo khóa, rồi đặt giới hạn ứng dụng là các trang web (HTTP referrer) với tên miền của bạn, ví dụ https://tenmien.vn/*, và giới hạn API chỉ cho Maps Embed API. Khi đó người khác chép khóa sang trang của họ cũng không dùng được. Vì giới hạn referrer cần trình duyệt gửi địa chỉ trang, mã nhúng dùng referrerpolicy="no-referrer-when-downgrade", đúng như mã Google đưa ra. Maps Embed API chỉ có hai kiểu bản đồ roadmap và satellite, nên kiểu vệ tinh có nhãn và địa hình được đổi về kiểu gần nhất. Về chi phí và hạn mức, hãy xem bảng giá hiện hành của Google Maps Platform vì Google có thể thay đổi.
Responsive bằng aspect-ratio
Iframe không tự giữ tỷ lệ khi chiều rộng thay đổi. Cách công cụ dùng là bọc iframe trong một thẻ div rộng 100% có thuộc tính CSS aspect-ratio, ví dụ 16 / 9, rồi cho iframe nằm tuyệt đối phủ kín khung. Khi màn hình hẹp lại, khung giữ đúng tỷ lệ nên bản đồ không bị bóp méo hay để lại khoảng trống. aspect-ratio được hỗ trợ trên các trình duyệt phổ biến từ khoảng năm 2021; với website phải chạy trên trình duyệt rất cũ, chọn Cố định px để có width và height cụ thể, kèm max-width: 100% để không tràn. Tỷ lệ 16:9 hợp với trang liên hệ trên máy tính, 4:3 hoặc 1:1 hợp khi bản đồ nằm trong cột hẹp hay chủ yếu xem trên điện thoại, 21:9 hợp với dải bản đồ ngang toàn trang.
Lazy loading, title và referrerpolicy
Một bản đồ nhúng tải khá nhiều tài nguyên từ Google. Thuộc tính loading="lazy" báo trình duyệt hoãn tải iframe cho tới khi người xem cuộn gần tới, giúp phần đầu trang hiện nhanh hơn, đặc biệt khi bản đồ nằm ở chân trang. Chỉ nên tắt khi bản đồ là nội dung chính ở đầu trang. Thuộc tính title mô tả nội dung khung, ví dụ "Bản đồ cửa hàng ở Quận 1", để người dùng trình đọc màn hình biết khung này là gì; công cụ tự đặt theo địa điểm, bạn nên sửa cho cụ thể. allowfullscreen cho phép người xem phóng to bản đồ toàn màn hình. referrerpolicy="no-referrer-when-downgrade" gửi địa chỉ trang khi tải bản đồ qua HTTPS, cần thiết cho khóa API có giới hạn tên miền.
Đọc link Google Maps và tọa độ
Link Google Maps đầy đủ chứa khá nhiều thông tin. Phần /place/Tên+địa+điểm/ cho tên, phần @21.0287797,105.8495627,17z cho tâm khung nhìn và mức zoom lúc bạn chép link, còn chuỗi !3d21.0287747!4d105.8521376 trong phần data là vị trí ghim thật của địa điểm. Công cụ ưu tiên vị trí ghim; nếu link chỉ có @..., nó báo rằng đó là tâm khung nhìn, có thể lệch so với địa điểm bạn muốn. Link chỉ đường /dir/Điểm A/Điểm B/ được tách thành điểm đi và điểm đến. Tọa độ có thể nhập dạng thập phân như Google Maps hiển thị khi bạn nhấp chuột phải lên bản đồ (21.0285, 105.8542), dạng dấu phẩy thập phân kiểu Việt Nam cách nhau bằng dấu cách hoặc chấm phẩy (21,0285 105,8542), hoặc dạng độ phút giây như trong ảnh chụp có GPS; vĩ độ Nam và kinh độ Tây được đổi thành số âm. Link chỉ có mã cid hoặc link rút gọn thì không đủ dữ liệu, công cụ sẽ hướng dẫn cách lấy link đầy đủ.
Nhúng vào WordPress, Next.js và các trình dựng trang
Trong trình soạn thảo khối của WordPress, thêm khối HTML tùy chỉnh (Custom HTML) và dán mã ở thẻ WordPress. Lưu ý WordPress chỉ giữ iframe khi tài khoản có quyền unfiltered_html, thường là quản trị viên; tài khoản tác giả hoặc cộng tác viên có thể thấy iframe bị xóa khi lưu. Với Elementor hay các trình dựng trang khác, dùng widget HTML. Trong React và Next.js, dùng component ở thẻ React / Next.js: thuộc tính đã đổi sang referrerPolicy, allowFullScreen, style dạng object, chuỗi src và title được ghi bằng cú pháp an toàn cho JSX. Nếu website dùng Content Security Policy, cần cho phép frame-src tới https://www.google.com và https://maps.google.com, vì dạng không cần khóa đi qua maps.google.com rồi chuyển sang www.google.com.
Giới hạn
Công cụ không gọi mạng để đọc link rút gọn, không tìm địa chỉ thành tọa độ (geocoding) và không kiểm tra địa chỉ có tồn tại trên Google Maps không; Google sẽ tự tìm theo chữ bạn nhập, nên địa chỉ càng cụ thể càng ghim đúng. Mức zoom, kiểu bản đồ, ngôn ngữ và chỉ đường không áp dụng khi bạn dán mã nhúng có sẵn, vì src của mã đó đã mã hóa sẵn các thông số. Dạng không cần khóa phụ thuộc vào việc Google còn hỗ trợ địa chỉ cũ. Bản xem trước tải bản đồ trực tiếp từ Google, nên Google có thể ghi nhận lượt tải như khi bản đồ hiển thị trên website.
Câu hỏi thường gặp (FAQ)
Làm sao lấy mã nhúng Google Map?
Nhập địa chỉ, tọa độ hoặc dán link Google Maps vào ô Địa điểm, chọn HTML, WordPress hoặc React / Next.js rồi bấm Sao chép mã. Mã đã có sẵn khung co giãn và tải chậm. Bạn cũng có thể lấy mã gốc bằng nút Chia sẻ, Nhúng bản đồ trong Google Maps rồi dán vào đây để làm responsive.
Nhúng Google Map vào website có mất phí không?
Kiểu không cần API key và mã lấy từ nút Nhúng bản đồ của Google không yêu cầu khóa hay tài khoản Google Cloud. Maps Embed API cần khóa tạo trong Google Cloud Console; chi phí và hạn mức hãy xem bảng giá hiện hành của Google Maps Platform. Công cụ này miễn phí.
Vì sao bản đồ nhúng bị tràn hoặc vỡ trên điện thoại?
Mã gốc của Google đặt cứng width=600 và height=450, rộng hơn màn hình điện thoại. Mã của công cụ bọc iframe trong khung rộng 100% có aspect-ratio, nên bản đồ co theo chiều rộng màn hình mà giữ tỷ lệ. Chọn tỷ lệ 4:3 hoặc 1:1 nếu muốn bản đồ cao hơn trên điện thoại.
Nhúng Google Map vào WordPress thế nào?
Thêm khối HTML tùy chỉnh trong trình soạn thảo, dán mã ở thẻ WordPress rồi cập nhật trang. Nếu iframe biến mất sau khi lưu, tài khoản của bạn có thể không có quyền unfiltered_html, hãy nhờ quản trị viên dán. Với Elementor, dùng widget HTML.
Nhúng Google Map vào HTML thế nào?
Chọn thẻ HTML, sao chép và dán đoạn mã vào chỗ muốn hiện bản đồ trong file HTML, thường là trang liên hệ. Đoạn mã gồm một thẻ div giữ tỷ lệ và iframe bên trong, không cần thêm CSS hay JavaScript.
Link maps.app.goo.gl có dùng được không?
Không đọc trực tiếp được, vì đó là link rút gọn và công cụ không tự mở link. Hãy mở link trên trình duyệt, đợi Google Maps hiện địa điểm rồi chép địa chỉ đầy đủ trên thanh địa chỉ (bắt đầu bằng https://www.google.com/maps/place/...). Hoặc nhập tên địa điểm hay tọa độ.
Có nhúng nhiều địa điểm trên cùng một bản đồ được không?
Không, mã nhúng do công cụ tạo ra hiện một địa điểm, hoặc đường đi giữa hai điểm. Muốn một bản đồ có nhiều ghim (chuỗi cửa hàng, các chi nhánh), hãy tạo bản đồ trong Google My Maps, thêm các điểm, đặt chế độ chia sẻ công khai rồi chọn Nhúng vào trang web của tôi. Bạn có thể dán mã iframe đó vào ô nhập của công cụ để có bản responsive, lazy loading và title.
Lấy tọa độ một địa điểm trên Google Maps thế nào?
Trên máy tính, nhấp chuột phải vào điểm trên bản đồ, dòng đầu tiên của menu là tọa độ, nhấp vào là chép được. Trên điện thoại, nhấn giữ vào điểm đó để thả ghim, tọa độ hiện ở ô tìm kiếm. Dán tọa độ vào công cụ để ghim chính xác điểm đó.
Nên ghim theo tên địa điểm hay theo tọa độ?
Ghim theo tên hiện thẻ thông tin của địa điểm như tên, đánh giá, giờ mở cửa nếu địa điểm có trên Google Maps. Ghim theo tọa độ đặt đúng vị trí bạn chọn nhưng chỉ hiện con số tọa độ. Với cửa hàng đã có hồ sơ Google, ghim theo tên thường đẹp hơn; với địa điểm chưa có tên trên Google, dùng tọa độ.
Có cần API key không?
Không bắt buộc. Kiểu không cần API key chạy được ngay, nhưng đó là địa chỉ cũ không có trong tài liệu hiện hành của Google. Nếu website quan trọng và cần ổn định lâu dài, dùng Maps Embed API với khóa có giới hạn tên miền, hoặc dán mã từ nút Nhúng bản đồ của Google.
Mã nhúng có làm chậm website không?
Có, bản đồ tải nhiều tài nguyên từ Google. Bật Tải chậm để iframe chỉ tải khi người xem cuộn gần tới, nên phần đầu trang không bị ảnh hưởng. Tránh đặt nhiều bản đồ trên cùng một trang.
Có hiện đường đi giữa hai địa điểm được không?
Được. Nhập điểm đi ở ô Địa điểm, điểm đến ở ô Chỉ đường đến, hoặc dán link chỉ đường /dir/ của Google Maps. Với Maps Embed API, bạn chọn được phương tiện ô tô, đi bộ, xe đạp, công cộng; với kiểu không cần key, công cụ dùng tham số cũ saddr, daddr nên hãy xem bản xem trước.
Đổi bản đồ sang chế độ vệ tinh được không?
Được, chọn Vệ tinh hoặc Vệ tinh có nhãn ở mục Kiểu bản đồ. Kiểu không cần key hỗ trợ cả bản đồ thường, vệ tinh, vệ tinh có nhãn và địa hình; Maps Embed API chỉ có bản đồ thường và vệ tinh.
Thuộc tính title trong iframe để làm gì?
Title cho trình đọc màn hình biết khung nhúng chứa gì, giúp người khiếm thị điều hướng trang. Đây cũng là yêu cầu trong hướng dẫn khả năng tiếp cận WCAG cho khung nhúng. Nên ghi cụ thể, ví dụ Bản đồ đường đến văn phòng ở Quận 3.
Dùng mã trong Next.js có cần sửa gì không?
Không, chọn thẻ React / Next.js để có component GoogleMap với đúng tên thuộc tính JSX. Nếu website có Content Security Policy, thêm https://www.google.com và https://maps.google.com vào frame-src. Component dùng được cả trong Server Component vì không có state hay sự kiện.
Vì sao bản xem trước không hiện?
Ở chế độ Maps Embed API, bản xem trước chỉ hiện khi đã nhập khóa; khóa sai hoặc chưa bật Maps Embed API sẽ hiện thông báo lỗi của Google trong khung. Ở chế độ không cần key, hãy kiểm tra kết nối mạng hoặc tiện ích chặn quảng cáo, vì một số tiện ích chặn khung của Google.
Mã nhúng có hiển thị đúng tiếng Việt không?
Có, mục Ngôn ngữ nhãn mặc định là Tiếng Việt nên tên đường, nút điều khiển hiện tiếng Việt. Chọn Theo trình duyệt người xem nếu website có khách nước ngoài. Địa chỉ có dấu trong mã được mã hóa đúng trong URL.
Từ khóa liên quan
- nhúng google map
- mã nhúng google map
- lấy mã nhúng google map
- nhúng google map vào website
- nhúng google map vào html
- nhúng google map vào wordpress
- nhúng iframe google map
- google map embed code
- google maps iframe responsive
- embed google map responsive
- tạo mã nhúng bản đồ
- chèn bản đồ vào website
- google maps embed api
- nhúng google map vào next.js
- nhúng google map vào react
- iframe google map lazy load
- bản đồ google cho trang liên hệ
- nhúng bản đồ chỉ đường
- google map tọa độ
- chuyển link google map sang iframe
- nhúng google map không cần api key
- nếu muốn nhúng google maps vào trang web