Bài viết sau sẽ hướng dẫn nhúng Google Maps vào trong bài viết, trang và Sidebar
- Lấy mã nhúng Google Maps
- 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).
Nhấp chuột vào phần Share (hoặc Chia sẻ, nếu đang để giao diện Tiếng Việt).
Chọn tiếp phần Embed a map
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
Dán đoạn mã nhúng Google Maps đã có ở trên vào vị trí cần nhúng
Cập nhật (hoặc Đăng bài viết) và xem kết quả.
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
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.
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.
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.