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

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

ค่าใช้จ่าย

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

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

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

ขั้นตอนที่ 1

คอนโซล

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

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

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

    Google Cloud เสนอช่วงทดลองใช้โดยคิดค่าบริการ $0.00 ช่วงทดลองใช้จะหมดอายุเมื่อครบ 90 วัน วันหรือหลังจากที่บัญชีมีค่าใช้จ่ายเกิดขึ้น 12, 000 บาท แล้วแต่ว่าอย่างใดจะถึงก่อน ยกเลิก ตลอดเวลา Google Maps Platform มีเครดิต $200 ต่อเดือนแบบตามรอบ สำหรับข้อมูลเพิ่มเติม ดูข้อมูลได้ที่ เครดิตของบัญชีสําหรับการเรียกเก็บเงินและการเรียกเก็บเงิน

Cloud SDK

gcloud projects create "PROJECT"

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

ขั้นตอนที่ 2

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

คอนโซล

เปิดใช้ Maps Embed API

Cloud SDK

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

อ่านเพิ่มเติมเกี่ยวกับ SDK ของ Google Cloud การติดตั้ง 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 alpha services api-keys create \
    --project "PROJECT" \
    --display-name "DISPLAY_NAME"

อ่านเพิ่มเติมเกี่ยวกับ SDK ของ Google Cloud การติดตั้ง 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. บันทึกไฟล์ HTML ของ index.html

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

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

กำลังล้างข้อมูล

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

  1. ใน Google Cloud Console ให้ไปที่หน้าจัดการทรัพยากร

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

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

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

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

    ตั้งค่าใน Cloud Console

  • สำหรับรายการพารามิเตอร์และตัวเลือกเพิ่มเติมที่คุณสามารถเพิ่มลงใน iframe มีดังนี้

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

  • ขยายโปรเจ็กต์ Maps ด้วย JavaScript API

    Maps JavaScript API