ประกาศด้านความปลอดภัย: เราตระหนักถึงปัญหาด้านความปลอดภัยที่อาจส่งผลกระทบต่อเว็บไซต์ที่ใช้ไลบรารีของบุคคลที่สามบางรายการ (รวมถึง polyfill.io) บางครั้งปัญหานี้อาจเปลี่ยนเส้นทางผู้เข้าชมออกจากเว็บไซต์ที่ตั้งใจไว้โดยที่เจ้าของเว็บไซต์ไม่ทราบหรือไม่อนุญาต ก่อนหน้านี้ตัวอย่าง JavaScript จำนวนมากของเรามีการประกาศสคริปต์ polyfill.io เราได้นำสิ่งนี้ออกจากตัวอย่างของเราแล้ว หากคุณใช้ตัวอย่าง JavaScript ที่มีการประกาศนี้ เราขอแนะนำให้นำการประกาศออก

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

ใช้คีย์ API

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

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

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

ก่อนเริ่มใช้ 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"

อ่านเพิ่มเติมเกี่ยวกับ SDK ของ Google Cloud การติดตั้ง 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/* และ ให้สิทธิ์เส้นทางย่อยในชื่อโฮสต์นั้น ระบุรูปแบบผู้อ้างอิง 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 ในรายการ คุณจะต้อง เปิดใช้
หากโครงการของคุณใช้ 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"

อ่านเพิ่มเติมเกี่ยวกับ SDK ของ Google Cloud การติดตั้ง 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>