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

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

ค่าใช้จ่าย

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

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

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

ขั้นตอนที่ 1

คอนโซล

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

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

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

    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 ในเว็บเบราว์เซอร์โดยลากจากเดสก์ท็อปไปยังเบราว์เซอร์ หรือจะดับเบิลคลิกไฟล์ก็ได้ในระบบปฏิบัติการส่วนใหญ่

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

การล้าง

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

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

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

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

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

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

    ตั้งค่าใน Cloud Console

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

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

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

    Maps Javascript API