Nhúng bản đồ Google Map vào website

• 
  

Hôm nay Tuổi Trẻ VN Online sẽ hướng dẫn các bạn cách chèn bản đồ Google Maps vào website. Đây cũng là một nhu cầu đối với các bạn đang tập làm web hoặc dùng các mã nguồn mở để làm web mà không cần đụng đến code.

Lợi ích của việc chèn bản đồ Google map vào website:

- Tạo cho người dùng khi ghé thăm website có một cái nhìn tổng quan về địa điểm nơi bán hàng.
- Không sử dụng thông qua một website về địa điểm nào mà vẫn có thể tìm thấy địa điểm cần ghé tới.
- Ghi chú một cách trực quan nhất về địa điểm. Đảm bảo cho bạn có đầy đủ tính năng của một trang LIÊN HỆ - GIỚI THIỆU.
- Khách hàng sẽ dễ dàng tìm ra đường đi đến cửa hàng của bạn hơn mà không mất công tìm đường.

Các bước thực hiện nhúng google map vào web

Việc nhúng bản đồ của google vào website của bạn cũng khá đơn giản thôi, đầu tiên bạn đăng ký với google một tài khoảng đó chính là Gmail của bạn. Sau đó đăng nhập vào tài khoản ấy típ đến truy câp vào link:http://maps.google.com/maps, bạn click vào My places (địa điểm của tôi).

Chọn My places trong google map

Sau đó bạn nhìn bên phải tìm địa chỉ nào bạn muốn nhúng vào website, giả sử mình chọn địa chỉ có thể đánh tên địa danh vào khung Search hoặc địa chỉ cụ thể. Lưu ý là đã đăng ký địa danh này trong Google Map. Sau đó chọn Save to map(Lưu vào). Lưu ý các bạn một điều nếu bạn sử dụng google chrome thì sẽ hỗ trợ tiếng Việt cho bạn lúc cài đặt (khai báo) bản đồ này luôn. Sau đó chọn create new map (Tạo địa chỉ mới) và save lại.

Sau đó nếu bạn muốn chỉnh sửa thì bấm vào Edit bên sidebar trái của google map. Ở đây bạn có thể chỉnh sửa tiêu đề hiển thị, dòng ghi chú cho bản đồ của bạn.


Các bước đến đây gần như là hoàn thành, bạn xem lại địa chỉ đã chính xác hay chưa thì ta get code mang về để vào web là chúng ta có bản đồ cho doanh nghiệp mình trên website.

Lấy Code Google Map nhúng vào website

Bạn click vào biểu tượng hình liên kết thân quen của mình và dòng dưới là dòng google cho chúng ta nhúng vào web. Bạn có thể thay đổi kích thước của frame (khung) này sao cho phù hợp với giao diện website của bạn.

Bạn lưu ý với đường link map bạn có thể copy nó vào các trang web hoặc email, nếu bạn thấy quá dài thì check vào URL ngắn nó sẽ cho bạn đường link dạng như http://goo.gl/maps/nHkVB.
Khung HTML có iframe thì bạn copy hết nguyên đường link bên dưới dán vào website mà bạn muốn hiển thị bản đồ, lưu ý dán dưới chế độ code HTML, nếu không nó không hiển thị bản đồ mà chỉ là dạng text thôi.
Bạn chú ý đến thông báo ở dưới: Customize and preview embedded map (Tùy chỉnh và xem trước bản đồ nhúng) thì mới hiển thị được còn không là chưa nhận ra được hay tính năng đã được hạn chế ví dụ: địa chỉ bạn chọn tổng quát quá…

Kết quả sau khi nhúng Google Map vào web sẽ như thế này:

Kết luận: Việc nhúng bản đồ của google vào website có nhiều cách, trên là cách đơn giản nhất giờ chỉ việc style CSS lại cho đẹp là OK. Chúc thành công!