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

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

ค่าใช้จ่าย

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

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

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

ขั้นตอนที่ 1

คอนโซล

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

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

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

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

Cloud SDK

gcloud projects create "PROJECT"

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

ขั้นตอนที่ 2

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

คอนโซล

เปิดใช้ Maps ฝัง 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 ฝัง API

ล้างข้อมูล

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

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

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

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

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

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

    ตั้งค่าใน Cloud Console

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

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

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

    Maps JavaScript API