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

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

ค่าใช้จ่าย

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

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

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

ขั้นตอนที่ 1

คอนโซล

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

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

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

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

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 alpha 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. บันทึกไฟล์ HTML ของ index.html

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

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

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

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

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

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

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

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

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

    ตั้งค่าใน Cloud Console

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

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

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

    Maps JavaScript API