Đặt bản đồ tương tác hoặc ảnh toàn cảnh Chế độ xem đường phố trên trang web của bạn bằng một yêu cầu HTTP đơn giản mà không cần JavaScript.
Chi phí
Tất cả các yêu cầu API nhúng Maps đều miễn phí và có thể sử dụng không giới hạn. Tuy nhiên, tất cả các yêu cầu vẫn cần có một khoá Google Cloud API hợp lệ. Để biết thêm thông tin, hãy xem phần Mức sử dụng và thanh toán.
Trước khi bắt đầu
Để tạo bản đồ được nhúng trên trang web, hãy hoàn tất các bước thiết lập bắt buộc bằng cách nhấp vào các thẻ sau:
Bước 1
Giao diện dòng lệnh
-
Trong Google Cloud Console, trên trang bộ chọn dự án, hãy nhấp vào Create Project (Tạo dự án) để bắt đầu tạo một dự án mới trên Google Cloud.
-
Đảm bảo rằng bạn đã bật tính năng thanh toán cho dự án trên Google Cloud. Xác nhận rằng tính năng thanh toán đã được bật cho dự án của bạn.
Google Cloud cung cấp ưu đãi dùng thử miễn phí 0 USD. Thời gian dùng thử sẽ kết thúc sau 90 ngày hoặc sau khi tài khoản tích luỹ đủ khoản phí trị giá 300 USD, tuỳ vào thời điểm nào đến trước. Huỷ bất cứ lúc nào. Nền tảng Google Maps cung cấp khoản tín dụng định kỳ trị giá 200 USD mỗi tháng. Để biết thêm thông tin, hãy xem phần Thẻ tín dụng cho tài khoản thanh toán và Thanh toán.
SDK đám mây
gcloud projects create "PROJECT"
Đọc thêm về Google Cloud SDK, cách cài đặt Cloud SDK và các lệnh sau:
Bước 2
Để sử dụng Nền tảng Google Maps, bạn phải bật các API hoặc SDK mà bạn dự định sử dụng cho dự án của mình.
Giao diện dòng lệnh
SDK đám mây
gcloud services enable \ --project "PROJECT" \ "maps-embed-backend.googleapis.com"
Đọc thêm về Google Cloud SDK, cách cài đặt Cloud SDK và các lệnh sau:
Bước 3
Bước này chỉ thực hiện quy trình tạo Khoá API. Nếu sử dụng Khoá API trong phiên bản chính thức, bạn nên hạn chế khoá API của mình. Bạn có thể tìm thêm thông tin trong trang Sử dụng khoá API dành riêng cho sản phẩm.
Khoá API là giá trị nhận dạng duy nhất xác thực các yêu cầu liên kết với dự án của bạn cho mục đích sử dụng và thanh toán. Bạn phải có ít nhất một khoá API được liên kết với dự án.
Cách tạo khoá API:
Giao diện dòng lệnh
-
Chuyển đến trang Nền tảng Google Maps > Thông tin xác thực.
-
Trên trang Thông tin xác thực, hãy nhấp vào Tạo thông tin xác thực > Khoá API.
Hộp thoại API key created (Khoá API đã tạo) hiển thị khoá API mới tạo. -
Nhấp vào Đóng.
Khoá API mới được liệt kê trên trang Thông tin xác thực trong phần Khoá API.
(Hãy nhớ hạn chế khoá API trước khi sử dụng khoá đó trong môi trường sản xuất.)
SDK đám mây
gcloud alpha services api-keys create \ --project "PROJECT" \ --display-name "DISPLAY_NAME"
Đọc thêm về Google Cloud SDK, cách cài đặt Cloud SDK và các lệnh sau:
Tạo iframe
Nhấp qua các tuỳ chọn sau rồi thêm vị trí và khoá API để tạo iframe cho trang web của bạn. Để biết thêm thông tin về các tham số và tuỳ chọn, hãy xem phần Nhúng bản đồ.
Kiểm tra iframe của bạn
Cách xem iframe trong cửa sổ trình duyệt HTML:
- Mở trình chỉnh sửa văn bản mặc định. Theo mặc định, bạn phải cài đặt các trình chỉnh sửa văn bản như TextEdit hoặc Microsoft Windows Notepad trên thiết bị.TextEdit
- Tạo một tệp HTML và đặt tên là
index.html
. Thêm mã sau với iframe mà bạn đã tạo ở trên:
<html> <!-- Replace this code comment with your iframe. --> </html>
Lưu tệp HTML
index.html
.Tải tệp HTML trong trình duyệt web bằng cách kéo tệp đó từ máy tính sang trình duyệt; hoặc nhấp đúp vào tệp trên hầu hết các hệ điều hành.
Xin chúc mừng! Bạn vừa thiết lập và xây dựng bản đồ bằng API Nhúng của Maps.
Dọn dẹp
Bạn có thể xoá dự án trên Google Cloud để ngừng tính phí cho tất cả tài nguyên được sử dụng trong dự án đó.
- Trong Google Cloud Console, hãy chuyển đến trang Quản lý tài nguyên:
- Nếu dự án mà bạn dự định xoá được đính kèm với một tổ chức, hãy chọn và mở rộng danh sách tổ chức ở đầu trang.
- Trong danh sách dự án, hãy chọn dự án mà bạn muốn xoá rồi nhấp vào Xoá.
- Trong hộp thoại, hãy nhập mã dự án rồi nhấp vào Shut down (Tắt) để xoá dự án.
Các bước tiếp theo
Bắt đầu phát triển bằng API nhúng Maps bằng cách thiết lập dự án Google Cloud:
Dưới đây là danh sách các thông số và tuỳ chọn bổ sung mà bạn có thể thêm vào iframe:
Mở rộng dự án Maps bằng API JavaScript: