คู่มือเริ่มใช้งาน Maps Embedded API ฉบับย่อ

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

ค่าใช้จ่าย

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

ข้อควรทราบก่อนที่จะเริ่มต้น

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

ขั้นตอนที่ 1

คอนโซล

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

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

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

    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