మీ యాప్‌కి మ్యాప్‌లు ఎలా జోడించాలి: ఎంబెడ్‌లు, ఇంటరాక్టివ్ మ్యాప్‌లు మరియు స్టోర్ లొకేటర్లు
మీ యాప్‌కి మ్యాప్ జోడించడానికి, ముందుగా మీకు స్టాటిక్ ఎంబెడ్ (ఒక పిన్‌తో ఒక లొకేషన్, "మా షాప్ కనుగొనండి" లాగా) కావాలా లేదా ఇంటరాక్టివ్ మ్యాప్ (మీ డేటా నుండి అనేక పిన్‌లు, ఫిల్టర్లు, క్లస్టరింగ్, "దగ్గరలో") కావాలా నిర్ణయించండి. ఒకే లొకేషన్ కోసం, ఎంబెడ్ మ్యాప్ వేగవంతమైనది, మరియు Google యొక్క Maps Embed APIతో ఉచితం. ఇంటరాక్టివ్ మ్యాప్‌ల కోసం, JavaScript మ్యాప్ లైబ్రరీ వాడండి — Google Maps JavaScript API, Mapbox GL JS, లేదా ఓపెన్-సోర్స్ Leaflet టైల్ ప్రొవైడర్‌తో — ప్రతి స్థలం యొక్క అక్షాంశం మరియు రేఖాంశాన్ని మీ డేటాబేస్‌లో నిల్వ చేయండి, మరియు మీ API కీని మీ స్వంత డొమైన్‌కి పరిమితం చేయండి. క్రింద వెండర్ వివరాలు ప్రతి ప్రొవైడర్ యొక్క సొంత డాక్యుమెంటేషన్ నుండి సెప్టెంబర్ 2026 నాటికి.
మీకు ఎలాంటి మ్యాప్ కావాలి
| అవసరం | ఉదాహరణ | సరళమైన విధానం |
|---|---|---|
| ఒక లొకేషన్ | కేఫ్ కోసం కాంటాక్ట్ పేజీ | ఎంబెడ్ మ్యాప్ |
| కొన్ని స్థిర లొకేషన్లు | మూడు బ్రాంచ్‌లు | ప్రతి బ్రాంచ్‌కి ఎంబెడ్, లేదా చిన్న ఇంటరాక్టివ్ మ్యాప్ |
| మీ డేటా నుండి అనేక లొకేషన్లు | డైరెక్టరీ, ప్రాపర్టీ లిస్టింగ్‌లు, ఈవెంట్‌లు | మీ డేటాబేస్ నుండి మార్కర్‌లతో ఇంటరాక్టివ్ మ్యాప్ |
| దూరం ఆధారంగా శోధన | "10 కి.మీ లోపు క్లినిక్‌లు" | నిల్వ చేసిన కోఆర్డినేట్‌లు ప్లస్ దూర క్వెరీ |
| రూట్‌లు లేదా దిశలు | డెలివరీ జోన్‌లు, "దిశలు పొందండి" | దిశల లింక్, లేదా రూటింగ్ API |
చాలా చిన్న వ్యాపార సైట్‌లకు మొదటి వరుస మాత్రమే అవసరం. డైరెక్టరీలు, మార్కెట్‌ప్లేస్‌లు మరియు లిస్టింగ్ సైట్‌లకు మూడవ మరియు నాల్గవ వరుసలు అవసరం.
మీ ఆప్షన్లు
| ఆప్షన్ | ఏంటి | ఖర్చు గమనికలు (సెప్టెంబర్ 2026 నాటికి) | దేనికి మంచిది |
|---|---|---|---|
| Google Maps Embed API | ఒక స్థలం లేదా శోధనను చూపే iframe | Google డాక్స్: అన్ని రిక్వెస్ట్‌లు అపరిమిత వినియోగంతో ఉచితం; API కీ అవసరం | పేజీలో ఒక లొకేషన్ |
| Google Maps JavaScript API | పూర్తి ఇంటరాక్టివ్ Google మ్యాప్ | Dynamic Maps: నెలకు 10,000 ఉచిత ఈవెంట్‌లు, తర్వాత ప్రతి 1,000 కి చెల్లింపు | తెలిసిన రూపం, Google యొక్క స్థల డేటా |
| Mapbox GL JS | కస్టమ్ స్టైల్స్‌తో ఇంటరాక్టివ్ వెక్టర్ మ్యాప్‌లు | Mapbox నెలకు 50,000 ఉచిత వెబ్ మ్యాప్ లోడ్‌లు జాబితా చేస్తుంది, తర్వాత ప్రతి 1,000 కి $5.00 | కస్టమ్-స్టైల్ మ్యాప్‌లు |
| Leaflet + టైల్స్ | ఓపెన్-సోర్స్ మ్యాప్ లైబ్రరీ; మీరు టైల్ సోర్స్ ఎంచుకుంటారు | Leaflet స్వయంగా ఉచితం; టైల్స్ ప్రొవైడర్‌పై ఆధారపడతాయి | తేలికపాటి మ్యాప్‌లు, లాక్-ఇన్ తప్పించుకోవడం |
Google Maps Platform
Google యొక్క గెట్టింగ్-స్టార్టెడ్ గైడ్ చెబుతుంది మీరు బిల్లింగ్ ఎనేబుల్ చేసిన Cloud ప్రాజెక్ట్ సృష్టించి, మీరు కోరుకునే APIలను ఎనేబుల్ చేయాలి. దాని పే-యాజ్-యు-గో ధర Dynamic Mapsతో సహా Essentials SKUలకు నెలకు 10,000 ఈవెంట్‌ల ఉచిత పరిమితి ఇస్తుంది, మరియు ఆ పైన ప్రతి 1,000 ఈవెంట్‌లకు (మొదటి వాల్యూమ్ టైర్‌లో) Dynamic Mapsకు $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 యొక్క పబ్లిక్ టైల్ సర్వర్‌లు ఆకర్షణీయంగా ఉంటాయి, కానీ టైల్ వినియోగ విధానం కనిపించే attribution కోరుతుంది, బల్క్ డౌన్‌లోడింగ్‌ను నిషేధిస్తుంది, సర్వీస్ హామీ ఇవ్వదు, మరియు వాణిజ్య సేవలను యాక్సెస్ ఉపసంహరించబడవచ్చని హెచ్చరిస్తుంది. నిజమైన ప్రొడక్ట్ కోసం, Leafletతో పనిచేసే వాణిజ్య లేదా సెల్ఫ్-హోస్టెడ్ టైల్ సోర్స్ వాడండి.
API కీలు: పబ్లిక్, కానీ పరిమితం
బ్రౌజర్‌లో వాడే మ్యాప్ కీలు మీ పేజీ తెరిచిన ఎవరికైనా కనిపిస్తాయి. ఇది ఆశించినదే, కానీ ఎవరైనా మీ కీని కాపీ చేసి మీ బిల్లుపై వినియోగాన్ని పెంచవచ్చని అర్థం. Google యొక్క భద్రతా మార్గదర్శకం మీ డొమైన్‌లను జాబితా చేసే వెబ్‌సైట్ (HTTP referrer) పరిమితులు, మరియు మీరు వాడే APIలకు మాత్రమే కీ పనిచేసేలా API పరిమితులు జోడించడం.
సర్వర్-వైపు సర్వీసుల కీలు — ఉదాహరణకు వేలాది చిరునామాలను జియోకోడ్ చేయడం — వేరువేరు కీలుగా ఉండాలి, సర్వర్ సీక్రెట్‌లలో ఉంచాలి, పేజీలో కాదు. అలాగే ప్రొవైడర్ కన్సోల్‌లో బడ్జెట్ అలర్ట్‌లు లేదా కోటాలు సెట్ చేయండి, తద్వారా ఒక తప్పు పెద్ద బిల్లుగా మారకుండా.
జియోకోడింగ్: చిరునామాలను ఒకసారి కోఆర్డినేట్‌లుగా మార్చండి
మ్యాప్‌లు అక్షాంశం మరియు రేఖాంశాన్ని ప్లాట్ చేస్తాయి, చిరునామాలను కాదు. చిరునామాను కోఆర్డినేట్‌లుగా మార్చడాన్ని జియోకోడింగ్ అంటారు, మరియు చాలా ప్రొవైడర్లు ప్రతి రిక్వెస్ట్‌కి ఛార్జ్ చేస్తారు. సమర్థవంతమైన నమూనా:
- లిస్టింగ్ సేవ్ అయినప్పుడు, దాని చిరునామాను సర్వర్‌లో జియోకోడ్ చేయండి.
- అక్షాంశం మరియు రేఖాంశాన్ని డేటాబేస్‌లో నిల్వ చేయండి.
- మ్యాప్ నిల్వ చేసిన కోఆర్డినేట్‌లు చదువుతుంది; పేజీ వీక్షణలో ఎప్పుడూ జియోకోడ్ చేయదు.
జియోకోడింగ్ ఫలితాలను ఎంతకాలం నిల్వ చేయవచ్చో ప్రతి ప్రొవైడర్ నిబంధనలు తనిఖీ చేయండి; అవి భిన్నంగా ఉంటాయి.
ఉదాహరణ ప్రాంప్ట్‌లు
ఒక ఎంబెడ్ మ్యాప్:
కాంటాక్ట్ పేజీలో, మా చిరునామా (12 High Street, Leeds) చూపే ఎంబెడ్ చేసిన Google మ్యాప్ జోడించు, GOOGLE_MAPS_EMBED_KEY లోని కీతో Maps Embed API వాడి. దాని కింద "దిశలు పొందండి" లింక్ జోడించు. ఫోన్‌లలో పూర్తి వెడల్పు చేయి, మరియు lazy-load చేయి.
లిస్టింగ్‌ల ఇంటరాక్టివ్ మ్యాప్:
listings టేబుల్‌కి అక్షాంశం మరియు రేఖాంశం జోడించు. లిస్టింగ్ సృష్టించినప్పుడు లేదా దాని చిరునామా మారినప్పుడు, GEOCODING_API_KEY లోని కీతో సర్వర్‌లో జియోకోడ్ చేసి కోఆర్డినేట్‌లు సేవ్ చేయి. Browse పేజీలో, ప్రతి లిస్టింగ్‌కి ఒక మార్కర్‌తో మ్యాప్ చూపించు, Leaflet వాడి, మార్కర్‌లు అతివ్యాప్తి చెందినప్పుడు క్లస్టరింగ్‌తో. మార్కర్‌పై క్లిక్ చేస్తే శీర్షిక, ధర మరియు లింక్ చూపించు. మ్యాప్ మరియు జాబితా ఒకే ఫిల్టర్లు వాడాలి.
"దగ్గరలో":
"దగ్గరలో" బటన్ జోడించు, అది సందర్శకుడి లొకేషన్ అడుగుతుంది మరియు 10 కి.మీ లోపు లిస్టింగ్‌లను దూరం ప్రకారం క్రమబద్ధీకరించి చూపిస్తుంది. వారు లొకేషన్ యాక్సెస్ తిరస్కరిస్తే, బదులుగా ఒక నగరం టైప్ చేయనివ్వు.
దశల వారీగా
- పైన ఉన్న పట్టిక నుండి మ్యాప్ రకం ఎంచుకోండి.
- ప్రొవైడర్ ఖాతా మరియు ప్రాజెక్ట్ సృష్టించండి, మరియు మీకు అవసరమైన APIలు మాత్రమే ఎనేబుల్ చేయండి.
- కీలు సృష్టించండి: మీ డొమైన్‌లకు పరిమితమైన బ్రౌజర్ కీ (నిర్మిస్తున్నప్పుడు మీ ప్రివ్యూ డొమైన్‌తో సహా) మరియు అవసరమైతే జియోకోడింగ్ కోసం సర్వర్ కీ.
- కీలను సీక్రెట్‌లుగా నిల్వ చేయండి మరియు మీ బిల్డర్‌ను వాటిని వాడమని అడగండి; బ్రౌజర్ కీ పేజీలోకి వెళ్లినా దాని పరిమితి ఇంకా ఉంటుంది.
- ప్రతి స్థలానికి కోఆర్డినేట్‌లు మీ డేటాబేస్‌లో నిల్వ చేయండి.
- మ్యాప్ నిర్మించండి: మార్కర్‌లు, పాప్‌అప్‌లు, క్లస్టరింగ్, మరియు సహేతుకమైన డిఫాల్ట్ జూమ్.
- జాబితాతో జత చేయండి. మ్యాప్ మాత్రమే ఫోన్‌లో మరియు స్క్రీన్ రీడర్‌లకు ఉపయోగించడం కష్టం. అవే ఫలితాలను జాబితాగా చూపించండి.
- ప్రొవైడర్ కన్సోల్‌లో బడ్జెట్ అలర్ట్ సెట్ చేయండి.
- లైవ్ డొమైన్‌లో పబ్లిష్ చేసి పరీక్షించండి, ఎందుకంటే లైవ్ డొమైన్ జోడించే వరకు రెఫరర్ పరిమితులు తరచుగా మ్యాప్‌ని బ్లాక్ చేస్తాయి.
సాధారణ తప్పులు
- పరిమితులు లేని కీలు. ఎవరైనా వాటిని వారి స్వంత సైట్‌లో మళ్లీ వాడవచ్చు.
- ప్రతి పేజీ వీక్షణలో జియోకోడింగ్. నెమ్మదిగా మరియు ఖరీదైనది; సేవ్‌పై ఒకసారి జియోకోడ్ చేయండి.
- కీ పరిమితుల్లో లైవ్ డొమైన్ మర్చిపోవడం. ప్రివ్యూలో పనిచేస్తుంది, ప్రొడక్షన్‌లో ఖాళీ బూడిద పెట్టె.
- మ్యాప్-మాత్రమే లేఅవుట్‌లు. జాబితా లేని పిన్‌లు చిన్న స్క్రీన్‌లలో బాధాకరం మరియు అందుబాటులో ఉండవు.
- క్లస్టరింగ్ లేకుండా వందల మార్కర్‌లు. చదవలేనివి మరియు నెమ్మదైనవి.
- attribution లేకపోవడం. చాలా మ్యాప్ మరియు టైల్ ప్రొవైడర్లకు ఇది అవసరం, దాన్ని దాచడం వారి నిబంధనలను ఉల్లంఘిస్తుంది.
- పేజీ లోడ్‌లో లొకేషన్ అడగడం. "దగ్గరలో" నొక్కినప్పుడు మాత్రమే అడగండి.
చెక్‌లిస్ట్
- పనికి సరైన మ్యాప్ రకం ఎంచుకోబడింది
- బ్రౌజర్ కీ మీ డొమైన్‌లు మరియు అవసరమైన APIలకు పరిమితం చేయబడింది
- సర్వర్-వైపు కీలు సీక్రెట్‌లలో ఉంచబడ్డాయి
- కోఆర్డినేట్‌లు డేటాబేస్‌లో నిల్వ చేయబడ్డాయి, ఒకసారి జియోకోడ్ చేయబడ్డాయి
- ఫలితాలు జాబితాగా కూడా చూపబడతాయి
- చాలా మార్కర్‌లకు క్లస్టరింగ్
- Attribution కనిపిస్తుంది
- ప్రొవైడర్‌తో బడ్జెట్ అలర్ట్ సెట్ చేయబడింది
- పబ్లిష్ చేసిన డొమైన్‌లో మరియు ఫోన్‌లో పరీక్షించబడింది
Mythex తో మ్యాప్‌లు జోడించడం
Mythex కి అంతర్నిర్మిత మ్యాప్స్ ఇంటిగ్రేషన్ లేదు; మీరు మీ స్వంత ప్రొవైడర్ కీ తీసుకువస్తారు, దాన్ని ప్రాజెక్ట్ సీక్రెట్‌గా జోడిస్తారు (లేదా ఏజెంట్ సీక్రెట్స్ కార్డ్ చూపినప్పుడు అతికిస్తారు), మరియు Integrate any API లో వివరించినట్లు చాట్‌లో మ్యాప్ అడుగుతారు. కోఆర్డినేట్‌లు ప్రాజెక్ట్ డేటాబేస్లోకి వెళ్తాయి. కీ యొక్క వెబ్‌సైట్ పరిమితులకు మీ ప్రివ్యూ మరియు పబ్లిష్ చేసిన డొమైన్‌లు రెండింటినీ జోడించడం గుర్తుంచుకోండి, మరియు సీక్రెట్‌లు మార్చిన తర్వాత మళ్లీ పబ్లిష్ చేయండి.
మ్యాప్‌లు సాధారణంగా శోధన మరియు లిస్టింగ్‌ల పక్కన ఉంటాయి: మీ యాప్‌కి శోధన ఎలా జోడించాలి, డైరెక్టరీ వెబ్‌సైట్ ఎలా నిర్మించాలి మరియు చిన్న వ్యాపార వెబ్‌సైట్ ఎలా నిర్మించాలి చూడండి.
ప్రశ్నలు
వెబ్‌సైట్‌కి మ్యాప్ జోడించడానికి అత్యంత సులభమైన మార్గం ఏది?
ఒక పిన్‌తో ఒకే మ్యాప్‌ని ఎంబెడ్ చేయండి, ఉదాహరణకు iframe లో Google యొక్క Maps Embed APIని వాడి. Maps Embed రిక్వెస్ట్‌లు అపరిమిత వినియోగంతో ఉచితమని Google డాక్యుమెంటేషన్ చెబుతుంది, అయినా మీకు API కీ అవసరం.
యాప్‌లో Google Maps ఉచితంగా వాడవచ్చా?
కొంతవరకు. సెప్టెంబర్ 2026 నాటికి, Google యొక్క పే-యాజ్-యు-గో ధర Dynamic Mapsతో సహా ప్రతి Essentials SKU కి నెలకు 10,000 ఉచిత ఈవెంట్‌లు ఇస్తుంది, మరియు Maps Embed అపరిమితంగా మరియు ఉచితంగా ఉంటుంది. ప్రారంభించడానికి ఇప్పటికీ బిల్లింగ్ ఎనేబుల్ చేసిన Google Cloud ప్రాజెక్ట్ అవసరం.
నా Google Maps API కీని బ్రౌజర్‌లో పెట్టడం సురక్షితమా?
బ్రౌజర్ మ్యాప్‌ల కీలు ఎవరికైనా కనిపిస్తాయి, కాబట్టి Google వాటిని మీ వెబ్‌సైట్ చిరునామాలకు మరియు మీరు వాడే APIలకు మాత్రమే పరిమితం చేయమని సిఫార్సు చేస్తుంది. జియోకోడింగ్ లాంటి సర్వర్-వైపు సర్వీసుల కీలు సర్వర్‌లోనే ఉండాలి.
నేను OpenStreetMap ని ఉచితంగా వాడవచ్చా?
OpenStreetMap డేటా attributionతో ఉచితంగా వాడవచ్చు, కానీ దాని పబ్లిక్ టైల్ సర్వర్‌లు విరాళాలతో నడుస్తాయి మరియు సర్వీస్ హామీ లేదు, మరియు విధానం వాణిజ్య వినియోగదారులను యాక్సెస్ ఉపసంహరించబడవచ్చని హెచ్చరిస్తుంది. ప్రొడక్షన్ యాప్ కోసం టైల్ ప్రొవైడర్ వాడండి లేదా మీరే హోస్ట్ చేయండి.