Cách lấy mã nhúng Google Maps vào website

Google Maps đã quá quen thuộc chúng ta, đó là một dịch vụ bản đồ của Google nhằm thay thế các loại bản đồ giấy thông thường, giúp mọi người dễ dàng tìm kiếm định vị địa chỉ một cách nhanh chóng.

Bạn có thể thêm địa điểm, lấy tọa độ trên Google Maps để định vị công ty bạn. Riêng đối với trang web thì chức năng phổ thông nhất là hiển thị địa điểm lên web, giúp khách hàng dễ dàng tìm đến trụ sở của công ty. Vậy bạn có biết cách nhúng Google Map vào website không? Bài viết này thietkewebpro247 sẽ trả lời giúp bạn.

Có nên nhúng Google Maps vào web?

Hiện nay việc có bản đồ của vị trí thì việc kinh doanh của bạn sẽ nhiều lợi thế hơn so với việc bạn chỉ cho hiện dòng địa chỉ bằng chữ.

Với bản đồ Google Maps, khách hàng truy cập có thể định vị được ngay cách đi tới một doanh nghiệp nhanh nhất và chỉ đường cho biết phải đi đường nào.

Nhúng Google Maps vào website

Những lý do bạn nên chèn Google Maps vào website

Có tính tương tác cao, khi khách hàng truy cập vào để định vị tốt hơn.

Khi bạn chèn bản đồ Google vào website thì khách hàng truy cập vào website sẽ biết được địa chỉ công ty bạn.

Google Maps sẽ ghi chú trực quan về địa chỉ, đảm bảo cho bạn sẽ có đầy đủ tính năng của một trang liên hệ và giới thiệu.

Chỉ cần bạn đăng ký địa điểm của mình trên Google thì khách hàng có thể tìm được địa điểm công ty bạn chỉ thông qua website.

Tất nhiên là cũng có nhiều dịch vụ bản đồ khác ngoài Google Maps, nhưng Google có nhiều lợi thế hơn so với các đối thủ do có lượng người dùng lớn.

Hầu hết chúng ta đều quen với Google Maps nên cũng không mấy khó khăn cho khách hàng nếu website bạn có Google Maps.

Chèn Google Maps vào website

Cách lấy code để chèn bản đồ Google Map vào website

Bạn truy cập vào: https://www.google.com/maps. Sau đó gõ địa điểm bạn cần nhúng vào thanh tìm kiếm.

Bạn thấy có 3 vạch sọc ngang ở phía góc cao bên trái, bạn nhấn vào nút đó.

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

Khung bản đồ hiện ra, chọn tab Nhúng bản đồ, bạn có thể chọn kích thước cho bản đồ phóng to, thu nhỏ (dùng phím Ctrl + con lăn giữa chuột). Tiếp theo là copy đoạn code

Cuối cùng bạn dán code này lên bất kỳ đâu trên website mà bạn muốn xuất hiện bản đồ. Hoặc có thể chèn vào trong bài viết, 1 trang wordpress,…

Cách này cũng khá đơn giản nhưng lại có nhược điểm là bạn không thể thêm được các thông tin khác vào bản đồ.

Cách lấy key API để tích hợp Google Maps

Bước này hơi khó hiểu nên các bạn hãy làm theo như chúng tôi, nếu không được thì có thể liên hệ đơn vị thiết kế website cũ của bạn để nhờ giúp đỡ.

• Đăng nhập vào Google bằng tài khoản Google của bạn.

• Truy cập vào Developers Console

• Bạn tìm Google Maps API v3, rồi click vào nút ON để bật nó lên.

• Đọc điều khoản và đồng ý.

• Trong mục Simple API Access, click vào Create new Server key,…

• Nhập địa chỉ IP trang web của bạn, nếu không biết bạn hãy tra cứu nó.

• Sau đó sao chép văn bản trên dòng “API key:” (không bao gồm chữ API Key) bởi đây là khóa API của bạn cho bản đồ.

Google Maps API key

Chuyển địa chỉ thành tọa độ

Để sử dụng Google Maps trên website bạn cần có kinh độ và vĩ độ của vị trí. Bạn có thể có những thông tin này từ định vị GPS hoặc sử dụng công cụ như Geocoder.usto (chỉ hỗ trợ các địa chỉ ở Hoa Kỳ).

Thêm Google Maps vào website

Bước 1: Thêm tọa độ bản đồ

Bạn mở trang web và thêm những điều sau vào Head của tập tin.

Thay đổi phẩn được đánh dấu theo vĩ độ và kinh độ mà bạn đã ghi chú lại ở bước 2.

Bước 2: Thêm các yếu tố bản đồ vào website của bạn

Khi đã thêm hết các yếu tố vào Head của tài liệu mình thì bạn cần định vị bản đồ vị trí trên website. Thực hiện viêc này bằng cách thêm một phần tử DIV với thuộc tính id= “map – canvas”. Lưu ý là tạo kiểu div với chiều cao và chiều rộng cho phù hợp với website bạn.

Bước 3: Upload và kiểm tra

Việc cuối cùng là mở trang của bạn lên và kiểm tra xem bản đồ có hiển thị không.

Thêm biểu tượng đánh dấu vào bản đồ

Việc thêm biểu tượng đánh dấu vị trí giúp người dùng biết được nơi họ muốn đến. Để thêm một điểm đánh dấu màu đỏ chuẩn của Google Maps, bạn hãy thêm đoạn mã sau vào dòng lệnh dưới dòng var map = …:

Tham khảo: Cách nhúng Google Maps vào Website