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

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

ค่าใช้จ่าย

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

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

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

ขั้นตอนที่ 1: ตั้งค่าโปรเจ็กต์

คอนโซล

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

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

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

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

Cloud SDK

gcloud projects create "PROJECT"

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

ขั้นตอนที่ 2: เปิดใช้ API หรือ SDK

หากต้องการใช้ 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 คือตัวระบุที่ไม่ซ้ำกันซึ่งตรวจสอบสิทธิ์คำขอที่เชื่อมโยงกับโปรเจ็กต์ของคุณเพื่อวัตถุประสงค์ด้านการใช้งานและการเรียกเก็บเงิน คุณต้องมีคีย์ API อย่างน้อย 1 คีย์ที่เชื่อมโยงกับโปรเจ็กต์ หากต้องการสร้างคีย์ใหม่หรือเพิ่ม API หรือ SDK ลงในคีย์ที่มีอยู่ ให้ทำตามวิธีการต่อไปนี้

คอนโซล

  1. ไปที่หน้า Google Maps Platform > คีย์และข้อมูลเข้าสู่ระบบ

    ไปที่หน้าคีย์และข้อมูลเข้าสู่ระบบ

  2. หากได้รับข้อความแจ้ง ให้เลือกโปรเจ็กต์

  3. ทำสิ่งใดสิ่งหนึ่งต่อไปนี้

    • สร้างคีย์ใหม่:

      1. คลิกสร้างข้อมูลเข้าสู่ระบบ > คีย์ API
      2. ในแผงสร้างคีย์ API ให้เปิดรายการเลือกข้อจำกัดของ API
      3. ล้าง API ที่คีย์นี้ไม่ต้องการ และตรวจสอบว่าได้เลือก Maps Embed API ไว้
      4. คลิกสร้าง แผงจะแสดงคีย์ API ใหม่

    • ใช้คีย์ที่มีอยู่

      1. คลิกชื่อคีย์
      2. ในรายการเลือกข้อจำกัดของ API ให้เลือก Maps Embed API
      3. คลิกบันทึก

    การเลือก API ที่นี่ไม่ได้เป็นการเปิดใช้ API ตรวจสอบว่าได้เปิดใช้ Maps Embed API ในหน้าคลัง API แล้ว

  4. หากต้องการดูสตริงคีย์ในภายหลัง ให้ไปที่หน้าคีย์และข้อมูลเข้าสู่ระบบ แล้วคลิกแสดงคีย์สำหรับคีย์นั้น

หากคอนโซลดูแตกต่างจากขั้นตอนเหล่านี้ โปรดดูหัวข้อสร้างคีย์ API และเพิ่มข้อจำกัด API ในเอกสารประกอบของ Google Cloud

Cloud SDK

แทนที่ PROJECT_ID ด้วยรหัสโปรเจ็กต์ในคำสั่งต่อไปนี้

  • สร้างคีย์ใหม่: เรียกใช้คำสั่งต่อไปนี้ และแทนที่ DISPLAY_NAME ด้วยชื่อคีย์ 

    gcloud services api-keys create \
    --project="PROJECT_ID" \
    --display-name="DISPLAY_NAME" \
    --api-target=service=maps-embed-backend.googleapis.com

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

  • ใช้คีย์ที่มีอยู่: เรียกใช้คำสั่งต่อไปนี้ และแทนที่ KEY_ID ด้วยรหัสของคีย์ แฟล็ก --append จะเก็บ API ที่คีย์อนุญาตไว้แล้ว หากไม่มีตัวเลือกนี้ คำสั่งจะแทนที่ตัวเลือกเหล่านั้น

    gcloud services api-keys update KEY_ID \
    --project="PROJECT_ID" \
    --append \
    --api-target=service=maps-embed-backend.googleapis.com

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

    รหัสคีย์ไม่ใช่สตริงคีย์หรือชื่อที่แสดง หากต้องการค้นหา ให้เรียกใช้ gcloud services api-keys list --project="PROJECT_ID" รหัสคือส่วนสุดท้ายของช่อง name: projects/PROJECT_NUMBER/locations/global/keys/KEY_ID

หากต้องการดูสตริงคีย์ ให้เรียกใช้ gcloud services api-keys get-key-string KEY_ID --project="PROJECT_ID"

การสร้าง 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

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

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

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

    Maps JavaScript API