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

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.

Việc hiển thị bản đồ không những tăng tính trực quan trên giao diện Web mà còn tăng độ tin cậy của khách hàng với doanh nghiệp của bạn.

Mời bạn theo dõi khóa học HTML/HTML5 cơ bản trực tuyến cùng DAMMIO.COM.

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 đồ.

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

Mã HTML:

<h2>Cách nhúng bản đồ Google Maps vào website -- DAMMIO.COM</h2>
<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ài viết đã hướng dẫn bạn cách nhúng bất kỳ bản đồ Google Maps nào lên website, cách làm rất đơn giản phải không nào. Chúng tôi chúc bạn thành công nhé!