Kết nối

Cách nhúng bản đồ Google (Google Maps) vào website của bạn

726 lượt xem 
 
Thể loại: Thiết kế Web 

Khi xây dựng và phát triển trang web cho các doanh nghiệp, công ty hay cửa hàng buôn bán, bạn có thể thấy nhiều nơi yêu cầu cần hiển thị địa điểm kinh doanh của họ trên bản đồ để khách hàng có thể biết và tới nơi mua hàng nhiều hơn.

Có nhiều bản đồ trực tuyến hiện nay nhưng lại không có bản đồ nào hiển thị chi tiết và cập nhật thường xuyên như Google Maps, một sản phẩm của tập đoàn công nghệ Hoa Kỳ Google. Google đã chi rất nhiều tiền cho việc sử dụng/thuê vệ tinh để chụp hình bản đồ Trái Đất và cập nhật vùng địa lý thường xuyên. Hơn nữa, Google cũng có cộng đồng đông đảo cộng tác viên giúp kiểm tra, đánh giá, chụp hình cho các địa điểm kinh doanh, vì vậy cách tốt nhất là bạn nên nhúng bản đồ Google vào website mà bạn đang thiết kế.

Để nhúng bản đồ Google, cách đơn giản là bạn mở trang https://www.google.com/maps hoặc https://maps.google.com, sau đó chọn địa điểm bạn thích nhúng, có thể phóng to, thu nhỏ tùy bạn.

Sau đó, bạn có thấy vạch 3 sọc ngang phía góc cao bên trái (khung cam trong hình sau), bạn nhấn nút vào đó.

Bạn kéo thanh menu này xuống dưới, chọn chức năng Chia sẻ hoặc nhúng bản đồ.

Tiếp theo khung bản đồ hiện ra, chọn Tab Nhúng bản đồ. Bạn có thể chọn kích thước hiển thị bản đồ (trong hình là mức Trung bình, ngoài ra bạn có thể tùy chỉnh kích thước) hay phóng to, thu nhỏ bản đồ (phím Ctrl + con lăn giữa chuột). Kế đến, bạn copy mã <ifram scr=” trong ô hoặc nhấn nút Sao chép HTML. Cuối cùng, chép (paste) mã này trên bất kỳ đâu trên trang web mà bạn muốn hiển thị bản đồ.

Cửa sổ nhúng bản đồ trên Google Maps.

Ví dụ nhúng một đoạn bản đồ trên website này như sau:

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7838.684254869503!2d106.70676642475235!3d10.785086936675276!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1svi!2s!4v1547181657956" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

Như vậy, bạn đã nhúng thành công bản đồ Google Maps lên website, rất đơn giản phải không. Chúc bạn thành công nhé!

Bình luận Facebook

Để lại bình luận

avatar
1000
  Theo dõi  
Thông báo của