अपने साइट में पूरी इंटरफेस बनाए बिना मोबिलिटी मानचित्र जोड़ने के लिए, ROOTE iframe का उपयोग करें। embed पृष्ठ के लिए शहर खोज और उपयुक्त फिल्टर जैसे बाइक के लिए बाइक गाइड, शौचालय के लिए WC गाइड, बस और ट्राम के लिए परिवहन उपलब्ध कराता है।
इस गाइड के उदाहरण 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&modes=bicycle&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 एट्रिब्यूट में, & को & लिखा जाता है। चौड़ाई 100% कंटेनर के अनुसार होती है। मोबाइल पर उपयोगी ऊँचाई रखें और आवश्यक नियंत्रण दृश्य क्षेत्र के बाहर न रखें।
पृष्ठ के अनुसार उपयुक्त मोड चुनना
| आवश्यकता | embed का पैरामीटर |
|---|---|
| बाइक | modes=bicycle |
| शौचालय | modes=toilets |
| बस | modes=bus |
| ट्राम | modes=tram |
| बस और ट्राम | modes=bus,tram |
| बाइक और शौचालय | modes=bicycle,toilets |
ये मान ROOTE embed के लिए हैं, जो मोबिलिटी, सेवाएँ और ट्रांजिट परिवारों से जुड़े हैं। ये REST पैरामीटर को प्रतिस्थापित नहीं करते: Services में types और Transit में modes होता है। एक शहर पर केंद्रित मानचित्र यह सुनिश्चित नहीं करता कि हर परिवार में परिणाम मौजूद हों।
कैमरा और खोज स्रोत को अलग करना
lat और lon कैमरे की स्थिति निर्धारित करते हैं। ये निकटता खोज बनाने के लिए पर्याप्त नहीं हैं। ज्ञात खोज पुनर्स्थापित करने के लिए search_lat, search_lon और search_label का उपयोग करें, साथ में modes और zoom।
https://embed.roote.ai/?search_lat=44.8416106&search_lon=-0.5810938&search_label=Bordeaux&zoom=15&modes=bus,tramउपरोक्त निर्देशांकों से बोर्दो में एक संदर्भ बिंदु मिलता है, उपयोगकर्ता की स्थिति नहीं। यदि आप कैमरा पैरामीटर भी जोड़ते हैं, तो आप दूरी के लिए उपयोग किए गए बिंदु को रखते हुए एक अन्य क्षेत्र भी दिखा सकते हैं। यह तब करें जब यह अलगाव वांछित हो।
ROOTE मानचित्र पैरामीटर का दस्तावेज़ीकरण
विशेष अक्षर खोए बिना 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 त्रुटि अलग करना
embed, API और MCP में चयन करना
शौचालय खोजने के लिए गाइड का उदाहरण
अक्सर पूछे जाने वाले प्रश्न
क्या iframe में API कुंजी डालनी चाहिए?
यहां दिखाए सार्वजनिक URL में नहीं होती। embed URL या क्लाइंट कोड में कोई सीक्रेट न रखें।
क्या zoom=15 खोज त्रिज्या बढ़ाता है?
ज़ूम दृश्य को नियंत्रित करता है। इसे API अनुरोध त्रिज्या से न मिलाएं; प्रयुक्त इंटरफेस खोज पैरामीटर जांचें।
क्या पैरेंट iframe में बदलाव जानता है?
यह वे पैरामीटर जानता है जो वह भेजता है। आंतरिक परिवर्तनों के लिए दोनों डोमेन के बीच दस्तावेजीकृत विनिमय तंत्र चाहिए।