നിങ്ങളുടെ ആപ്പിൽ മാപ്പുകൾ എങ്ങനെ ചേർക്കാം: എംബെഡുകൾ, ഇന്ററാക്റ്റീവ് മാപ്പുകൾ, സ്റ്റോർ ലൊക്കേറ്ററുകൾ

നിങ്ങളുടെ ആപ്പിൽ ഒരു മാപ്പ് ചേർക്കാൻ, ആദ്യം നിങ്ങൾക്ക് സ്റ്റാറ്റിക് എംബെഡ് (ഒരു സ്ഥലം ഒരു പിന്നോടെ, “ഞങ്ങളുടെ ഷോപ്പ് കണ്ടെത്തുക” പോലെ) വേണമോ അതോ ഇന്ററാക്റ്റീവ് മാപ്പ് (നിങ്ങളുടെ ഡാറ്റയിൽ നിന്നുള്ള നിരവധി പിന്നുകൾ, ഫിൽറ്ററുകൾ, ക്ലസ്റ്ററിംഗ്, “അടുത്തുള്ളത്”) വേണമോ എന്ന് തീരുമാനിക്കുക. ഒരു സ്ഥലത്തിന്, എംബെഡ് ചെയ്ത മാപ്പ് ഏറ്റവും വേഗമുള്ളതും Google-ന്റെ Maps Embed API വഴി സൗജന്യവുമാണ്. ഇന്ററാക്റ്റീവ് മാപ്പുകൾക്ക്, Google Maps JavaScript API, Mapbox GL JS, അല്ലെങ്കിൽ ഓപ്പൺ-സോഴ്സ് Leaflet ഒരു ടൈൽ പ്രൊവൈഡറോടെ — ഒരു JavaScript മാപ്പ് ലൈബ്രറി ഉപയോഗിക്കുക, ഓരോ സ്ഥലത്തിന്റെയും അക്ഷാംശവും രേഖാംശവും ഡാറ്റാബേസിൽ സൂക്ഷിക്കുക, API കീ നിങ്ങളുടെ ഡൊമെയ്‌നിലേക്ക് പരിമിതപ്പെടുത്തുക. താഴെയുള്ള വെണ്ടർ വിവരങ്ങൾ 2026 സെപ്റ്റംബർ പ്രകാരം ഓരോ പ്രൊവൈഡറുടെയും സ്വന്തം ഡോക്യുമെന്റേഷനിൽ നിന്നാണ്.

നിങ്ങൾക്ക് എന്ത് തരം മാപ്പ് വേണം?

മിക്ക ചെറിയ ബിസിനസ് സൈറ്റുകൾക്കും ആദ്യ വരി മാത്രം മതി. ഡയറക്ടറികൾക്കും മാർക്കറ്റ്‌പ്ലേസുകൾക്കും ലിസ്റ്റിംഗ് സൈറ്റുകൾക്കും മൂന്നും നാലും വരികൾ വേണം.

നിങ്ങളുടെ ഓപ്ഷനുകൾ

Google Maps Platform

Google-ന്റെ getting-started ഗൈഡ് പറയുന്നത് ഒരു ബില്ലിംഗ് പ്രവർത്തനക്ഷമമായ Cloud പ്രോജക്റ്റ് സൃഷ്ടിക്കണം, നിങ്ങൾ വേണ്ട APIകൾ ഓൺ ചെയ്യണം എന്നാണ്. അതിന്റെ pay-as-you-go വിലനിർണ്ണയം Dynamic Maps ഉൾപ്പെടെ Essentials SKU-കൾക്ക് പ്രതിമാസം 10,000 ഇവന്റുകളുടെ സൗജന്യ പരിധി നൽകുന്നു, അതിനപ്പുറം 1,000-ന് $7.00 (ആദ്യ വോളിയം ശ്രേണിയിൽ) എന്ന് Dynamic Maps-ന് ലിസ്റ്റ് ചെയ്യുന്നു. 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) നിയന്ത്രണങ്ങൾ, കീ ഉപയോഗിക്കുന്ന APIകൾ മാത്രം അനുവദിക്കുന്ന API നിയന്ത്രണങ്ങൾ എന്നിവ ചേർക്കുക.

സെർവർ-സൈഡ് സേവനങ്ങളുടെ കീകൾ — ഉദാഹരണത്തിന് ആയിരക്കണക്കിന് വിലാസങ്ങൾ ജിയോകോഡ് ചെയ്യുന്നത് — പ്രത്യേക കീകളായിരിക്കണം, സെർവർ രഹസ്യങ്ങളിൽ സൂക്ഷിക്കണം, പേജിൽ വയ്ക്കരുത്. പ്രൊവൈഡറുടെ കൺസോളിൽ ബജറ്റ് അലേർട്ടുകളോ ക്വോട്ടകളോ സജ്ജീകരിക്കുക; ഒരു പിഴവ് വലിയ ബില്ലാകാതിരിക്കാൻ.

ജിയോകോഡിംഗ്: വിലാസങ്ങൾ ഒരിക്കൽ കോർഡിനേറ്റുകളാക്കുക

മാപ്പുകൾ പ്ലോട്ട് ചെയ്യുന്നത് വിലാസങ്ങളല്ല, അക്ഷാംശവും രേഖാംശവുമാണ്. വിലാസത്തെ കോർഡിനേറ്റുകളാക്കുന്നതിനെ ജിയോകോഡിംഗ് എന്ന് വിളിക്കുന്നു; മിക്ക പ്രൊവൈഡർമാരും അത് ഓരോ അഭ്യർത്ഥനയ്ക്കും ചാർജ് ചെയ്യുന്നു. കാര്യക്ഷമമായ രീതി:

1. ഒരു ലിസ്റ്റിംഗ് സേവ് ചെയ്യുമ്പോൾ, സെർവറിൽ അതിന്റെ വിലാസം ജിയോകോഡ് ചെയ്യുക.
2. അക്ഷാംശവും രേഖാംശവും ഡാറ്റാബേസിൽ സൂക്ഷിക്കുക.
3. മാപ്പ് സംഭരിച്ച കോർഡിനേറ്റുകൾ വായിക്കുന്നു; പേജ് കാണുമ്പോൾ ഒരിക്കലും ജിയോകോഡ് ചെയ്യുന്നില്ല.

ജിയോകോഡിംഗ് ഫലങ്ങൾ എത്രനേരം സൂക്ഷിക്കാമെന്ന് ഓരോ പ്രൊവൈഡറുടെയും നിബന്ധനകൾ പരിശോധിക്കുക; അവ വ്യത്യസ്തമാണ്.

ഉദാഹരണ പ്രോംപ്റ്റുകൾ

ഒരു എംബെഡ് ചെയ്ത മാപ്പ്:

Contact പേജിൽ, ഞങ്ങളുടെ വിലാസം (12 High Street, Leeds) കാണിക്കുന്ന ഒരു എംബെഡ് ചെയ്ത Google മാപ്പ് ചേർക്കുക, Maps Embed API ഉപയോഗിച്ച്, കീ GOOGLE_MAPS_EMBED_KEY-ൽ. അതിന് താഴെ “ദിശകൾ നേടുക” ലിങ്ക് ചേർക്കുക. ഫോണുകളിൽ പൂർണ്ണ വീതിയിലാക്കുക, അത് ലേസി-ലോഡ് ചെയ്യുക.

ലിസ്റ്റിംഗുകളുടെ ഇന്ററാക്റ്റീവ് മാപ്പ്:

ലിസ്റ്റിംഗുകളുടെ ടേബിളിൽ അക്ഷാംശവും രേഖാംശവും ചേർക്കുക. ഒരു ലിസ്റ്റിംഗ് സൃഷ്ടിക്കുമ്പോഴോ അതിന്റെ വിലാസം മാറുമ്പോഴോ, GEOCODING_API_KEY-ലെ കീ ഉപയോഗിച്ച് സെർവറിൽ ജിയോകോഡ് ചെയ്ത് കോർഡിനേറ്റുകൾ സേവ് ചെയ്യുക. Browse പേജിൽ, ഓരോ ലിസ്റ്റിംഗിനും ഒരു മാർക്കറുള്ള മാപ്പ് Leaflet ഉപയോഗിച്ച് കാണിക്കുക, മാർക്കറുകൾ തമ്മിൽ ഓവർലാപ്പ് ആകുമ്പോൾ ക്ലസ്റ്ററിംഗ് സഹിതം. ഒരു മാർക്കറിൽ ക്ലിക്ക് ചെയ്താൽ ശീർഷകം, വില, ഒരു ലിങ്ക് കാണിക്കണം. മാപ്പും ലിസ്റ്റും ഒരേ ഫിൽറ്ററുകൾ ഉപയോഗിക്കണം.

“അടുത്തുള്ളത്”:

സന്ദർശകന്റെ ലൊക്കേഷൻ ചോദിക്കുന്ന ഒരു “അടുത്തുള്ളത്” ബട്ടൺ ചേർക്കുക, 10 km-നുള്ളിലെ ലിസ്റ്റിംഗുകൾ ദൂരമനുസരിച്ച് ക്രമീകരിച്ച് കാണിക്കുക. ലൊക്കേഷൻ അനുമതി നിരസിച്ചാൽ, ഒരു നഗരം ടൈപ്പ് ചെയ്യാൻ അനുവദിക്കുക.

ഘട്ടം ഘട്ടമായി

1. മുകളിലെ പട്ടികയിൽ നിന്ന് മാപ്പ് തരം തിരഞ്ഞെടുക്കുക.
2. പ്രൊവൈഡർ അക്കൗണ്ടും ഒരു പ്രോജക്റ്റും സൃഷ്ടിക്കുക, നിങ്ങൾക്ക് വേണ്ട APIകൾ മാത്രം ഓൺ ചെയ്യുക.
3. കീകൾ സൃഷ്ടിക്കുക: നിങ്ങളുടെ ഡൊമെയ്‌നുകളിലേക്ക് പരിമിതപ്പെടുത്തിയ ബ്രൗസർ കീയും (നിർമ്മിക്കുമ്പോൾ പ്രിവ്യൂ ഡൊമെയ്‌നും ഉൾപ്പെടെ) ആവശ്യമെങ്കിൽ ജിയോകോഡിംഗിന് ഒരു സെർവർ കീയും.
4. കീകൾ രഹസ്യങ്ങളായി സൂക്ഷിച്ച് ആപ്പ് ബിൽഡറോട് ഉപയോഗിക്കാൻ ആവശ്യപ്പെടുക; ബ്രൗസർ കീ പേജിൽ എത്തുമെങ്കിലും പരിമിതപ്പെടുത്തിയിരിക്കണം.
5. എല്ലാ സ്ഥലത്തിനും കോർഡിനേറ്റുകൾ ഡാറ്റാബേസിൽ സൂക്ഷിക്കുക.
6. മാപ്പ് നിർമ്മിക്കുക: മാർക്കറുകൾ, പോപ്പ്അപ്പുകൾ, ക്ലസ്റ്ററിംഗ്, മാന്യമായ ഡിഫോൾട്ട് സൂം.
7. ഒരു ലിസ്റ്റുമായി ജോടിയാക്കുക. മാപ്പ് മാത്രം ഫോണുകളിലും സ്ക്രീൻ റീഡറുകൾക്കും ഉപയോഗിക്കാൻ പ്രയാസമാണ്. അതേ ഫലങ്ങൾ ലിസ്റ്റായും കാണിക്കുക.
8. പ്രൊവൈഡർ കൺസോളിൽ ഒരു ബജറ്റ് അലേർട്ട് സജ്ജീകരിക്കുക.
9. ലൈവ് ഡൊമെയ്‌നിൽ പ്രസിദ്ധീകരിച്ച് പരീക്ഷിക്കുക, റഫറർ നിയന്ത്രണങ്ങൾ പലപ്പോഴും ലൈവ് ഡൊമെയ്ൻ ചേർക്കുന്നതുവരെ മാപ്പ് തടയുന്നതിനാൽ.

സാധാരണ തെറ്റുകൾ

• പരിമിതപ്പെടുത്താത്ത കീകൾ. ആർക്കും അവ സ്വന്തം സൈറ്റിൽ വീണ്ടും ഉപയോഗിക്കാം.
• ഓരോ പേജ് കാഴ്ചയിലും ജിയോകോഡിംഗ്. വേഗത കുറയും, ചെലവും കൂടും; സേവ് ചെയ്യുമ്പോൾ ഒരിക്കൽ ജിയോകോഡ് ചെയ്യുക.
• ലൈവ് ഡൊമെയ്ൻ കീ നിയന്ത്രണങ്ങളിൽ മറക്കുന്നത്. പ്രിവ്യൂവിൽ പ്രവർത്തിക്കും, പ്രൊഡക്ഷനിൽ ശൂന്യമായ ചാരനിറ ബോക്സ്.
• മാപ്പ് മാത്രമുള്ള ലേഔട്ടുകൾ. ലിസ്റ്റ് ഇല്ലാത്ത പിന്നുകൾ ചെറിയ സ്ക്രീനുകളിൽ വേദനാജനകവും പ്രവേശനക്ഷമമല്ലാത്തതുമാണ്.
• ക്ലസ്റ്ററിംഗില്ലാതെ നൂറുകണക്കിന് മാർക്കറുകൾ. വായിക്കാൻ പറ്റാത്തതും മന്ദഗതിയിലുള്ളതും.
• അട്രിബ്യൂഷൻ ഇല്ലാതിരിക്കുന്നത്. മിക്ക മാപ്പ്, ടൈൽ പ്രൊവൈഡർമാരും ഇത് ആവശ്യപ്പെടുന്നു; ഒളിപ്പിക്കുന്നത് അവരുടെ നിബന്ധനകൾ ലംഘിക്കുന്നു.
• ഉപയോക്താവ് പേജ് ലോഡിൽ ലൊക്കേഷൻ ചോദിക്കുന്നത്. “അടുത്തുള്ളത്” ടാപ്പ് ചെയ്യുമ്പോൾ മാത്രം ചോദിക്കുക.

ചെക്ക്‌ലിസ്റ്റ്

• ജോലിക്ക് ശരിയായ മാപ്പ് തരം തിരഞ്ഞെടുത്തു
• ബ്രൗസർ കീ നിങ്ങളുടെ ഡൊമെയ്‌നുകളിലേക്കും ആവശ്യമായ APIകളിലേക്കും പരിമിതപ്പെടുത്തി
• സെർവർ-സൈഡ് കീകൾ രഹസ്യങ്ങളിൽ സൂക്ഷിച്ചു
• കോർഡിനേറ്റുകൾ ഡാറ്റാബേസിൽ, ഒരിക്കൽ ജിയോകോഡ് ചെയ്തത്
• ഫലങ്ങൾ ലിസ്റ്റായും കാണിക്കുന്നു
• നിരവധി മാർക്കറുകൾക്ക് ക്ലസ്റ്ററിംഗ്
• അട്രിബ്യൂഷൻ ദൃശ്യം
• പ്രൊവൈഡറിനൊപ്പം ബജറ്റ് അലേർട്ട് സജ്ജീകരിച്ചു
• പ്രസിദ്ധീകരിച്ച ഡൊമെയ്‌നിലും ഫോണിലും പരീക്ഷിച്ചു

Mythex-ൽ മാപ്പുകൾ ചേർക്കൽ

Mythex-ന് ബിൽറ്റ്-ഇൻ മാപ്സ് ഇന്റഗ്രേഷൻ ഇല്ല; നിങ്ങളുടെ സ്വന്തം പ്രൊവൈഡർ കീ കൊണ്ടുവരുന്നു, അത് ഒരു പ്രോജക്റ്റ് രഹസ്യമായി ചേർക്കുന്നു (അല്ലെങ്കിൽ ഏജന്റ് കാണിക്കുന്ന secrets കാർഡിൽ ഒട്ടിക്കുന്നു), കൂടാതെ Integrate any API വിവരിച്ചതുപോലെ ചാറ്റിൽ മാപ്പ് ആവശ്യപ്പെടുന്നു. കോർഡിനേറ്റുകൾ പ്രോജക്റ്റിന്റെ ഡാറ്റാബേസിൽ പോകുന്നു. കീയുടെ വെബ്സൈറ്റ് നിയന്ത്രണങ്ങളിൽ നിങ്ങളുടെ പ്രിവ്യൂ, പ്രസിദ്ധീകരിച്ച ഡൊമെയ്‌നുകൾ രണ്ടും ചേർക്കാൻ ഓർക്കുക; രഹസ്യങ്ങൾ മാറ്റിയ ശേഷം വീണ്ടും പ്രസിദ്ധീകരിക്കുക.

മാപ്പുകൾ സാധാരണയായി തിരയലിനും ലിസ്റ്റിംഗുകൾക്കും അടുത്താണ് വരുന്നത്: നിങ്ങളുടെ ആപ്പിൽ തിരയൽ എങ്ങനെ ചേർക്കാം, ഒരു ഡയറക്ടറി വെബ്സൈറ്റ് എങ്ങനെ നിർമ്മിക്കാം, ഒരു ചെറിയ ബിസിനസ് വെബ്സൈറ്റ് എങ്ങനെ നിർമ്മിക്കാം എന്നിവ കാണുക.

ചോദ്യങ്ങൾ