Bắt đầu nhanh API Nhúng Maps

Đặt bản đồ tương tác hoặc ảnh toàn cảnh trong Chế độ xem đường phố trên trang web của bạn bằng một yêu cầu HTTP mà không cần JavaScript tuỳ chỉnh.

Chi phí

Tất cả yêu cầu Maps Embed API đều được cung cấp không mất phí và không giới hạn mức sử dụng. Tuy nhiên, tất cả yêu cầu vẫn cần có 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 sau:

Bước 1: Thiết lập dự án

Giao diện dòng lệnh

  1. 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 Cloud.

    Chuyển đến trang bộ chọn dự án

  2. Đảm bảo rằng bạn đã bật tính năng thanh toán cho dự án trên đám mây của bạn. Xác nhận rằng bạn đã bật tính năng thanh toán cho dự án của mình.

    Google Cloud cung cấp gói dùng thử không tính phí. 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ỹ được 300 USD phí, tuỳ theo điều kiện nào đến trước. Huỷ bất cứ lúc nào. Để biết thêm thông tin, hãy xem phần Tín dụng 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: Bật API hoặc SDK

Để sử dụng Google Maps Platform, bạn phải bật các API hoặc SDK mà bạn dự định dùng cho dự án của mình.

Giao diện dòng lệnh

Bật Maps Embed API

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: Lấy khoá API

Bước này chỉ thực hiện quy trình tạo khoá API. Nếu sử dụng khoá API trong môi trường thực tế, bạn nên hạn chế khoá API của mình. Bạn có thể tìm thêm thông tin trên trang Sử dụng khoá API dành riêng cho sản phẩm.

Khoá API là một giá trị nhận dạng riêng biệt giúp xác thực các yêu cầu liên quan đến 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 liên kết với dự án của mình. Để tạo khoá mới hoặc thêm API hay SDK vào khoá hiện có, hãy làm theo các hướng dẫn sau.

Giao diện dòng lệnh

  1. Chuyển đến trang Google Maps Platform > Khoá và thông tin xác thực.

    Chuyển đến trang Khoá và thông tin xác thực

  2. Nếu thấy lời nhắc, hãy chọn dự án của bạn.

  3. Thực hiện một trong các thao tác sau:

    • Tạo khoá mới:

      1. Nhấp vào Tạo thông tin xác thực > Khoá API.
      2. Trong bảng điều khiển Create API key (Tạo khoá API), hãy mở danh sách Select API restrictions (Chọn các quy định hạn chế đối với API).
      3. Xoá mọi API mà khoá này không cần và đảm bảo Maps Embed API vẫn được chọn.
      4. Nhấp vào Tạo. Bảng điều khiển sẽ hiển thị khoá API mới của bạn.

    • Sử dụng khoá hiện có:

      1. Nhấp vào tên của khoá.
      2. Trong danh sách Select API restrictions (Chọn các quy định hạn chế về API), hãy chọn Maps Embed API.
      3. Nhấp vào Lưu.

    Việc chọn một API ở đây không giúp bật API đó. Đảm bảo Maps Embed API được bật trên trang Thư viện API.

  4. Để xem chuỗi khoá sau này, hãy chuyển đến trang Khoá và thông tin xác thực rồi nhấp vào Hiện khoá cho khoá đó.

Nếu bảng điều khiển có giao diện khác với các bước này, hãy xem phần Tạo khoá API và Thêm quy định hạn chế về API trong tài liệu của Google Cloud.

SDK đám mây

Thay thế PROJECT_ID bằng mã dự án của bạn trong các lệnh sau.

  • Tạo khoá mới: Chạy lệnh sau và thay thế DISPLAY_NAME bằng tên cho khoá. 

    gcloud services api-keys create \
    --project="PROJECT_ID" \
    --display-name="DISPLAY_NAME" \
    --api-target=service=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:

  • Sử dụng khoá hiện có: Chạy lệnh sau và thay thế KEY_ID bằng mã nhận dạng của khoá. Cờ --append giữ lại các API mà khoá đã cho phép. Nếu không có, lệnh sẽ thay thế các tệp đó.

    gcloud services api-keys update KEY_ID \
    --project="PROJECT_ID" \
    --append \
    --api-target=service=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:

    Mã khoá không phải là chuỗi khoá hoặc tên hiển thị. Để tìm tệp này, hãy chạy gcloud services api-keys list --project="PROJECT_ID". Mã nhận dạng là phần cuối cùng của trường name: projects/PROJECT_NUMBER/locations/global/keys/KEY_ID.

Để xem chuỗi khoá, hãy chạy gcloud services api-keys get-key-string KEY_ID --project="PROJECT_ID".

Tạo iframe

Nhấp vào các lựa chọn sau đây rồi thêm một vị trí và khoá API để tạo một iframe cho trang web của bạn. Để biết thêm các tham số và tuỳ chọn, hãy xem phần Nhúng bản đồ.

Kiểm thử iframe

Cách xem iframe trong cửa sổ trình duyệt HTML:

  1. Mở trình chỉnh sửa văn bản mặc định. Theo mặc định, thiết bị của bạn phải được cài đặt các trình chỉnh sửa văn bản như TextEdit hoặc Microsoft Windows Notepad.
  2. Tạo một tệp HTML và đặt tên là index.html.

  3. Thêm mã sau đây vào iframe bạn đã tạo ở trên:

    <html>
  <!-- Replace this code comment with your iframe. -->
</html>

  4. Lưu tệp HTML index.html.

  5. Tải tệp HTML trong trình duyệt web bằng cách kéo tệp từ màn hình vào 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à tạo một bản đồ bằng Maps Embed API.

Dọn dẹp

Bạn có thể xoá dự án trên Google Cloud để ngừng thanh toán cho tất cả tài nguyên được sử dụng trong dự án đó.

  1. Trong Google Cloud Console, hãy chuyển đến trang Manage resources (Quản lý tài nguyên):

    Chuyển đến trang Quản lý tài nguyên

  2. 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.
  3. Trong danh sách dự án, hãy chọn dự án bạn muốn xoá rồi nhấp vào Xoá.
  4. Trong hộp thoại, hãy nhập mã dự án rồi nhấp vào Tắt để xoá dự án.

Các bước tiếp theo

  • Bắt đầu phát triển bằng Maps Embed API bằng cách thiết lập dự án trên đám mây của Google:

    Thiết lập trong Cloud Console

  • Để xem danh sách các tham số và tuỳ chọn bổ sung mà bạn có thể thêm vào iframe, hãy xem:

    Nhúng bản đồ

  • Mở rộng dự án Maps bằng JavaScript API:

    Maps JavaScript API