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

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

ค่าใช้จ่าย

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

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

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

ขั้นตอนที่ 1

คอนโซล

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

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

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

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

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 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 ให้ไปที่หน้าจัดการทรัพยากร

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

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

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

  • เริ่มพัฒนาด้วย Maps Embed API โดยตั้งค่าโปรเจ็กต์ที่อยู่ในระบบคลาวด์ของ Google ดังนี้

    ตั้งค่าใน Cloud Console

  • ดูรายการพารามิเตอร์และตัวเลือกเพิ่มเติมที่คุณเพิ่มใน iframe ได้ที่

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

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

    Maps JavaScript API