# วิธีฝังแผนที่การเคลื่อนที่ในเว็บไซต์ของคุณ?

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

Source: https://www.roote.ai/th/guides/%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E0%B8%9D%E0%B8%B1%E0%B8%87%E0%B9%81%E0%B8%9C%E0%B8%99%E0%B8%97%E0%B8%B5%E0%B9%88%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B9%80%E0%B8%84%E0%B8%A5%E0%B8%B7%E0%B9%88%E0%B8%AD%E0%B8%99%E0%B8%97%E0%B8%B5%E0%B9%88%E0%B9%83%E0%B8%99%E0%B9%80%E0%B8%A7%E0%B9%87%E0%B8%9A%E0%B9%84%E0%B8%8B%E0%B8%95%E0%B9%8C%E0%B8%82%E0%B8%AD%E0%B8%87%E0%B8%84%E0%B8%B8%E0%B8%93/
Language: th
Author: ROOTE

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

ตัวอย่างในไกด์นี้ใช้ embed.roote.ai โดเมนที่ฝังในไกด์ ROOTE เอกสารทั่วไปยังอธิบายการฝัง map.roote.ai และแยกพารามิเตอร์ของกล้องออกจากการค้นหาแบบเต็ม

## เพิ่ม iframe ที่ตอบสนอง

บล็อกนี้เปิดการค้นหาจักรยานที่เมืองบอร์กโดซ์ด้วยระดับซูม 15 URL สร้างในโค้ด หัวข้อ iframe อธิบายเนื้อหาสำหรับเครื่องอ่านหน้าจอ ปรับหัวข้อนี้ให้เหมาะกับภาษาของหน้าคุณ

```
<iframe
  title="Carte ROOTE — vélos à Bordeaux"
  src="https://embed.roote.ai/?q=Bordeaux&amp;modes=bicycle&amp;zoom=15"
  width="100%"
  height="480"
  loading="lazy"
  allow="geolocation"
  style="display:block; width:100%; min-height:360px; border:0; border-radius:16px;"
></iframe>
```

ในแอตทริบิวต์ HTML ตัวคั่น & เขียนเป็น &amp; ความกว้าง 100% ตามขนาดของคอนเทนเนอร์ รักษาความสูงที่ใช้งานได้บนมือถือและหลีกเลี่ยงการวางปุ่มควบคุมสำคัญนอกโซนที่มองเห็นได้

## เลือกโหมดที่สอดคล้องกับหน้า

| ความต้องการ | พารามิเตอร์ของ embed |
| --- | --- |
| จักรยาน | modes=bicycle |
| ห้องน้ำ | modes=toilets |
| รถบัส | modes=bus |
| รถราง | modes=tram |
| รถบัสและรถราง | modes=bus,tram |
| จักรยานและห้องน้ำ | modes=bicycle,toilets |

ค่านี้เป็นของเส้นทาง embed ROOTE ที่เชื่อมต่อกับหมวดการเคลื่อนที่ บริการ และการขนส่ง ไม่ทดแทนพารามิเตอร์ REST: Services ใช้ types ส่วน Transit ใช้ modes แผนที่ที่โฟกัสเมืองไม่ได้รับประกันว่าหมวดทั้งหมดมีผลลัพธ์ในเมืองนั้น

## แยกแยะกล้องและต้นทางการค้นหา

lat และ lon กำหนดตำแหน่งกล้อง แต่ไม่เพียงพอในสัญญาที่กำหนดของแผนที่สำหรับการสร้างการค้นหาใกล้เคียง เพื่อกู้คืนการค้นหาที่ทราบ ใช้ search_lat, search_lon และ search_label พร้อมกับโหมดและซูม

```
https://embed.roote.ai/?search_lat=44.8416106&search_lon=-0.5810938&search_label=Bordeaux&zoom=15&modes=bus,tram
```

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

[เอกสารพารามิเตอร์ของแผนที่ ROOTE](https://doc.roote.ai/map)

## สร้าง URL โดยไม่สูญเสียอักขระพิเศษ

ใช้ URL และ URLSearchParams แทนการต่อข้อความด้วยมือ ซึ่งจะเข้ารหัสช่องว่าง สระบุ และตัวคั่น โค้ดนี้ใช้กับเบราว์เซอร์และสร้างที่อยู่ iframe จากที่ตั้งที่ป้อน

```
const embedUrl = new URL('https://embed.roote.ai/');
embedUrl.searchParams.set('q', 'Place des Quinconces, Bordeaux');
embedUrl.searchParams.set('modes', 'bicycle,toilets');
embedUrl.searchParams.set('zoom', '15');
document.querySelector('iframe').src = embedUrl.toString();
```

## รักษาบริบทไปยังแผนที่เต็ม

ลิงก์ไปยัง map.roote.ai ควรเก็บสถานะการค้นหาปัจจุบันถ้าคุณรู้ สร้าง URL ใหม่โดยไม่เอาพารามิเตอร์จะสูญเสียเมือง โหมด หรือซูม เก็บอ็อบเจ็กต์ URL ร่วมเวลาปรับปรุงโดยหน้า

```
const fullMapUrl = new URL('https://map.roote.ai/');
fullMapUrl.search = embedUrl.search;
const link = document.querySelector('[data-open-map]');
link.href = fullMapUrl.toString();
link.target = '_blank';
link.rel = 'noopener noreferrer';
```

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

## จัดการตำแหน่งและปฏิสัมพันธ์บนมือถือ

allow="geolocation" อนุญาต iframe ขอที่อยู่ตำแหน่ง โดยขึ้นกับการยินยอมและนโยบายสิทธิ์ของไซต์ ปฏิเสธควรทำให้การค้นหาเมืองใช้งานได้ อย่าขอตำแหน่งทันทีเมื่อเปิดหน้า ถ้าผู้ใช้ไม่ได้เลือกการกระทำนี้

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

## ตรวจสอบผลลัพธ์และสถานะข้อผิดพลาด

ทดสอบชุดตัวกรอง แต่ละเมืองที่รู้ พื้นที่ข้อมูลน้อย การค้นหาผิด และหมวดที่ไม่มีข้อมูล แผนที่ที่ไม่มีเครื่องหมายไม่บ่งชี้ว่าการค้นหาเป็นค่าว่างหรือมีปัญหา เก็บข้อความจาก embed และเข้าถึงแผนที่เต็มได้

[แยกแยะระหว่างไม่มีผลลัพธ์และข้อผิดพลาด API](https://www.roote.ai/th/guides/%E0%B8%9C%E0%B8%A5%E0%B8%A5%E0%B8%9A-api-%E0%B8%AB%E0%B8%A3%E0%B8%B7%E0%B8%AD-%E0%B8%82%E0%B9%89%E0%B8%AD%E0%B8%9C%E0%B8%B4%E0%B8%94%E0%B8%9E%E0%B8%A5%E0%B8%B2%E0%B8%94-%E0%B9%81%E0%B8%A2%E0%B8%81%E0%B9%81%E0%B8%A2%E0%B8%B0%E0%B8%AD%E0%B8%A2%E0%B9%88%E0%B8%B2%E0%B8%87%E0%B9%84%E0%B8%A3/)

[เลือกใช้ embed, API หรือ MCP](https://www.roote.ai/th/guides/api-ou-mcp-pour-integration-donnees-mobilite/)

[ตัวอย่างไกด์ค้นหาห้องน้ำ](https://www.roote.ai/th/guides/%E0%B8%A7%E0%B8%B4%E0%B8%98%E0%B8%B5%E0%B8%84%E0%B9%89%E0%B8%99%E0%B8%AB%E0%B8%B2%E0%B8%AB%E0%B9%89%E0%B8%AD%E0%B8%87%E0%B8%99%E0%B9%89%E0%B8%B3%E0%B8%AA%E0%B8%B2%E0%B8%98%E0%B8%B2%E0%B8%A3%E0%B8%93%E0%B8%B0%E0%B8%9F%E0%B8%A3%E0%B8%B5%E0%B9%83%E0%B8%81%E0%B8%A5%E0%B9%89%E0%B8%95%E0%B8%B1%E0%B8%A7%E0%B8%84%E0%B8%B8%E0%B8%93/)

## คำถามที่พบบ่อย

### ต้องใส่ API key ใน iframe หรือไม่?

URL สาธารณะที่แสดงไม่มีคีย์ อย่าใส่ความลับใน URL embed หรือโค้ดฝั่งลูกค้า

### zoom=15 ขยายรัศมีการค้นหาหรือไม่?

ซูมควบคุมมุมมอง ไม่ใช่รัศมีคำขอ API ตรวจสอบพารามิเตอร์การค้นหาของอินเทอร์เฟซที่ใช้

### หน้าแม่รู้การเปลี่ยนแปลงใน iframe หรือไม่?

รู้พารามิเตอร์ที่ส่งไป การเปลี่ยนแปลงภายในต้องมีเมคานิซึมแลกเปลี่ยนข้อมูลที่มีเอกสารระหว่างสองโดเมน