พบกับแผนที่แบบใหม่ใน Google Maps Platform เร็วๆ นี้ การอัปเดตการจัดรูปแบบแผนที่นี้มีชุดสีเริ่มต้นใหม่ รวมถึงการปรับปรุงประสบการณ์และความสามารถในการใช้งานแผนที่ ระบบจะอัปเดตรูปแบบแผนที่ทั้งหมดโดยอัตโนมัติในเดือนมีนาคม 2025 หากต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับความพร้อมให้บริการและวิธีเลือกใช้ก่อนหน้านี้ โปรดดูรูปแบบแผนที่ใหม่สำหรับ Google Maps Platform

หน้านี้ได้รับการแปลโดย Cloud Translation API

ใช้คีย์ API

ผลิตภัณฑ์ Google Maps Platform ปลอดภัยจากการใช้งานโดยไม่ได้รับอนุญาตด้วยการจำกัดการเรียก API ไว้เฉพาะที่มอบข้อมูลรับรองการตรวจสอบสิทธิ์ที่เหมาะสมเท่านั้น ข้อมูลเข้าสู่ระบบเหล่านี้อยู่ในรูปแบบของคีย์ API ซึ่งเป็นสตริงอักขระที่เป็นตัวอักษรและตัวเลขคละกันที่ไม่ซ้ำกันซึ่งเชื่อมโยงบัญชีสำหรับการเรียกเก็บเงินของ Google กับโปรเจ็กต์ และกับ API หรือ SDK ที่เฉพาะเจาะจง

คู่มือนี้แสดงวิธีสร้าง จำกัด และใช้รหัส API สำหรับแพลตฟอร์ม Google Maps

ก่อนเริ่มต้น

ก่อนที่จะเริ่มใช้ Maps JavaScript API คุณต้องมีโปรเจ็กต์ที่มีบัญชีสำหรับการเรียกเก็บเงินและเปิดใช้ Maps JavaScript API แล้ว ดูข้อมูลเพิ่มเติมได้ที่ตั้งค่าใน Cloud Console

สร้างคีย์ API

คีย์ API คือตัวระบุที่ไม่ซ้ำกันซึ่งจะตรวจสอบสิทธิ์คำขอที่เชื่อมโยงกับโปรเจ็กต์เพื่อวัตถุประสงค์ในการใช้งานและการเรียกเก็บเงิน คุณต้องมีคีย์ API ที่เชื่อมโยงกับโปรเจ็กต์อย่างน้อย 1 รายการ

วิธีสร้างคีย์ API

คอนโซล

ไปที่หน้า Google Maps Platform > ข้อมูลเข้าสู่ระบบ

ไปที่หน้าข้อมูลเข้าสู่ระบบ
ในหน้าข้อมูลเข้าสู่ระบบ ให้คลิกสร้างข้อมูลเข้าสู่ระบบ > คีย์ API
กล่องโต้ตอบคีย์ API ที่สร้างจะแสดงคีย์ API ที่คุณสร้างใหม่
คลิกปิด
คีย์ API ใหม่จะปรากฏในหน้าข้อมูลเข้าสู่ระบบในส่วนคีย์ API
(อย่าลืมจำกัดคีย์ API ก่อนนำไปใช้ในเวอร์ชันที่ใช้งานจริง)

Cloud SDK

gcloud alpha services api-keys create \
    --project "PROJECT" \
    --display-name "DISPLAY_NAME"

อ่านเพิ่มเติมเกี่ยวกับ Google Cloud SDK , การติดตั้ง Cloud SDK และคำสั่งต่อไปนี้

gcloud alpha services api-keys create

จำกัดคีย์ API

Google ขอแนะนำอย่างยิ่งให้คุณจำกัดคีย์ API โดยจำกัดการใช้เฉพาะ API ที่จำเป็นสำหรับแอปพลิเคชันของคุณเท่านั้น การจำกัดคีย์ API จะเพิ่มความปลอดภัยให้กับแอปพลิเคชันของคุณโดยการป้องกันคีย์จากคำขอที่ไม่ได้รับอนุญาต ดูข้อมูลเพิ่มเติมได้ในแนวทางปฏิบัติแนะนำด้านความปลอดภัยของ API

วิธีจำกัดคีย์ API

คอนโซล

ไปที่หน้า Google Maps Platform > ข้อมูลเข้าสู่ระบบ

ไปที่หน้าข้อมูลเข้าสู่ระบบ
เลือกคีย์ API ที่ต้องการตั้งค่าข้อจำกัด หน้าพร็อพเพอร์ตี้คีย์ API จะปรากฏขึ้น
กำหนดข้อจำกัดต่อไปนี้ในส่วนข้อจำกัดสำคัญ

ข้อจำกัดแอปพลิเคชัน:

หากต้องการยอมรับคำขอจากรายการเว็บไซต์ที่คุณระบุ ให้เลือกการอ้างอิง HTTP (เว็บไซต์) จากรายการข้อจำกัดแอปพลิเคชัน
ระบุเว็บไซต์อ้างอิงอย่างน้อย 1 เว็บไซต์ คุณใช้อักขระไวลด์การ์ดเพื่อให้สิทธิ์โดเมนย่อยทั้งหมดได้ (เช่น https://*.google.com ยอมรับเว็บไซต์ทั้งหมดที่ลงท้ายด้วย .google.com เมื่อเข้าถึงผ่าน HTTPS) โปรดทราบว่าหากคุณระบุ www.domain.com โดเมนจะทําหน้าที่เป็นไวลด์การ์ด www.domain.com/* และให้สิทธิ์เส้นทางย่อยทั้งหมดในชื่อโฮสต์นั้น ระบุรูปแบบ URL ที่มา https:// และ http:// ตามที่เป็นอยู่ สำหรับโปรโตคอล URL อื่นๆ คุณต้องใช้การแสดงพิเศษ เช่น รูปแบบ file:///path/to/ เป็น __file_url__//path/to/* หลังจากเปิดใช้เว็บไซต์แล้ว อย่าลืมตรวจสอบการใช้งานเพื่อให้แน่ใจว่าตรงกับที่คุณคาดไว้ รองรับโปรโตคอลต่อไปนี้ about://, app://, applewebdata://, asset://, chrome://, content://, file://, ftp://, ionic://, local://, ms-appx://, ms-appx-web://, ms-local-stream://, prism://, qrc://, res://, saphtmlp://

ข้อจำกัด API:

คลิกจำกัดคีย์
เลือก Maps JavaScript API จากเมนูแบบเลื่อนลงเลือก API หาก Maps JavaScript API ไม่อยู่ในรายการ คุณจะต้องenable
หากโครงการของคุณใช้ Places Library ให้เลือก Places API ด้วย ในทำนองเดียวกัน หากโปรเจ็กต์ของคุณใช้บริการอื่นๆ ใน JavaScript API (บริการเส้นทาง, บริการเมทริกซ์ระยะทาง, บริการระดับความสูง และ/หรือบริการเข้ารหัสพิกัดภูมิศาสตร์) คุณต้องเปิดใช้และเลือก API ที่เกี่ยวข้องในรายการนี้ด้วย

คลิกบันทึกเพื่อสิ้นสุดการเปลี่ยนแปลง

Cloud SDK

แสดงรายการคีย์ที่มีอยู่

gcloud services api-keys list --project="PROJECT"

ล้างข้อจำกัดที่มีอยู่ของคีย์ที่มีอยู่

gcloud alpha services api-keys update "projects/PROJECT/keys/KEY_ID" \
    --clear-restrictions

กำหนดข้อจำกัดใหม่สำหรับคีย์ที่มีอยู่

gcloud alpha services api-keys update "projects/PROJECT/keys/KEY_ID" \
    --api-target="maps-backend.googleapis.com"
    --allowed-referrers="referer"

อ่านเพิ่มเติมเกี่ยวกับ Google Cloud SDK , การติดตั้ง Cloud SDK และคำสั่งต่อไปนี้

เพิ่มคีย์ API ในคำขอ

คุณต้องใส่คีย์ API ไปกับคำขอ Maps JavaScript API ทุกรายการ ในตัวอย่างต่อไปนี้ ให้แทนที่ YOUR_API_KEY ด้วยคีย์ API

<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>