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

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

ค่าใช้จ่าย

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

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

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

ขั้นตอนที่ 1

คอนโซล

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

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

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

    Google Cloud เสนอช่วงทดลองใช้แบบไม่มีค่าใช้จ่าย ช่วงทดลองใช้จะสิ้นสุดลงเมื่อครบ 90 วันหรือหลังจากที่บัญชีมีค่าใช้จ่ายครบ $300 แล้วแต่ว่ากรณีใดจะเกิดขึ้นก่อน ยกเลิก ตลอดเวลา 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 ในเว็บเบราว์เซอร์โดยลากไฟล์จากเดสก์ท็อปไปยัง เบราว์เซอร์ของคุณ อีกวิธีหนึ่งคือ การดับเบิลคลิกไฟล์ ระบบปฏิบัติการ

ยินดีด้วย คุณเพิ่งตั้งค่าและสร้างแผนที่โดยใช้ 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