ฝังแผนที่

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

สร้าง 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

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

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