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

Trang này hướng dẫn bạn cách lấy khoá API, bật Bộ công cụ giao diện người dùng của Địa điểm và tải các thư viện hỗ trợ bộ công cụ này.

Lấy khoá API và bật Bộ công cụ giao diện người dùng của Places

Trước khi sử dụng Bộ công cụ giao diện người dùng của Places, bạn cần:

  • Tạo dự án trên Cloud bằng tài khoản thanh toán.
  • Bật Bộ công cụ giao diện người dùng của Places.
  • Lấy khoá API.

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

Bật Bộ công cụ giao diện người dùng của Places

Lấy khoá API

Tải các thư viện bắt buộc

Để tải các thư viện hỗ trợ Bộ công cụ giao diện người dùng của Địa điểm, trước tiên, hãy tải Maps JavaScript API bằng cách thêm trình tải khởi động cùng dòng vào mã ứng dụng, 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 sử dụng toán tử await để gọi importLibrary() từ bên 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 API Maps JavaScript.

Các bước tiếp theo