तुमच्या ॲपमध्ये नकाशे कसे जोडायचे: एम्बेड्स, परस्परसंवादी नकाशे आणि स्टोअर लोकेटर्स

तुमच्या ॲपमध्ये नकाशा जोडण्यासाठी, प्रथम ठरवा की तुम्हाला स्थिर एम्बेड हवा आहे (एक ठिकाण आणि एक पिन, जसे "आमचे दुकान शोधा") की परस्परसंवादी नकाशा (तुमच्या डेटामधील अनेक पिन्स, फिल्टर्स, क्लस्टरिंग, "जवळपास"). एकाच ठिकाणासाठी, एम्बेड केलेला नकाशा सर्वात जलद आहे आणि Google च्या Maps Embed API सह तो मोफत आहे. परस्परसंवादी नकाशांसाठी JavaScript नकाशा लायब्ररी वापरा — Google Maps JavaScript API, Mapbox GL JS, किंवा ओपन-सोर्स Leaflet सह टाइल प्रदाता — प्रत्येक ठिकाणाचे अक्षांश आणि रेखांश तुमच्या डेटाबेसमध्ये साठवा, आणि तुमची API की तुमच्या स्वतःच्या डोमेनपुरती मर्यादित करा. खालील विक्रेता तपशील प्रत्येक प्रदात्याच्या स्वतःच्या दस्तऐवजावरून सप्टेंबर 2026 पर्यंतचे आहेत.

तुम्हाला कोणत्या प्रकारचा नकाशा हवा?

बहुतेक छोट्या व्यवसाय साइट्सना फक्त पहिली ओळ लागते. निर्देशिका, मार्केटप्लेस आणि लिस्टिंग साइट्सना तिसरी आणि चौथी लागते.

तुमचे पर्याय

Google Maps Platform

Google च्या getting-started मार्गदर्शकानुसार तुम्हाला बिलिंग सक्षम असलेला Cloud प्रोजेक्ट तयार करावा लागतो आणि हवे असलेले APIs सक्षम करावे लागतात. त्यांच्या pay-as-you-go किंमत धोरणात Dynamic Maps सह Essentials SKUs ला दरमहा 10,000 इव्हेंट्सची मोफत मर्यादा मिळते, आणि त्यानंतर Dynamic Maps ला पहिल्या व्हॉल्यूम स्तरावर प्रति 1,000 इव्हेंट्सना $7.00 सूचीबद्ध आहे. 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 की: सार्वजनिक, पण मर्यादित

ब्राउझरमध्ये वापरलेल्या नकाशा की तुमचे पान उघडणारा कोणीही पाहू शकतो. हे अपेक्षित आहे, पण याचा अर्थ कोणीतरी तुमची की कॉपी करून तुमच्या बिलावरील वापर वाढवू शकतो. Google च्या सुरक्षा मार्गदर्शनानुसार तुमच्या डोमेनची यादी असलेले वेबसाइट (HTTP referrer) निर्बंध, आणि की फक्त तुम्ही वापरता त्या APIs साठी चालावी यासाठी API निर्बंध जोडा.

सर्व्हर-बाजूच्या सेवांच्या की — उदाहरणार्थ हजारो पत्त्यांचे geocoding — वेगळ्या असाव्यात आणि सर्व्हर-बाजूच्या सिक्रेट्समध्ये ठेवाव्यात, पानात नव्हे. तसेच प्रदात्याच्या कन्सोलमध्ये बजेट अलर्ट किंवा कोटा सेट करा, म्हणजे चुकीचे मोठ्या बिलात रूपांतर होणार नाही.

Geocoding: पत्ते एकदाच निर्देशांकांत बदला

नकाशे अक्षांश आणि रेखांश दाखवतात, पत्ते नव्हे. पत्त्याचे निर्देशांकांत रूपांतर करण्याला geocoding म्हणतात, आणि बहुतेक प्रदाते प्रति विनंती शुल्क आकारतात. कार्यक्षम पॅटर्न:

1. लिस्टिंग जतन होते तेव्हा सर्व्हरवर तिचा पत्ता geocode करा.
2. अक्षांश आणि रेखांश डेटाबेसमध्ये साठवा.
3. नकाशा साठवलेले निर्देशांक वाचतो; पेज व्ह्यूवर तो कधीही geocode करत नाही.

geocoding निकाल किती काळ साठवता येतात यावर प्रत्येक प्रदात्याच्या अटी तपासा; त्या वेगळ्या असतात.

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

एकच एम्बेड केलेला नकाशा:

Contact पानावर, GOOGLE_MAPS_EMBED_KEY मधील की वापरून Maps Embed API सह एम्बेड केलेला Google नकाशा जोडा, जो आमचा पत्ता दाखवेल (12 High Street, Leeds). त्याखाली "दिशा मिळवा" लिंक जोडा. फोनवर पूर्ण रुंदी करा आणि तो lazy-load करा.

लिस्टिंग्जचा परस्परसंवादी नकाशा:

listings टेबलमध्ये अक्षांश आणि रेखांश जोडा. लिस्टिंग तयार झाल्यावर किंवा तिचा पत्ता बदलल्यावर, GEOCODING_API_KEY मधील की वापरून सर्व्हरवर तिचा geocode करा आणि निर्देशांक जतन करा. Browse पानावर, Leaflet वापरून प्रत्येक लिस्टिंगसाठी एक मार्कर असलेला नकाशा दाखवा, मार्कर एकमेकांवर आल्यास क्लस्टरिंगसह. मार्करवर क्लिक केल्यास शीर्षक, किंमत आणि लिंक दिसेल. नकाशा आणि यादी एकाच फिल्टर्सचा वापर करतील.

"जवळपास":

"Near me" बटण जोडा जे अभ्यागताचे स्थान विचारते आणि 10 km मधील लिस्टिंग्ज अंतरानुसार क्रमवारी लावून दाखवते. त्यांनी स्थान प्रवेश नाकारला तर त्यांना त्याऐवजी शहर टाइप करू द्या.

टप्प्याटप्प्याने

1. वरच्या टेबलमधून नकाशा प्रकार निवडा.
2. प्रदात्याचे खाते आणि प्रोजेक्ट तयार करा, आणि फक्त गरजेचे APIs सक्षम करा.
3. की तयार करा: तुमच्या डोमेनपुरती मर्यादित ब्राउझर की (बांधताना प्रीव्ह्यू डोमेनसह) आणि गरज असल्यास geocoding साठी सर्व्हर की.
4. की सिक्रेट्स म्हणून साठवा आणि बिल्डरला त्या वापरायला सांगा; ब्राउझर की पानात जाते तरीही ती मर्यादितच राहते.
5. तुमच्या डेटाबेसमध्ये प्रत्येक ठिकाणाचे निर्देशांक साठवा.
6. नकाशा बनवा: मार्कर्स, पॉपअप्स, क्लस्टरिंग, आणि योग्य डीफॉल्ट झूम.
7. यादीसोबत जोडा. फक्त नकाशा फोनवर आणि स्क्रीन रीडरसाठी वापरणे कठीण आहे. तेच निकाल यादी म्हणून दाखवा.
8. प्रदात्याच्या कन्सोलमध्ये बजेट अलर्ट सेट करा.
9. थेट डोमेनवर प्रकाशित करून चाचणी करा, कारण थेट डोमेन जोडेपर्यंत referrer निर्बंध अनेकदा नकाशा अडवतात.

सामान्य चुका

• निर्बंध नसलेल्या की. कोणीही त्या त्यांच्या स्वतःच्या साइटवर पुन्हा वापरू शकतो.
• प्रत्येक पेज व्ह्यूवर geocoding. संथ आणि महाग; जतन करताना एकदाच geocode करा.
• की निर्बंधांमध्ये थेट डोमेन विसरणे. प्रीव्ह्यूमध्ये चालते, प्रोडक्शनमध्ये रिकामा राखाडी बॉक्स.
• फक्त-नकाशा लेआउट. यादीशिवाय पिन्स लहान स्क्रीनवर त्रासदायक आणि ॲक्सेसिबल नसतात.
• क्लस्टरिंगशिवाय शेकडो मार्कर्स. न वाचता येणारे आणि संथ.
• श्रेय गायब. बहुतेक नकाशा आणि टाइल प्रदाते ते मागतात, आणि ते लपवणे त्यांच्या अटींचे उल्लंघन आहे.
• पेज लोडवर स्थान विचारणे. वापरकर्त्याने "Near me" टॅप केल्यावरच विचारा.

चेकलिस्ट

• कामासाठी योग्य नकाशा प्रकार निवडला
• ब्राउझर की तुमच्या डोमेन आणि आवश्यक APIs पुरती मर्यादित
• सर्व्हर-बाजूच्या की सिक्रेट्समध्ये ठेवल्या
• निर्देशांक डेटाबेसमध्ये साठवले, एकदाच geocode केलेले
• निकाल यादी म्हणूनही दाखवले
• अनेक मार्कर्ससाठी क्लस्टरिंग
• श्रेय दृश्यमान
• प्रदात्याबरोबर बजेट अलर्ट सेट
• प्रकाशित डोमेनवर आणि फोनवर चाचणी झाली

Mythex सह नकाशे जोडणे

Mythex मध्ये अंगभूत नकाशा एकत्रीकरण नाही; तुम्ही तुमची स्वतःची प्रदाता की आणता, ती प्रोजेक्ट सिक्रेट म्हणून जोडता (किंवा एजंट सिक्रेट्स कार्ड दाखवेल तेव्हा पेस्ट करता), आणि Integrate any API मध्ये वर्णन केल्याप्रमाणे चॅटमध्ये नकाशा मागता. निर्देशांक प्रोजेक्टच्या डेटाबेस मध्ये जातात. लक्षात ठेवा की तुमचे प्रीव्ह्यू आणि प्रकाशित दोन्ही डोमेन की च्या वेबसाइट निर्बंधांमध्ये जोडा, आणि सिक्रेट्स बदलल्यावर पुन्हा प्रकाशित करा.

नकाशे सहसा शोध आणि लिस्टिंग्जच्या शेजारी असतात: तुमच्या ॲपमध्ये शोध कसा जोडायचा, निर्देशिका वेबसाइट कशी बनवायची आणि लहान व्यवसाय वेबसाइट कशी बनवायची पहा.

प्रश्न