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

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

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