การเริ่มต้นใช้ Maps Embed API อย่างรวดเร็ว

วางแผนที่แบบอินเทอร์แอกทีฟหรือภาพพาโนรามา Street View ในหน้าเว็บด้วยคำขอ HTTP แบบง่ายๆ โดยไม่ต้องใช้ JavaScript

ค่าใช้จ่าย

คำขอ Maps Embed API ทั้งหมดจะใช้งานได้โดยไม่มีค่าใช้จ่ายและ ใช้งานได้ไม่จำกัด อย่างไรก็ตาม คำขอทั้งหมดจะยังคงต้องใช้คีย์ API ของ Google Cloud ที่ถูกต้อง ดูข้อมูลเพิ่มเติมได้ที่การใช้งานและการเรียกเก็บเงิน

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

หากต้องการสร้างแผนที่ที่ฝังในหน้าเว็บ ให้ทําตามขั้นตอนการตั้งค่าที่จําเป็นโดย คลิกผ่านแท็บต่อไปนี้

ขั้นตอนที่ 1

คอนโซล

  1. ใน Google Cloud Console ให้คลิกสร้างโปรเจ็กต์ในหน้าตัวเลือกโปรเจ็กต์เพื่อเริ่มสร้างโปรเจ็กต์ Cloud ใหม่

    ไปที่หน้าเครื่องมือเลือกโปรเจ็กต์

  2. ตรวจสอบว่าได้เปิดใช้การเรียกเก็บเงินสำหรับโปรเจ็กต์ Cloud แล้ว ยืนยันว่าโปรเจ็กต์เปิดใช้การเรียกเก็บเงินแล้ว

    Google Cloud มีข้อเสนอในการทดลองใช้แบบไม่มีค่าใช้จ่าย ช่วงทดลองใช้จะหมดอายุเมื่อครบ 90 วันหรือหลังจากที่บัญชีมียอดเรียกเก็บเงินสะสมถึง $300 แล้วแต่ว่ากรณีใดจะเกิดขึ้นก่อน ยกเลิกได้ทุกเมื่อ ดูข้อมูลเพิ่มเติมได้ที่ เครดิตบัญชีสำหรับการเรียกเก็บเงินและการเรียกเก็บเงิน

Cloud SDK

gcloud projects create "PROJECT"

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

ขั้นตอนที่ 2

หากต้องการใช้ Google Maps Platform คุณต้องเปิดใช้ API หรือ SDK ที่วางแผนจะใช้กับโปรเจ็กต์

คอนโซล

เปิดใช้ Maps Embed API

Cloud SDK

gcloud services enable \
    --project "PROJECT" \
    "maps-embed-backend.googleapis.com"

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

ขั้นตอนที่ 3

ขั้นตอนนี้จะอธิบายเฉพาะกระบวนการสร้างคีย์ API หากคุณใช้คีย์ API ใน เวอร์ชันที่ใช้งานจริง เราขอแนะนำอย่างยิ่งให้จำกัดคีย์ API คุณดูข้อมูลเพิ่มเติมได้ในหน้าการใช้คีย์ API สำหรับผลิตภัณฑ์นั้นๆ

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

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

คอนโซล

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

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

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

Cloud SDK

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

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

การสร้าง iframe

คลิกตัวเลือกต่อไปนี้ แล้วเพิ่มสถานที่ตั้งและคีย์ API เพื่อสร้าง iframe สำหรับหน้าเว็บ ดูพารามิเตอร์และตัวเลือกเพิ่มเติมได้ที่การฝังแผนที่

การทดสอบ iframe

วิธีดู iframe ในหน้าต่างเบราว์เซอร์ HTML

  1. เปิดโปรแกรมแก้ไขข้อความเริ่มต้น คุณควรมีโปรแกรมแก้ไขข้อความ เช่น TextEdit หรือ Microsoft Windows Notepad ติดตั้งไว้ในอุปกรณ์โดยค่าเริ่มต้น
  2. สร้างไฟล์ HTML และตั้งชื่อว่า index.html

  3. เพิ่มโค้ดต่อไปนี้ด้วย iframe ที่คุณสร้างไว้ข้างต้น

    <html>
  <!-- Replace this code comment with your iframe. -->
</html>

  4. บันทึกไฟล์ index.html HTML

  5. โหลดไฟล์ HTML ในเว็บเบราว์เซอร์โดยลากจากเดสก์ท็อปไปยังเบราว์เซอร์ หรือดับเบิลคลิกไฟล์ในระบบปฏิบัติการส่วนใหญ่

ยินดีด้วย คุณเพิ่งตั้งค่าและสร้างแผนที่โดยใช้ Maps Embed API

การล้างข้อมูล

คุณสามารถลบโปรเจ็กต์ Google Cloud เพื่อหยุดการเรียกเก็บเงินสำหรับทรัพยากรทั้งหมดที่ใช้ ภายในโปรเจ็กต์นั้น

  1. ในคอนโซล Google Cloud ให้ไปที่หน้าจัดการทรัพยากร

    ไปที่หน้าจัดการทรัพยากร

  2. หากโปรเจ็กต์ที่คุณวางแผนจะลบเชื่อมโยงกับองค์กร ให้เลือกและขยาย รายการองค์กรที่ด้านบนของหน้า
  3. ในรายการโปรเจ็กต์ ให้เลือกโปรเจ็กต์ที่ต้องการลบ แล้วคลิก ลบ
  4. ในกล่องโต้ตอบ ให้พิมพ์รหัสโปรเจ็กต์แล้วคลิกปิดเพื่อลบโปรเจ็กต์

ขั้นตอนถัดไป

  • เริ่มพัฒนาด้วย Maps Embed API โดยการตั้งค่าโปรเจ็กต์ Google Cloud ดังนี้

    ตั้งค่าใน Cloud Console

  • ดูรายการพารามิเตอร์และตัวเลือกเพิ่มเติมที่คุณเพิ่มใน iframe ได้ที่

    การฝังแผนที่

  • ขยายโปรเจ็กต์ Maps ด้วย JavaScript API โดยทำดังนี้

    Maps Javascript API