วางแผนที่แบบอินเทอร์แอกทีฟหรือภาพพาโนรามาของ Street View บนหน้าเว็บด้วยคำขอ HTTP แบบง่ายๆ โดยไม่ต้องใช้ JavaScript
ค่าใช้จ่าย
คำขอ Maps Embed API ทั้งหมดพร้อมให้บริการโดยไม่มีค่าใช้จ่ายและใช้งานได้แบบไม่จำกัด อย่างไรก็ตาม คำขอทั้งหมดยังคงต้องมีคีย์ Google Cloud API ที่ถูกต้อง สำหรับข้อมูลเพิ่มเติม โปรดดูที่การใช้งานและการเรียกเก็บเงิน
ก่อนเริ่มต้น
หากต้องการสร้างแผนที่แบบฝังในหน้าเว็บของคุณ ให้ทำตามขั้นตอนการตั้งค่าที่จำเป็นให้เสร็จ โดยคลิกแท็บต่างๆ ต่อไปนี้
ขั้นตอนที่ 1
คอนโซล
-
ใน Google Cloud Console ในหน้าตัวเลือกโปรเจ็กต์ ให้คลิกสร้างโปรเจ็กต์เพื่อเริ่มสร้างโปรเจ็กต์ Cloud ใหม่
-
ตรวจสอบว่าเปิดใช้การเรียกเก็บเงินสำหรับโปรเจ็กต์ที่อยู่ในระบบคลาวด์แล้ว ยืนยันว่าเปิดใช้การเรียกเก็บเงินสำหรับโปรเจ็กต์แล้ว
Google Cloud เสนอช่วงทดลองใช้โดยคิดค่าบริการ $0.00 ช่วงทดลองใช้จะสิ้นสุดเมื่อครบ 90 วันหรือหลังจากที่บัญชีมีค่าใช้จ่ายถึง 9, 000 บาท แล้วแต่ว่าอย่างใดจะถึงก่อน ยกเลิกได้ทุกเมื่อ Google Maps Platform มีเครดิต $200 ต่อเดือนแบบตามรอบ ดูข้อมูลเพิ่มเติมได้ที่เครดิตของบัญชีสำหรับการเรียกเก็บเงินและการเรียกเก็บเงิน
Cloud SDK
gcloud projects create "PROJECT"
อ่านเพิ่มเติมเกี่ยวกับ Google Cloud SDK, การติดตั้ง Cloud SDK และคำสั่งต่อไปนี้
ขั้นตอนที่ 2
หากต้องการใช้ Google Maps Platform คุณต้องเปิดใช้ API หรือ SDK ที่วางแผนจะใช้กับโปรเจ็กต์
คอนโซล
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
คอนโซล
-
ไปที่หน้า Google Maps Platform > ข้อมูลเข้าสู่ระบบ
-
ในหน้าข้อมูลรับรอง ให้คลิกสร้างข้อมูลรับรอง > คีย์ API
กล่องโต้ตอบคีย์ API ที่สร้างจะแสดงคีย์ API ที่สร้างขึ้นใหม่ -
คลิกปิด
คีย์ 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 ให้ทำดังนี้
- เปิดเครื่องมือแก้ไขข้อความเริ่มต้น คุณควรมีเครื่องมือแก้ไขข้อความ เช่น TextEdit หรือ Microsoft Windows Notepad ติดตั้งไว้ในอุปกรณ์โดยค่าเริ่มต้น
- สร้างไฟล์ HTML และตั้งชื่อว่า
index.html
เพิ่มโค้ดต่อไปนี้ด้วย iframe ที่คุณสร้างขึ้นด้านบน:
<html> <!-- Replace this code comment with your iframe. --> </html>
บันทึกไฟล์ HTML ของ
index.html
โหลดไฟล์ HTML ในเว็บเบราว์เซอร์โดยลากไฟล์จากเดสก์ท็อปไปยังเบราว์เซอร์ หรือดับเบิลคลิกไฟล์ได้ในระบบปฏิบัติการส่วนใหญ่
ยินดีด้วย คุณเพิ่งตั้งค่าและสร้างแผนที่โดยใช้ Maps Embed API
กำลังล้างข้อมูล
คุณลบโปรเจ็กต์ Google Cloud เพื่อหยุดการเรียกเก็บเงินสำหรับทรัพยากรทั้งหมดที่ใช้ในโปรเจ็กต์นั้นได้
- ใน Google Cloud Console ให้ไปที่หน้าจัดการทรัพยากร
- หากมีการเชื่อมโยงโปรเจ็กต์ที่คุณวางแผนจะลบกับองค์กร ให้เลือกและขยายรายชื่อองค์กรที่ด้านบนของหน้า
- ในรายการโปรเจ็กต์ ให้เลือกโปรเจ็กต์ที่ต้องการลบ แล้วคลิกลบ
- ในกล่องโต้ตอบ ให้พิมพ์รหัสโปรเจ็กต์แล้วคลิกปิดเครื่องเพื่อลบโปรเจ็กต์
ขั้นตอนถัดไป
เริ่มพัฒนาด้วย Maps Embed API โดยตั้งค่าโปรเจ็กต์ Google Cloud ดังนี้
สำหรับรายการพารามิเตอร์และตัวเลือกเพิ่มเติมที่คุณสามารถเพิ่มลงใน iframe มีดังนี้
ขยายโปรเจ็กต์ Maps ด้วย JavaScript API