તમારી એપમાં મેપ કેવી રીતે ઉમેરવા: એમ્બેડ, ઇન્ટરેક્ટિવ મેપ અને સ્ટોર લોકેટર

તમારી એપમાં મેપ ઉમેરવા માટે, પહેલા નક્કી કરો કે તમને સ્થિર એમ્બેડ (પિન સાથેનું એક સ્થાન, જેમ કે "અમારી દુકાન શોધો") જોઈએ છે કે ઇન્ટરેક્ટિવ મેપ (તમારા ડેટાના ઘણા પિન, ફિલ્ટર, ક્લસ્ટરિંગ, "નજીકમાં"). એક સ્થાન માટે, એમ્બેડ કરેલો મેપ સૌથી ઝડપી છે અને Google ના Maps Embed API સાથે મફત છે. ઇન્ટરેક્ટિવ મેપ માટે JavaScript મેપ લાઇબ્રેરી વાપરો — Google Maps JavaScript API, Mapbox GL JS, અથવા ઓપન-સોર્સ Leaflet ટાઇલ પ્રોવાઇડર સાથે — દરેક જગ્યાનું અક્ષાંશ અને રેખાંશ તમારા ડેટાબેઝમાં સંગ્રહો, અને તમારી API કીને તમારા પોતાના ડોમેન સુધી મર્યાદિત કરો. નીચેની વિક્રેતા વિગતો સપ્ટેમ્બર 2026 મુજબ દરેક પ્રોવાઇડરના પોતાના દસ્તાવેજોમાંથી છે.

તમને કયા પ્રકારનો મેપ જોઈએ?

મોટાભાગની નાની બિઝનેસ સાઇટને ફક્ત પહેલી હરોળની જરૂર હોય છે. ડિરેક્ટરી, માર્કેટપ્લેસ અને લિસ્ટિંગ સાઇટને ત્રીજી અને ચોથી હરોળની જરૂર હોય છે.

તમારા વિકલ્પો

Google Maps Platform

Google ની શરૂઆત માર્ગદર્શિકા કહે છે કે તમારે બિલિંગ ચાલુ હોય તેવો Cloud પ્રોજેક્ટ બનાવવો અને તમને જોઈતા APIs ચાલુ કરવા પડે. તેના pay-as-you-go ભાવમાં Dynamic Maps સહિત Essentials SKU ને મહિને 10,000 ઇવેન્ટની મફત મર્યાદા મળે છે, અને તે મર્યાદા ઉપર Dynamic Maps ને પહેલા વોલ્યુમ સ્તરે પ્રતિ 1,000 ઇવેન્ટ $7.00 યાદીબદ્ધ છે. Maps Embed SKU અમર્યાદિત અને મફત યાદીબદ્ધ છે. Google મહિનાવારી સબ્સ્ક્રિપ્શન યોજનાઓ પણ વેચે છે. વર્તમાન આંકડા માટે Google Maps Platform pricing તપાસો.

Mapbox

Mapbox ના પ્રાઇસિંગ પેજ પર વેબ પર Mapbox GL JS માટે મહિને 50,000 મફત મેપ લોડ, પછી દર 1,000 લોડ દીઠ $5.00 યાદીબદ્ધ છે. જુઓ Mapbox pricing.

Leaflet અને OpenStreetMap

Leaflet પોતાને મોબાઇલ-ફ્રેન્ડલી ઇન્ટરેક્ટિવ મેપ માટેની ઓપન-સોર્સ JavaScript લાઇબ્રેરી તરીકે વર્ણવે છે, લગભગ 42 KB JavaScript. તેને ક્યાંકથી મેપ ટાઇલ્સ (મેપની છબીઓ) જોઈએ. OpenStreetMap ના જાહેર ટાઇલ સર્વર લલચાવનારા છે, પણ ટાઇલ વપરાશ નીતિ દૃશ્યમાન એટ્રિબ્યુશન માગે છે, મોટા પાયે ડાઉનલોડ પ્રતિબંધિત કરે છે, કોઈ સેવા ગેરંટી આપતી નથી, અને વ્યાપારી સેવાઓને ચેતવે છે કે ઍક્સેસ પાછી ખેંચાઈ શકે. વાસ્તવિક પ્રોડક્ટ માટે, Leaflet સાથે કામ કરતો વ્યાપારી અથવા સેલ્ફ-હોસ્ટેડ ટાઇલ સ્રોત વાપરો.

API કી: જાહેર, પણ મર્યાદિત

બ્રાઉઝરમાં વપરાતી મેપ કી તમારું પેજ ખોલનાર કોઈ પણ જોઈ શકે છે. તે અપેક્ષિત છે, પણ તેનો અર્થ એ કે કોઈ તમારી કી કૉપી કરીને તમારા બિલ પર વપરાશ વધારી શકે. Google ની સુરક્ષા માર્ગદર્શિકા છે કે વેબસાઇટ (HTTP referrer) મર્યાદાઓ ઉમેરો જે તમારા ડોમેન યાદી કરે, અને API મર્યાદાઓ જેથી કી ફક્ત તમે વાપરો છો તે APIs માટે કામ કરે.

સર્વર-સાઇડ સેવાઓ માટેની કી — દાખલા તરીકે હજારો સરનામાંનું જિયોકોડિંગ — અલગ કી હોવી જોઈએ, સર્વર-સાઇડ સિક્રેટમાં રાખેલી, પેજમાં નહીં. પ્રોવાઇડરના કન્સોલમાં બજેટ ચેતવણીઓ અથવા ક્વોટા પણ સેટ કરો, જેથી ભૂલ મોટા બિલમાં ન ફેરવાય.

જિયોકોડિંગ: સરનામાંને એક વાર કોઓર્ડિનેટમાં ફેરવો

મેપ અક્ષાંશ અને રેખાંશ પ્લોટ કરે છે, સરનામાં નહીં. સરનામાને કોઓર્ડિનેટમાં ફેરવવાને જિયોકોડિંગ કહેવાય છે, અને મોટાભાગના પ્રોવાઇડર તેના માટે રિક્વેસ્ટ દીઠ ચાર્જ કરે છે. કાર્યક્ષમ પેટર્ન:

1. જ્યારે લિસ્ટિંગ સેવ થાય, ત્યારે તેનું સરનામું સર્વર પર જિયોકોડ કરો.
2. અક્ષાંશ અને રેખાંશ ડેટાબેઝમાં સંગ્રહો.
3. મેપ સંગ્રહાયેલા કોઓર્ડિનેટ વાંચે; પેજ વ્યૂ પર ક્યારેય જિયોકોડ ન કરે.

જિયોકોડિંગના પરિણામો કેટલો સમય સંગ્રહી શકાય તે અંગે દરેક પ્રોવાઇડરની શરતો તપાસો; તે જુદી હોય છે.

ઉદાહરણ પ્રોમ્પ્ટ

એક એમ્બેડ કરેલો મેપ:

Contact પેજ પર, GOOGLE_MAPS_EMBED_KEY માં કી સાથે Maps Embed API વાપરીને અમારું સરનામું (12 High Street, Leeds) બતાવતો એમ્બેડ કરેલો Google મેપ ઉમેરો. તેની નીચે "Get directions" લિંક ઉમેરો. ફોન પર તેને સંપૂર્ણ પહોળાઈનો બનાવો અને lazy-load કરો.

લિસ્ટિંગનો ઇન્ટરેક્ટિવ મેપ:

લિસ્ટિંગ ટેબલમાં અક્ષાંશ અને રેખાંશ ઉમેરો. જ્યારે લિસ્ટિંગ બને અથવા તેનું સરનામું બદલાય, ત્યારે GEOCODING_API_KEY માંની કી સાથે સર્વર પર તેને જિયોકોડ કરો અને કોઓર્ડિનેટ સેવ કરો. Browse પેજ પર, Leaflet વાપરીને દરેક લિસ્ટિંગ માટે એક માર્કર સાથે મેપ બતાવો, માર્કર ઓવરલેપ થાય ત્યારે ક્લસ્ટરિંગ સાથે. માર્કર પર ક્લિક કરતા શીર્ષક, કિંમત અને લિંક બતાવો. મેપ અને યાદી એક જ ફિલ્ટર વાપરે.

"નજીકમાં":

"Near me" બટન ઉમેરો જે વપરાશકર્તાનું સ્થાન માગે અને 10 km ની અંદરના લિસ્ટિંગ અંતર પ્રમાણે ક્રમમાં બતાવે. જો તેઓ સ્થાન ઍક્સેસ ના પાડે, તો તેમને તેના બદલે શહેર લખવા દો.

સ્ટેપ બાય સ્ટેપ

1. ટોચના ટેબલ પરથી મેપનો પ્રકાર પસંદ કરો.
2. પ્રોવાઇડર એકાઉન્ટ અને પ્રોજેક્ટ બનાવો, અને ફક્ત જરૂરી APIs ચાલુ કરો.
3. કી બનાવો: તમારા ડોમેન (બનાવતી વખતે પ્રીવ્યૂ ડોમેન સહિત) સુધી મર્યાદિત બ્રાઉઝર કી, અને જરૂર હોય તો જિયોકોડિંગ માટે સર્વર કી.
4. કીને સિક્રેટ તરીકે સંગ્રહો અને તમારા બિલ્ડરને તેનો ઉપયોગ કરવા કહો; બ્રાઉઝર કી પેજમાં જાય તો પણ તે મર્યાદિત રહે છે.
5. દરેક સ્થળ માટે કોઓર્ડિનેટ સંગ્રહો તમારા ડેટાબેઝમાં.
6. મેપ બનાવો: માર્કર, પોપઅપ, ક્લસ્ટરિંગ, અને યોગ્ય ડિફોલ્ટ ઝૂમ.
7. યાદી સાથે જોડો. એકલો મેપ ફોન પર અને સ્ક્રીન રીડર માટે વાપરવો મુશ્કેલ છે. એ જ પરિણામો યાદી તરીકે બતાવો.
8. પ્રોવાઇડર કન્સોલમાં બજેટ ચેતવણી સેટ કરો.
9. લાઇવ ડોમેન પર પ્રકાશિત કરો અને પરીક્ષણ કરો, કારણ કે લાઇવ ડોમેન ઉમેરાય ત્યાં સુધી રેફરર મર્યાદાઓ ઘણીવાર મેપને અવરોધે છે.

સામાન્ય ભૂલો

• અમર્યાદિત કી. કોઈ પણ તેમને પોતાની સાઇટ પર ફરી વાપરી શકે.
• દરેક પેજ વ્યૂ પર જિયોકોડિંગ. ધીમું અને મોંઘું; સેવ વખતે એક વાર જિયોકોડ કરો.
• કી મર્યાદામાં લાઇવ ડોમેન ભૂલવું. પ્રીવ્યૂમાં ચાલે, પ્રોડક્શનમાં ખાલી ગ્રે બૉક્સ.
• ફક્ત મેપવાળા લેઆઉટ. યાદી વગરના પિન નાની સ્ક્રીન પર અને સુલભતામાં તકલીફદાયક છે.
• ક્લસ્ટરિંગ વગર સેંકડો માર્કર. વાંચી ન શકાય તેવું અને ધીમું.
• એટ્રિબ્યુશન ગુમ. મોટાભાગના મેપ અને ટાઇલ પ્રોવાઇડર તેની માગ કરે છે, અને તેને છુપાવવું તેમની શરતોનો ભંગ છે.
• પેજ લોડ પર સ્થાન માગવું. ફક્ત ત્યારે જ પૂછો જ્યારે વપરાશકર્તા "Near me" ટૅપ કરે.

ચેકલિસ્ટ

• કામ માટે યોગ્ય મેપ પ્રકાર પસંદ કર્યો છે
• બ્રાઉઝર કી તમારા ડોમેન અને જરૂરી APIs સુધી મર્યાદિત છે
• સર્વર-સાઇડ કી સિક્રેટમાં રાખેલી છે
• કોઓર્ડિનેટ ડેટાબેઝમાં સંગ્રહાયેલા છે, એક વાર જિયોકોડ થયેલા
• પરિણામો યાદી તરીકે પણ બતાવાય છે
• ઘણા માર્કર માટે ક્લસ્ટરિંગ છે
• એટ્રિબ્યુશન દૃશ્યમાન છે
• પ્રોવાઇડર સાથે બજેટ ચેતવણી સેટ છે
• પબ્લિશ થયેલા ડોમેન અને ફોન પર પરીક્ષણ થયું

Mythex સાથે મેપ ઉમેરવો

Mythex માં બિલ્ટ-ઇન મેપ ઇન્ટિગ્રેશન નથી; તમે તમારી પોતાની પ્રોવાઇડર કી લાવો છો, તેને પ્રોજેક્ટ સિક્રેટ તરીકે ઉમેરો (અથવા એજન્ટ સિક્રેટ કાર્ડ બતાવે ત્યારે પેસ્ટ કરો), અને કોઈ પણ API ઇન્ટિગ્રેટ કરો માં વર્ણવ્યા પ્રમાણે ચેટમાં મેપ માગો. કોઓર્ડિનેટ પ્રોજેક્ટના ડેટાબેઝ માં જાય છે. યાદ રાખો કે કીની વેબસાઇટ મર્યાદામાં તમારા પ્રીવ્યૂ અને પબ્લિશ થયેલા બંને ડોમેન ઉમેરો, અને સિક્રેટ બદલ્યા પછી ફરી પબ્લિશ કરો.

મેપ સામાન્ય રીતે શોધ અને લિસ્ટિંગની બાજુમાં હોય છે: તમારી એપમાં શોધ કેવી રીતે ઉમેરવી, ડિરેક્ટરી વેબસાઇટ કેવી રીતે બનાવવી અને નાની બિઝનેસ વેબસાઇટ કેવી રીતે બનાવવી જુઓ.

પ્રશ્નો