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

คู่มือนี้แสดงวิธีฝังแผนที่แบบอินเทอร์แอกทีฟลงในหน้าเว็บของคุณ

การสร้าง URL ของ Maps Embed API

ต่อไปนี้เป็นตัวอย่าง URL ที่โหลด Maps Embed API

https://www.google.com/maps/embed/v1/MAP_MODE?key=YOUR_API_KEY&PARAMETERS

แทนที่:

• MAP_MODE ด้วยโหมดแผนที่ของคุณ
• YOUR_API_KEY ด้วยคีย์ API ดูข้อมูลเพิ่มเติมได้ที่รับคีย์ API
• PARAMETERS พร้อมด้วยพารามิเตอร์ที่จำเป็นและไม่บังคับสำหรับโหมดแผนที่

การเพิ่ม URL ลงใน iframe

หากต้องการใช้ Maps Embed API ในหน้าเว็บ ให้ตั้งค่า URL ที่สร้างไว้เป็นค่าของแอตทริบิวต์ src ของ iframe ควบคุมขนาดของแผนที่ด้วยแอตทริบิวต์ height และ width ของ iframe เช่น

<iframe
  width="450"
  height="250"
  frameborder="0" style="border:0"
  referrerpolicy="no-referrer-when-downgrade"
  src="https://www.google.com/maps/embed/v1/MAP_MODE?key=YOUR_API_KEY&PARAMETERS"
  allowfullscreen>
</iframe>

ตัวอย่าง iframe ด้านบนใช้คุณสมบัติเพิ่มเติม ได้แก่

• คุณสมบัติ allowfullscreen เพื่อให้บางส่วนของแผนที่แสดงแบบเต็มหน้าจอ
• พร็อพเพอร์ตี้ frameborder="0" และ style="border:0" ที่จะนำเส้นขอบ iframe มาตรฐานออกจากแผนที่
• พร็อพเพอร์ตี้ referrerpolicy="no-referrer-when-downgrade" ที่ยอมให้เบราว์เซอร์ส่ง URL แบบเต็มเป็นส่วนหัว Referer พร้อมกับคำขอเพื่อให้ข้อจำกัดของคีย์ API ทำงานได้อย่างถูกต้อง

คุณสามารถปรับขนาด iframe เพื่อให้เหมาะกับโครงสร้างและการออกแบบเว็บไซต์ของคุณเอง แต่เราพบว่าผู้เข้าชมมักจะโต้ตอบกับแผนที่ขนาดใหญ่ได้ง่ายขึ้น โปรดทราบว่าแผนที่แบบฝังไม่ได้รับการสนับสนุนที่มีขนาดต่ำกว่า 200 พิกเซลในแต่ละด้าน

ข้อจำกัดของคีย์ API

หากเว็บไซต์โฮสติ้งมีเมตาแท็ก referrer ที่ตั้งค่าเป็น no-referrer หรือ same-origin เบราว์เซอร์จะไม่ส่งส่วนหัว Referer ไปยัง Google ซึ่งอาจทำให้ข้อจำกัดของคีย์ API ปฏิเสธคำขอ เพื่อให้การจำกัดทำงานอย่างถูกต้อง ให้เพิ่มพร็อพเพอร์ตี้ referrerpolicy ใน iframe ตามตัวอย่างด้านบนเพื่ออนุญาตให้ส่งส่วนหัว Referer ไปยัง Google อย่างชัดแจ้ง

โฆษณาบนแผนที่

Maps Embed API อาจรวมการโฆษณาบนแผนที่ไว้ด้วย รูปแบบโฆษณาและชุดของโฆษณาที่แสดงในแผนที่อาจเปลี่ยนแปลงได้โดยไม่ต้องแจ้งให้ทราบ

การเลือกโหมดแผนที่

คุณสามารถระบุโหมดแผนที่โหมดใดโหมดหนึ่งต่อไปนี้เพื่อใช้ใน URL ของคำขอ

• place: แสดงหมุดแผนที่ที่สถานที่หรือที่อยู่เฉพาะเจาะจง เช่น จุดสังเกต ธุรกิจ ลักษณะทางภูมิศาสตร์ หรือเมือง
• view: แสดงแผนที่โดยไม่มีเครื่องหมายหรือเส้นทาง
• directions: แสดงเส้นทางระหว่างจุดที่ระบุตั้งแต่ 2 จุดขึ้นไปบนแผนที่ รวมถึงระยะทางและเวลาเดินทาง
• streetview: แสดงมุมมองพาโนรามาแบบอินเทอร์แอกทีฟจากสถานที่ที่กำหนด
• search: แสดงผลการค้นหาสำหรับการค้นหาทั่วภูมิภาคในแผนที่

โหมด place

URL ต่อไปนี้ใช้โหมดแผนที่ place เพื่อแสดงเครื่องหมายบนแผนที่ที่หอไอเฟล

https://www.google.com/maps/embed/v1/place
  ?key=YOUR_API_KEY
  &q=Eiffel+Tower,Paris+France

คุณใช้พารามิเตอร์ต่อไปนี้ได้

โหมด view

ตัวอย่างต่อไปนี้ใช้โหมด view และพารามิเตอร์ maptype ที่ไม่บังคับเพื่อแสดงแผนที่ในมุมมองจากดาวเทียม

https://www.google.com/maps/embed/v1/view
  ?key=YOUR_API_KEY
  &center=-33.8569,151.2152
  &zoom=18
  &maptype=satellite

คุณใช้พารามิเตอร์ต่อไปนี้ได้

โหมด directions

ตัวอย่างต่อไปนี้ใช้โหมด directions เพื่อแสดงเส้นทางระหว่างออสโลว์และเทเลมาร์ค นอร์เวย์ ระยะทาง และเวลาเดินทางโดยเลี่ยงค่าผ่านทางและทางหลวง

https://www.google.com/maps/embed/v1/directions
  ?key=YOUR_API_KEY
  &origin=Oslo+Norway
  &destination=Telemark+Norway
  &avoid=tolls|highways

คุณใช้พารามิเตอร์ต่อไปนี้ได้

โหมด streetview

Maps Embed API ช่วยให้คุณแสดงรูปภาพ Street View เป็นภาพพาโนรามาแบบอินเทอร์แอกทีฟจากสถานที่ที่กำหนดผ่านพื้นที่ที่ครอบคลุมได้ นอกจากนี้ยังมีภาพ 360 องศาที่ผู้ใช้ส่งมาและคอลเล็กชันพิเศษของ Street View อีกด้วย

ภาพพาโนรามา Street View แต่ละภาพให้มุมมองที่สมบูรณ์ 360 องศาจากสถานที่เดียว รูปภาพในมุมมองแนวนอนแบบ 360 องศา (ภาพมุมกว้างรอบด้าน) และมุมมองแนวตั้ง 180 องศา (จากตรงขึ้นล่าง) โหมด streetview มอบมุมมองที่แสดงภาพพาโนรามาที่ได้เป็นทรงกลมโดยมีกล้องอยู่ตรงกลาง คุณสามารถปรับกล้อง เพื่อควบคุมการซูมและการวางแนวของกล้อง

ดูภาพพาโนรามาของโหมด streetview ต่อไปนี้:

https://www.google.com/maps/embed/v1/streetview
  ?key=YOUR_API_KEY
  &location=46.414382,10.013988
  &heading=210
  &pitch=10
  &fov=35

ต้องระบุพารามิเตอร์ของ URL อย่างน้อย 1 รายการ

• location ยอมรับละติจูดและลองจิจูดเป็นค่าที่คั่นด้วยคอมมา (46.414382,10.013988) API จะแสดงภาพพาโนรามาที่อยู่ใกล้กับสถานที่นี้มากที่สุด เนื่องจากภาพ Street View จะรีเฟรชเป็นระยะๆ และอาจถ่ายจากตำแหน่งที่ต่างกันเล็กน้อยในแต่ละครั้ง เป็นไปได้ว่าตำแหน่งของคุณอาจสแนปไปยังภาพพาโนรามาที่แตกต่างกันเมื่ออัปเดตภาพ

• pano คือรหัสพาโนรามาที่เฉพาะเจาะจง หากระบุ pano คุณอาจระบุ location ด้วย ระบบจะใช้ location เมื่อ API ไม่พบรหัสพาโนรามาเท่านั้น

คุณจะใช้พารามิเตอร์ของ URL ต่อไปนี้หรือไม่ก็ได้

โหมด search

โหมด Search แสดงผลลัพธ์สำหรับการค้นหาทั่วภูมิภาคในแผนที่ที่มองเห็นได้ เราแนะนำให้กำหนดตำแหน่งสำหรับการค้นหาโดยใส่ตำแหน่งในข้อความค้นหา (record+stores+in+Seattle) หรือใส่พารามิเตอร์ center และ zoom เพื่อเชื่อมโยงการค้นหา

https://www.google.com/maps/embed/v1/search
  ?key=YOUR_API_KEY
  &q=record+stores+in+Seattle

คุณใช้พารามิเตอร์ต่อไปนี้ได้

พารามิเตอร์รหัสสถานที่

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

Maps Embed API จะยอมรับรหัสสถานที่สำหรับพารามิเตอร์ของ URL ต่อไปนี้

• q
• origin
• destination
• waypoints

หากต้องการใช้รหัสสถานที่ คุณต้องเพิ่มคํานําหน้า place_id: ก่อน รหัสต่อไปนี้ระบุศาลาว่าการนิวยอร์กเป็นต้นทางของคำขอเส้นทาง: origin=place_id:ChIJs--MqP1YwokRBwAhjXWIHn8

• radius กำหนดรัศมี โดยมีหน่วยเป็นเมตรเพื่อค้นหาพาโนรามา โดยมีศูนย์กลางอยู่ที่ละติจูดและลองจิจูดที่กำหนด ค่าที่ถูกต้อง เป็นจำนวนเต็มที่ไม่เป็นลบ ค่าเริ่มต้นคือ 50

• source จำกัดการค้นหา Street View เฉพาะแหล่งที่มาที่เลือก ค่าที่ใช้ได้มีดังนี้

  • default ใช้แหล่งที่มาเริ่มต้นสำหรับ Street View การค้นหาไม่ได้จำกัดแค่บางแหล่งที่มา
  • outdoor จำกัดการค้นหาไว้เฉพาะคอลเล็กชันกลางแจ้ง คอลเล็กชันในอาคารจะไม่รวมอยู่ในผลการค้นหา โปรดทราบว่าภาพพาโนรามากลางแจ้ง อาจไม่มีอยู่ในสถานที่ที่ระบุ นอกจากนี้ โปรดทราบว่าการค้นหาจะแสดงเฉพาะภาพพาโนรามาที่คุณสามารถระบุได้ว่าอยู่ในร่มหรือกลางแจ้ง เช่น ไม่มีการส่งคืน PhotoSpheres เพราะไม่รู้ว่ารูปภาพอยู่ในอาคารหรือกลางแจ้ง