Hướng dẫn thêm bản đồ maps cho module liên hệ hoặc module bất kỳ

Google map là một ứng dụng khá quan trọng trong việc tìm kiếm, hiển thị các địa điểm... Riêng với các website, việc tích hợp google map là một chức năng không quá xa lạ, tuy nhiên làm cách nào để tích hợp bản đồ maps vào trang web. Vì vậy, hôm nay mình sẽ hướng dẫn các bạn thêm bản đồ maps, cụ thể là cho module liên hệ.

1. Chuẩn bị một website:

Đầu tiên để cần chuẩn bị một website có phần liên hệ.
webnomaps
Hiện tại web của mình chưa có hiển thị maps, mình sẽ hướng dẫn các bạn thêm vào phần khung bên trái.

2. Chuẩn bị link nhúng:

Để tạo một bản đồ, bạn truy cập vào googlemap.com, tìm đến địa chỉ cửa hàng mà bạn cần thêm vào trang web.
mapsshare

Ngay dưới phần thông tin cửa hàng là nút share, nhấp vào nút share chọn copy html để lấy phần nhúng iframe.
mapsiframe
3. Nhúng link vào trang web:
Tiếp theo, các bạn vào phần admin, chọn module liên hệ => cấu hình module, tại đây các bạn chọn vào phần tùy chỉnh html (các bạn nhớ chuyển sang mã html nhé). Dán iframe vừa copy phía trên vào nhấn lưu lại
saaveiframe
Và đây là kết quả sau khi thực hiện nhúng.
webmaps
Tuy nhiên, để giao diện trông đẹp hơn, bạn có thể tùy chỉnh lại phần mã html. Các bạn xóa width và height mặc định và thay đổi lại theo ý muốn để vừa với khung của trang web. Ở đây mình đổi width:100% và height là 400px;
Sau khi tùy chỉnh các bạn sẽ có phần liên hệ với khung hiển thị maps hoàn chỉnh.
ketqua

Vậy là mình đã hướng dẫn xong phần thêm bản đồ maps cho module liên hệ, các module khác bạn chỉ cần làm tương tự là được.
Các bạn có câu hỏi nào hãy bình luận bên dưới nhé.
Video hướng dẫn:
 
Chia sẻ bài viết:

Tổng số điểm của bài viết là: 5 trong 1 đánh giá

Xếp hạng: 5 - 1 phiếu bầu
Click để đánh giá bài viết

  Trao đổi thảo luận