अपनी ऐप में मैप कैसे जोड़ें: एम्बेड, इंटरैक्टिव मैप और स्टोर लोकेटर

अपनी ऐप में मैप जोड़ने के लिए पहले तय करें कि आपको स्टैटिक एम्बेड चाहिए (एक जगह एक पिन के साथ, जैसे "हमारी दुकान ढूँढें") या इंटरैक्टिव मैप (आपके डेटा से कई पिन, फ़िल्टर, क्लस्टरिंग, "मेरे पास")। एक जगह के लिए एम्बेड किया गया मैप सबसे तेज़ है और Google के Maps Embed API से मुफ़्त भी। इंटरैक्टिव मैप के लिए JavaScript मैप लाइब्रेरी इस्तेमाल करें: Google Maps JavaScript API, Mapbox GL JS, या ओपन-सोर्स Leaflet एक टाइल प्रदाता के साथ। हर जगह का अक्षांश और देशांतर अपने डेटाबेस में रखें, और अपनी API key को अपने डोमेन तक सीमित करें। नीचे विक्रेताओं की जानकारी सितंबर 2026 तक हर प्रदाता के अपने डॉक्यूमेंटेशन से है।

आपको किस तरह का मैप चाहिए?

ज़्यादातर छोटी बिज़नेस साइटों को सिर्फ़ पहली पंक्ति चाहिए। डायरेक्टरी, मार्केटप्लेस और लिस्टिंग साइटों को तीसरी और चौथी।

आपके विकल्प

Google Maps Platform

Google की गेटिंग-स्टार्टेड गाइड कहती है कि आपको बिलिंग-सक्षम Cloud प्रोजेक्ट बनाना होगा और जिन APIs की ज़रूरत है उन्हें चालू करना होगा। उसकी pay-as-you-go कीमत में Dynamic Maps सहित Essentials SKU को हर महीने 10,000 इवेंट की मुफ़्त सीमा मिलती है, और उससे ऊपर Dynamic Maps की दर पहले वॉल्यूम टियर पर $7.00 प्रति 1,000 इवेंट सूचीबद्ध है। Maps Embed SKU असीमित और मुफ़्त सूचीबद्ध है। Google मासिक सब्सक्रिप्शन प्लान भी बेचता है। मौजूदा आँकड़ों के लिए Google Maps Platform की कीमतें देखें।

Mapbox

Mapbox के प्राइसिंग पेज पर वेब पर Mapbox GL JS के लिए हर महीने 50,000 मुफ़्त मैप लोड सूचीबद्ध हैं, फिर प्रति 1,000 लोड $5.00। देखें Mapbox की कीमतें।

Leaflet और OpenStreetMap

Leaflet खुद को मोबाइल-फ़्रेंडली इंटरैक्टिव मैप के लिए एक ओपन-सोर्स JavaScript लाइब्रेरी बताता है, जो लगभग 42 KB JavaScript है। इसे मैप टाइल (मैप की तस्वीरें) कहीं से चाहिए। OpenStreetMap के सार्वजनिक टाइल सर्वर लुभावने लगते हैं, लेकिन टाइल उपयोग नीति दिखने वाला एट्रिब्यूशन माँगती है, बल्क डाउनलोड मना करती है, कोई सेवा गारंटी नहीं देती, और कमर्शियल सेवाओं को चेतावनी देती है कि पहुँच वापस ली जा सकती है। असली प्रोडक्ट के लिए Leaflet के साथ काम करने वाला कमर्शियल या खुद होस्ट किया टाइल स्रोत इस्तेमाल करें।

API keys: सार्वजनिक, पर सीमित

ब्राउज़र में इस्तेमाल होने वाली मैप keys हर उस व्यक्ति को दिखती हैं जो आपका पेज खोलता है। यह अपेक्षित है, लेकिन इसका मतलब है कि कोई आपकी key कॉपी करके आपके बिल पर उपयोग बढ़ा सकता है। Google की सुरक्षा गाइडेंस है कि वेबसाइट (HTTP referrer) प्रतिबंध जोड़ें जिनमें आपके डोमेन हों, और API प्रतिबंध भी ताकि key सिर्फ़ उन्हीं APIs के लिए काम करे जिनका आप इस्तेमाल करते हैं।

सर्वर-साइड सेवाओं की keys, जैसे हज़ारों पते जियोकोड करने के लिए, अलग होनी चाहिए और सर्वर सीक्रेट्स में रखी जानी चाहिए, पेज में नहीं। साथ ही प्रदाता के कंसोल में बजट अलर्ट या कोटा सेट करें, ताकि एक गलती बड़ा बिल न बन जाए।

जियोकोडिंग: पते को एक बार निर्देशांक में बदलें

मैप अक्षांश और देशांतर पर पिन लगाते हैं, पते पर नहीं। पते को निर्देशांक में बदलना जियोकोडिंग कहलाता है, और ज़्यादातर प्रदाता हर रिक्वेस्ट के हिसाब से इसका शुल्क लेते हैं। कुशल पैटर्न:

1. जब कोई लिस्टिंग सेव हो, तो उसका पता सर्वर पर जियोकोड करें।
2. अक्षांश और देशांतर डेटाबेस में सेव करें।
3. मैप सेव किए गए निर्देशांक पढ़ता है; पेज देखे जाने पर वह कभी जियोकोड नहीं करता।

हर प्रदाता की शर्तें जाँचें कि जियोकोडिंग के नतीजे कितने समय तक स्टोर किए जा सकते हैं; ये अलग-अलग हैं।

उदाहरण प्रॉम्प्ट

एक एम्बेड किया गया मैप:

Contact पेज पर Maps Embed API का इस्तेमाल करके एक एम्बेडेड Google मैप जोड़ो, जो हमारा पता (12 High Street, Leeds) दिखाए, key GOOGLE_MAPS_EMBED_KEY में हो। उसके नीचे एक "दिशा पाएँ" लिंक जोड़ो। फ़ोन पर उसे पूरी चौड़ाई दो और उसे lazy-load करो।

लिस्टिंग का इंटरैक्टिव मैप:

listings टेबल में अक्षांश और देशांतर जोड़ो। जब कोई लिस्टिंग बने या उसका पता बदले, तो GEOCODING_API_KEY की key से सर्वर पर उसे जियोकोड करो और निर्देशांक सेव करो। Browse पेज पर Leaflet से एक मैप दिखाओ, हर लिस्टिंग का एक मार्कर हो, और मार्कर आपस में टकराएँ तो क्लस्टरिंग हो। मार्कर पर क्लिक करने से शीर्षक, कीमत और एक लिंक दिखे। मैप और सूची एक ही फ़िल्टर इस्तेमाल करें।

"मेरे पास":

एक "मेरे पास" बटन जोड़ो जो विज़िटर की लोकेशन माँगे और 10 km के अंदर की लिस्टिंग दूरी के हिसाब से क्रम में दिखाए। अगर वह लोकेशन की अनुमति न दे, तो उसे शहर टाइप करने दो।

चरण-दर-चरण

1. ऊपर की टेबल से मैप का प्रकार चुनें।
2. प्रदाता अकाउंट और प्रोजेक्ट बनाएँ, और सिर्फ़ ज़रूरी APIs चालू करें।
3. Keys बनाएँ: एक ब्राउज़र key जो आपके डोमेन तक सीमित हो (बनाते समय आपका प्रीव्यू डोमेन भी), और ज़रूरत हो तो जियोकोडिंग के लिए एक सर्वर key।
4. Keys को सीक्रेट्स के रूप में रखें और अपने बिल्डर को उनका इस्तेमाल करने को कहें; ब्राउज़र key फिर भी सीमित रहती है, भले ही वह पेज में चली जाए।
5. हर जगह के निर्देशांक अपने डेटाबेस में रखें।
6. मैप बनाएँ: मार्कर, पॉपअप, क्लस्टरिंग, और सही डिफ़ॉल्ट ज़ूम।
7. उसके साथ एक सूची दें। अकेला मैप फ़ोन पर और स्क्रीन रीडर के लिए इस्तेमाल करना मुश्किल है। वही नतीजे सूची में दिखाएँ।
8. प्रदाता कंसोल में बजट अलर्ट सेट करें।
9. लाइव डोमेन पर पब्लिश और टेस्ट करें, क्योंकि रेफ़रर प्रतिबंध अक्सर तब तक मैप को रोकते हैं जब तक लाइव डोमेन न जोड़ा जाए।

आम गलतियाँ

• बिना प्रतिबंध की keys। कोई भी उन्हें अपनी साइट पर दोबारा इस्तेमाल कर सकता है।
• हर पेज व्यू पर जियोकोडिंग। धीमी और महँगी; सेव के समय एक बार जियोकोड करें।
• key प्रतिबंधों में लाइव डोमेन भूल जाना। प्रीव्यू में चलता है, प्रोडक्शन में खाली धूसर बॉक्स।
• सिर्फ़ मैप वाले लेआउट। बिना सूची के पिन छोटी स्क्रीन पर दिक्कत देते हैं और सुलभ नहीं होते।
• क्लस्टरिंग के बिना सैकड़ों मार्कर। पढ़ने में मुश्किल और धीमे।
• एट्रिब्यूशन गायब होना। ज़्यादातर मैप और टाइल प्रदाता इसे माँगते हैं, और इसे छिपाना उनकी शर्तों का उल्लंघन है।
• पेज लोड पर लोकेशन माँगना। तभी माँगें जब यूज़र "मेरे पास" पर टैप करे।

चेकलिस्ट

• काम के लिए सही मैप प्रकार चुना गया है
• ब्राउज़र key आपके डोमेन और ज़रूरी APIs तक सीमित है
• सर्वर-साइड keys सीक्रेट्स में रखी गई हैं
• निर्देशांक डेटाबेस में हैं, और एक बार जियोकोड किए गए हैं
• नतीजे सूची में भी दिखाए जाते हैं
• बहुत से मार्कर के लिए क्लस्टरिंग है
• एट्रिब्यूशन दिख रहा है
• प्रदाता के साथ बजट अलर्ट सेट है
• पब्लिश्ड डोमेन पर और फ़ोन पर टेस्ट किया गया

Mythex में मैप जोड़ना

Mythex में कोई अंतर्निहित मैप इंटीग्रेशन नहीं है; आप अपनी प्रदाता key लाते हैं, उसे प्रोजेक्ट सीक्रेट के रूप में जोड़ते हैं (या जब एजेंट सीक्रेट्स कार्ड दिखाए तब चिपकाते हैं), और कोई भी API इंटीग्रेट करें में बताए अनुसार चैट में मैप माँगते हैं। निर्देशांक प्रोजेक्ट के डेटाबेस में जाते हैं। याद रखें कि key की वेबसाइट प्रतिबंधों में अपना प्रीव्यू और पब्लिश्ड, दोनों डोमेन जोड़ें, और सीक्रेट्स बदलने के बाद फिर से पब्लिश करें।

मैप अक्सर खोज और लिस्टिंग के साथ चलते हैं: देखें अपनी ऐप में खोज कैसे जोड़ें, डायरेक्टरी वेबसाइट कैसे बनाएँ और छोटी बिज़नेस वेबसाइट कैसे बनाएँ।

सवाल