วางแผนที่แบบอินเทอร์แอกทีฟหรือภาพพาโนรามาของ Street View ในหน้าเว็บด้วยคำขอ HTTP ง่ายๆ โดยไม่ต้องใช้ JavaScript
ค่าใช้จ่าย
คำขอ Maps embedded API ทั้งหมดพร้อมให้ใช้งานโดยไม่มีค่าใช้จ่ายและใช้งานได้แบบไม่จำกัด อย่างไรก็ตาม คำขอทั้งหมดยังคงต้องใช้คีย์ Google Cloud API ที่ถูกต้อง ดูข้อมูลเพิ่มเติมได้ที่การใช้งานและการเรียกเก็บเงิน
ก่อนเริ่มต้น
ถ้าต้องการสร้างแผนที่แบบฝังในหน้าเว็บของคุณ โปรดทำตามขั้นตอนการตั้งค่าที่จำเป็น โดยคลิกที่แท็บต่อไปนี้
ขั้นตอนที่ 1
คอนโซล
-
ในคอนโซล Google Cloud ในหน้าตัวเลือกโปรเจ็กต์ ให้คลิกสร้างโปรเจ็กต์เพื่อเริ่มสร้างโปรเจ็กต์ Cloud ใหม่
-
ตรวจสอบว่าเปิดใช้การเรียกเก็บเงินสำหรับโปรเจ็กต์ที่อยู่ในระบบคลาวด์แล้ว ยืนยันว่าโปรเจ็กต์เปิดใช้การเรียกเก็บเงินแล้ว
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 ที่คุณวางแผนจะใช้กับโปรเจ็กต์
คอนโซล
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 ฝัง API
ล้างข้อมูล
คุณลบโปรเจ็กต์ Google Cloud เพื่อหยุดการเรียกเก็บเงินสำหรับทรัพยากรทั้งหมดที่ใช้ภายในโปรเจ็กต์นั้นได้
- ในคอนโซล Google Cloud ให้ไปที่หน้าจัดการทรัพยากร โดยทำดังนี้
- หากโปรเจ็กต์ที่คุณวางแผนจะลบแนบอยู่กับองค์กร ให้เลือกและขยายรายชื่อองค์กรที่ด้านบนของหน้า
- ในรายการโปรเจ็กต์ ให้เลือกโปรเจ็กต์ที่ต้องการลบ แล้วคลิกลบ
- ในกล่องโต้ตอบ ให้พิมพ์รหัสโปรเจ็กต์แล้วคลิกปิดเพื่อลบโปรเจ็กต์
ขั้นตอนถัดไป
เริ่มต้นพัฒนาด้วย Maps ฝัง API โดยการตั้งค่าโปรเจ็กต์ Google Cloud ของคุณดังนี้
สำหรับรายการพารามิเตอร์และตัวเลือกอื่นๆ ที่เพิ่มใน iframe ได้มีดังนี้
ขยายโปรเจ็กต์ Maps ด้วย JavaScript API ดังนี้