Cách thêm Google Map vào trang web bằng API

Bài viết này giải thích cách chèn bản đồ Google có đánh dấu vị trí vào trang web của bạn. Quá trình này bao gồm nhận khóa phần mềm đặc biệt từ Google, sau đó thêm JavaScript có liên quan vào trang.

Để bảo vệ các máy chủ của mình khỏi bị tấn công bởi các yêu cầu về bản đồ và tra cứu vị trí, Google sẽ hạn chế quyền truy cập vào cơ sở dữ liệu Bản đồ của mình. Bạn phải đăng ký với Google với tư cách là nhà phát triển để nhận khóa duy nhất để sử dụng Giao diện lập trình ứng dụng nhằm yêu cầu dữ liệu từ máy chủ Bản đồ. Khóa API miễn phí trừ khi bạn cần truy cập nhiều vào máy chủ của Google (ví dụ: để phát triển ứng dụng web).

Để đăng ký khóa API của bạn:

1. Truy cập Google Cloud Platform Console và sau khi đăng nhập bằng tài khoản Google của bạn, hãy tạo một dự án mới hoặc chọn một dự án hiện có.

2. Nhấp vào Tiếp tục để bật API và mọi dịch vụ liên quan.

3. Trên trang Thông tin xác thực , hãy lấy khóa API . Nếu cần, hãy đặt các hạn chế có liên quan trên khóa.

4. Bảo mật khóa API của bạn bằng cách sử dụng các phương pháp hay nhất do Google đề xuất.

Chèn đoạn mã sau vào trang Web của bạn, trong phần CƠ THỂ của tài liệu HTML:

// Khởi tạo và thêm hàm map initMap() {
// Vị trí của cờ var flag = {lat: XXX, lng: YYY};
// Bản đồ, căn giữa tại cờ var map = new google.maps.Map( document.getElementById(‘map’), {zoom: 4, center: flag});
// Điểm đánh dấu, được định vị tại cờ var marker = new google.maps.Marker({vị trí: cờ, bản đồ: bản đồ}); } src=”https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap”>

Trong mã này, thay đổi như sau:

• Thay cờ bằng tên tham chiếu đến vị trí bạn đang ghim. Giữ cho nó đơn giản và ngắn gọn (như nhà riêng hoặc văn phòng hoặc paris hoặc detroit ). Bạn có thể chạy mã này để nguyên cờ , nhưng việc thay đổi tên sẽ hỗ trợ việc sử dụng lại mã này trên cùng một trang, để nhúng một số bản đồ khác nhau.
• Thay thế XXX và YYY bằng kinh độ và vĩ độ, tính bằng số thập phân, của vị trí đánh dấu trên bản đồ. Bạn phải thay thế các giá trị này để bản đồ hiển thị chính xác. Một cách dễ dàng để tìm vĩ độ và kinh độ là mở Google Maps và nhấp chuột phải vào vị trí chính xác mà bạn định gắn cờ. Trong menu ngữ cảnh, chọn Có gì ở đây? để xem vĩ độ và kinh độ.
• Thay YOUR_API_KEY bằng khóa API mà bạn nhận được từ Google. Không đặt dấu cách giữa dấu bằng và dấu và. Nếu không có khóa, truy vấn sẽ không thành công và bản đồ sẽ không hiển thị chính xác.

Trong phần đầu của tài liệu HTML của bạn, hãy chỉ định các ràng buộc CSS cho bản đồ, bao gồm kích thước, màu sắc và vị trí trang.

Tập lệnh bản đồ của Google chứa các thuộc tính như thu phóng và trung tâm sẵn sàng cho người dùng cuối sửa đổi. Kỹ thuật nâng cao hơn này được hỗ trợ thông qua tài liệu dành cho nhà phát triển của Google.

API Google Maps là một tài sản quý giá. Hướng dẫn thực hành tốt nhất của Google đưa ra lời khuyên tuyệt vời để bảo vệ khóa khỏi bị người khác sử dụng sai mục đích. Bảo mật phù hợp đặc biệt có liên quan nếu bạn đã thiết lập hệ thống thanh toán để truy cập API, vì bạn có thể phải trả một khoản tiền lớn nếu thông tin đăng nhập của bạn bị đánh cắp. Đặc biệt, ví dụ mà chúng tôi trình bày ở đây nhúng khóa API trực tiếp vào mã—chúng tôi làm điều này với mục đích minh họa quy trình. Tuy nhiên, trong môi trường sản xuất, tốt hơn là chỉ định các biến môi trường cho khóa thay vì chèn khóa trực tiếp.