Bắt đầu sử dụng Bộ công cụ giao diện người dùng của Places

Chọn nền tảng: Android iOS JavaScript

Trang này hướng dẫn bạn cách lấy khoá API, bật Places UI Kit và tải các thư viện hỗ trợ khoá API đó.

Lấy khoá API và bật Places UI Kit

Trước khi sử dụng Places UI Kit, bạn cần:

  • Tạo một dự án trên Cloud bằng tài khoản thanh toán.
  • Bật Places UI Kit.
  • Lấy khoá API.

Để tìm hiểu thêm, hãy xem bài viết Thiết lập dự án của bạn trên Google Cloud.

Bật Places UI Kit

Lấy khoá API

Tải các thư viện cần thiết

Để tải các thư viện hỗ trợ Places UI Kit, trước tiên, hãy tải Maps JavaScript API bằng cách thêm trình tải khởi động nội tuyến vào mã ứng dụng của bạn, như minh hoạ trong đoạn mã sau: 

  <script>
    (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
      key: "YOUR_API_KEY",
      v: "weekly",
      // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
      // Add other bootstrap parameters as needed, using camel case.
    });
  </script>

Tiếp theo, hãy dùng toán tử await để gọi importLibrary() từ trong hàm async, như sau:

  // Import the Places Library for PlaceDetailsElement and PlaceSearchElement
  const {PlaceDetailsElement, PlaceSearchElement} = await google.maps.importLibrary('places');

  // Import the Elevation Library for ElevationElement
  const {ElevationElement} = await google.maps.importLibrary('elevation');

Tìm hiểu thêm về cách tải Maps JavaScript API.

Các bước tiếp theo