เริ่มต้นใช้งาน
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
นักพัฒนาแอปในเขตเศรษฐกิจยุโรป (EEA)
หน้านี้จะแสดงวิธีรับคีย์ API, เปิดใช้ API ที่จำเป็น และโหลดไลบรารี Places เพื่อให้คุณทํางานกับคลาส Place ได้
รับคีย์ API และเปิดใช้ API ที่จําเป็น
คุณต้องดำเนินการต่อไปนี้ก่อนใช้คลาสสถานที่
- สร้างโปรเจ็กต์ Cloud ด้วยบัญชีสำหรับการเรียกเก็บเงิน
- รับคีย์ API
- เปิดใช้ API ต่อไปนี้
- Maps JavaScript API
- Places API
- Places API (ใหม่) (จําเป็นสําหรับการใช้การค้นหาข้อความ (ใหม่) และ Place Autocomplete)
โปรดดูข้อมูลเพิ่มเติมที่หัวข้อตั้งค่าโปรเจ็กต์ Google Cloud
รับคีย์ API
เปิดใช้ Places API (ใหม่)
โหลด Places Library
หากต้องการโหลด Places Library ให้โหลด Maps JavaScript API ก่อนโดยเพิ่มโปรแกรมโหลด Bootstrap แบบอินไลน์ลงในโค้ดแอปพลิเคชัน ดังที่แสดงในข้อมูลโค้ดต่อไปนี้
<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>
ถัดไป ให้ใช้โอเปอเรเตอร์ await
เพื่อเรียก importLibrary()
จากภายในฟังก์ชัน async
ดังที่แสดงที่นี่
const {Place} = await google.maps.importLibrary("places");
ฟังก์ชันยังโหลดไลบรารีได้โดยไม่ต้องประกาศตัวแปรสำหรับคลาสที่จำเป็น
async function initMap() {
google.maps.importLibrary("places");
...
}
initMap();
หรือจะโหลดไลบรารีใน HTML โดยตรงก็ได้ตามที่แสดงที่นี่
<script>
google.maps.importLibrary("places");
</script>
ดูข้อมูลเพิ่มเติมเกี่ยวกับการโหลดไลบรารีได้ที่โหลด Maps JavaScript API
ขั้นตอนถัดไป
เนื้อหาของหน้าเว็บนี้ได้รับอนุญาตภายใต้ใบอนุญาตที่ต้องระบุที่มาของครีเอทีฟคอมมอนส์ 4.0 และตัวอย่างโค้ดได้รับอนุญาตภายใต้ใบอนุญาต Apache 2.0 เว้นแต่จะระบุไว้เป็นอย่างอื่น โปรดดูรายละเอียดที่นโยบายเว็บไซต์ Google Developers Java เป็นเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2025-08-10 UTC
[null,null,["อัปเดตล่าสุด 2025-08-10 UTC"],[[["\u003cp\u003eThis guide explains how to prepare your application to work with the Google Maps Places API's Place class.\u003c/p\u003e\n"],["\u003cp\u003eYou'll need to set up a Cloud project, obtain an API key, and enable necessary APIs including Maps JavaScript API, Places API, and Places API (New).\u003c/p\u003e\n"],["\u003cp\u003eThe Places Library is loaded by including the Maps JavaScript API bootstrap loader and then calling \u003ccode\u003eimportLibrary("places")\u003c/code\u003e.\u003c/p\u003e\n"],["\u003cp\u003eOnce set up, you can utilize the Place class for searching places, retrieving details, and using Place Autocomplete.\u003c/p\u003e\n"]]],["To use the Place class, you must first create a Cloud project with billing, obtain an API key, and enable the Maps JavaScript API, Places API, and Places API (New). Then, load the Places Library by including the Maps JavaScript API bootstrap loader in your code, and utilizing the `importLibrary()` function within an `async` context. This allows for the use of the \"places\" library, and subsequent place related tasks.\n"],null,["**European Economic Area (EEA) developers** If your billing address is in the European Economic Area, effective on 8 July 2025, the [Google Maps Platform EEA Terms of Service](https://cloud.google.com/terms/maps-platform/eea) will apply to your use of the Services. Functionality varies by region. [Learn more](/maps/comms/eea/faq).\n\nThis page shows you how to get an API key, enable the required APIs, and load the Places Library,\nso that you can work with the Place class.\n\nGet an API key and enable the required APIs\n\nBefore using the Place class, you need to:\n\n- Create a Cloud project with a billing account.\n- Get an API key.\n- Enable the following APIs: \n - Maps JavaScript API\n - Places API\n - Places API (New) (required to use Text Search (New) and Place Autocomplete)\n\nTo learn more, see [Set up your Google Cloud project](/maps/documentation/javascript/cloud-setup).\n[Get an API key](/maps/documentation/javascript/get-api-key)\n\n\n[Enable Places API (New)](https://console.cloud.google.com/apis/library/places.googleapis.com)\n\nLoad the Places Library\n\nTo load the Places Library, first load the Maps JavaScript API, by adding the\ninline bootstrap loader to your application code, as shown in the following snippet: \n\n```javascript\n\u003cscript\u003e\n (g=\u003e{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=()=\u003eh||(h=new Promise(async(f,n)=\u003e{await (a=m.createElement(\"script\"));e.set(\"libraries\",[...r]+\"\");for(k in g)e.set(k.replace(/[A-Z]/g,t=\u003e\"_\"+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=()=\u003eh=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)=\u003er.add(f)&&u().then(()=\u003ed[l](f,...n))})({\n key: \"YOUR_API_KEY\",\n v: \"weekly\",\n // Use the 'v' parameter to indicate the /maps/documentation/javascript/versions to use (weekly, beta, alpha, etc.).\n // Add other /maps/documentation/javascript/load-maps-js-api#required_parameters as needed, using camel case.\n });\n\u003c/script\u003e\n```\n\nNext, use the `await` operator to call `importLibrary()`\nfrom within an `async` function, as shown here: \n\n```javascript\n const {Place} = await google.maps.importLibrary(\"places\");\n \n```\n\nYour function can also load libraries without declaring a variable\nfor the needed classes: \n\n```javascript\n async function initMap() {\n google.maps.importLibrary(\"places\");\n ...\n }\n\n initMap();\n \n```\n\nAlternatively, you can load the libraries directly in HTML as shown here: \n\n```javascript\n \u003cscript\u003e\n google.maps.importLibrary(\"places\");\n \u003c/script\u003e\n \n```\n\n\nFor more information about loading libraries, see\n[Load the Maps JavaScript API](/maps/documentation/javascript/load-maps-js-api).\n\nNext steps\n\n- [Search for places](/maps/documentation/javascript/place-search)\n- [Get place details](/maps/documentation/javascript/place-details)\n- [Use Place Autocomplete](/maps/documentation/javascript/place-autocomplete-new)"]]