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ụ đó.
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
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: "alpha",
// 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 PlaceListElement
const {PlaceDetailsElement, PlaceListElement} = 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.