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

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

การสร้าง 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 รายการใดรายการหนึ่งต่อไปนี้

• 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 จำกัดการค้นหาไว้สำหรับคอลเล็กชันกลางแจ้ง ผลงานในอาคารจะไม่รวมอยู่ในผลการค้นหา โปรดทราบว่าอาจไม่มีภาพพาโนรามากลางแจ้ง ในตำแหน่งที่ระบุ และโปรดทราบว่าการค้นหาจะแสดงเฉพาะภาพพาโนรามาที่มีโอกาสระบุว่าภาพอยู่ในอาคารหรือกลางแจ้งเท่านั้น เช่น ระบบจะไม่แสดงภาพ 360 องศาเนื่องจากไม่ทราบว่าเป็นภาพภายในหรือภายนอก