Hướng dẫn nhúng Google Maps vào website

Cập nhật: 18/06/2019

Bài viết sau sẽ hướng dẫn nhúng Google Maps vào trong bài viết, trang và Sidebar

  1. Lấy mã nhúng Google Maps
  2. Nhúng mã vào bài viết/trang hoặc Sidebar

Video chi tiết

hoặc hướng dẫn bên dưới

Phần 1. Lấy mã nhúng Google Maps

Đầu tiên truy cập vào Google Maps theo địa chỉ: Maps.Google.com – Gõ địa chỉ vào ô Search Google Maps rồi Enter hoặc nhấn nút Tìm kiếm (biểu tượng kính lúp trong hình).

nhung-google-maps-1-min

Nhấp chuột vào phần Share (hoặc Chia sẻ, nếu đang để giao diện Tiếng Việt).

nhung-google-maps-2-min

Chọn tiếp phần Embed a map

nhung-google-maps-3-min

Nhấp chuột vào COPY HTML

Bạn sẽ nhận được một đoạn mã dạng như sau:

<iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3826.2094863163757!2d107.59270841410785!3d16.464926933086904!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3141a13c344b734f%3A0x551d8f18f5cc94f3!2zNjUgQuG6v24gTmdow6ksIFBow7ogSOG7mWksIFRow6BuaCBwaOG7kSBIdeG6vywgVGjhu6thIFRoacOqbiBIdeG6vywgVmlldG5hbQ!5e0!3m2!1sen!2s!4v1526877865584″ width=”600″ height=”450″ frameborder=”0″ style=”border:0″ allowfullscreen></iframe>

Trong đó width=”600″ và “height=”450” theo thứ tự là chiều rộng và chiều cao của bản đồ.

Phần 2. Nhúng Google Maps vào bài viết

Cách nhúng vào bài viết và trang giống nhau, nên mình sẽ hướng dẫn nhúng vào bài viết.

Mở bài viết cần nhúng. Đặt con trỏ chuột tại vị trí cần nhúng. Chọn Văn bản

nhung-google-maps-5-min

Dán đoạn mã nhúng Google Maps đã có ở trên vào vị trí cần nhúng

nhung-google-maps-6-min

Cập nhật (hoặc Đăng bài viết) và xem kết quả.

nhung-google-maps-7-min

Phần 3. Nhúng Google Maps vào Sidebar

Để nhúng Google Maps vào Sidebar, chúng ta phải sử dụng các Widgets, có hai widgets phù hợp yêu cầu là:

  • Văn bản (Text)
  • Custom HTML

Đầu tiên truy cập vào Giao diện –> Widget

nhung-google-maps-vao-sidebar-1-min

Nhìn sang bên phải bạn sẽ thấy rất nhiều mục. Nếu bạn muốn chèn vào Sidebar phía bên phải hoặc trái web thì nhấp vào mũi tên tương ứng tại Right Sidebar hoặc Left Sidebar.

nhung-google-maps-vao-sidebar-2-min

Kéo Widget HTML Tùy chỉnh (hoặc Custom HTML) vào Left/Right Sidebar tương ứng. Sau đó dán đoạn mã nhúng của Google Maps rồi chọn Lưu thay đổi.

nhung-google-maps-vao-sidebar-3-min

Bạn cũng có thể kéo Widget Văn bản (Text) vào Left/Right Sidebar tương ứng. Sau đó chọn mục Văn bản rồi dán đoạn mã Nhúng, rồi chọn Lưu thay đổi.

nhung-google-maps-vao-sidebar-4-min