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

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

การสร้าง 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 องศาเนื่องจากไม่ทราบว่าเป็นภาพภายในหรือภายนอก