உங்கள் ஆப்பில் வரைபடங்களைச் சேர்ப்பது எப்படி: உட்பொதிப்புகள், ஊடாடும் வரைபடங்கள் மற்றும் கடை இருப்பிடங்கள்

ஆப்பில் வரைபடம் சேர்க்க, முதலில் உங்களுக்கு நிலையான உட்பொதிப்பு (ஒரே இடத்தில் ஒரு முள், "எங்கள் கடையைக் கண்டறியுங்கள்" போல) வேண்டுமா அல்லது ஊடாடும் வரைபடம் (உங்கள் டேட்டாவிலிருந்து பல முள்கள், வடிகட்டிகள், குழுவாக்கல், "அருகில்" தேடல்) வேண்டுமா என்று முடிவு செய்யுங்கள். ஒரே இடத்துக்கு, உட்பொதிக்கப்பட்ட வரைபடம் விரைவானது, Google-இன் Maps Embed API-உடன் இலவசம். ஊடாடும் வரைபடங்களுக்கு, ஒரு JavaScript வரைபட நூலகத்தைப் பயன்படுத்துங்கள் — Google Maps JavaScript API, Mapbox GL JS, அல்லது திறந்த மூல Leaflet ஒரு tile வழங்குநருடன் — ஒவ்வொரு இடத்தின் அகலாங்கு மற்றும் நெட்டாங்கையும் உங்கள் டேட்டாபேஸில் சேமித்து, உங்கள் API key-ஐ உங்கள் சொந்த domain-க்கு மட்டும் கட்டுப்படுத்துங்கள். விற்பனையாளர் விவரங்கள் கீழே, ஒவ்வொரு வழங்குநரின் சொந்த ஆவணங்களிலிருந்து, செப்டம்பர் 2026 நிலவரப்படி.

உங்களுக்கு எந்த வகை வரைபடம் தேவை?

பெரும்பாலான சிறு வணிகத் தளங்களுக்கு முதல் வரிசை மட்டுமே தேவை. அடைவுகள், சந்தைகள் மற்றும் பட்டியல் தளங்களுக்கு மூன்றாவதும் நான்காவதும் தேவை.

உங்கள் விருப்பங்கள்

Google Maps Platform

Google-இன் தொடக்க வழிகாட்டி, நீங்கள் பில்லிங் இயக்கப்பட்ட Cloud project உருவாக்கி, விரும்பும் 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. அதற்கு எங்காவது இருந்து வரைபட tiles (வரைபடத்தின் படங்கள்) தேவை. OpenStreetMap-இன் பொது tile servers கவர்ச்சியானவை, ஆனால் tile பயன்பாட்டுக் கொள்கை தெரியும் பண்புக்கூறைக் கோருகிறது, மொத்தமாகப் பதிவிறக்குவதைத் தடுக்கிறது, சேவை உத்தரவாதம் தருவதில்லை, மேலும் வணிகச் சேவைகளுக்கு அணுகல் திரும்பப் பெறப்படலாம் என்று எச்சரிக்கிறது. ஒரு உண்மையான தயாரிப்புக்கு, Leaflet-உடன் வேலை செய்யும் வணிக அல்லது நீங்களே host செய்யும் tile மூலத்தைப் பயன்படுத்துங்கள்.

API keys: பொதுவானவை, ஆனால் கட்டுப்படுத்தப்பட்டவை

உலாவியில் பயன்படுத்தப்படும் வரைபட keys, உங்கள் பக்கத்தைத் திறக்கும் யாருக்கும் தெரியும். அது எதிர்பார்க்கப்படுவதுதான், ஆனால் யாராவது உங்கள் key-ஐ நகலெடுத்து, உங்கள் பில்லில் பயன்பாட்டை ஏற்றலாம் என்று பொருள். Google-இன் பாதுகாப்பு வழிகாட்டுதல்: வலைத்தள (HTTP referrer) கட்டுப்பாடுகளை உங்கள் domains-ஐப் பட்டியலிட்டுச் சேர்க்கவும், மற்றும் API கட்டுப்பாடுகளை key நீங்கள் பயன்படுத்தும் APIs-க்கு மட்டும் வேலை செய்யுமாறு சேர்க்கவும்.

Server-side சேவைகளுக்கான keys — எடுத்துக்காட்டாக ஆயிரக்கணக்கான முகவரிகளை geocode செய்வது — பக்கத்தில் இல்லாமல் server-side secrets-இல் வைக்கப்படும் தனி keys ஆக இருக்க வேண்டும். வழங்குநரின் console-இல் பட்ஜெட் எச்சரிக்கைகள் அல்லது ஒதுக்கீடுகளையும் அமையுங்கள், ஒரு தவறு பெரிய பில்லாக மாறாமல் இருக்க.

Geocoding: முகவரிகளை ஒருமுறை ஆயங்களாக மாற்றுங்கள்

வரைபடங்கள் முகவரிகளை அல்ல, அகலாங்கு மற்றும் நெட்டாங்கைக் குறிக்கின்றன. முகவரியை ஆயங்களாக மாற்றுவது geocoding எனப்படும், பெரும்பாலான வழங்குநர்கள் ஒவ்வொரு கோரிக்கைக்கும் கட்டணம் வசூலிக்கின்றனர். திறமையான முறை:

1. ஒரு பட்டியல் சேமிக்கப்படும்போது, server-இல் அதன் முகவரியை geocode செய்யுங்கள்.
2. அகலாங்கு மற்றும் நெட்டாங்கை டேட்டாபேஸில் சேமியுங்கள்.
3. வரைபடம் சேமிக்கப்பட்ட ஆயங்களைப் படிக்கும்; பக்கப் பார்வையின்போது ஒருபோதும் geocode செய்யாது.

Geocoding முடிவுகளை எவ்வளவு காலம் சேமிக்கலாம் என்பதற்கு ஒவ்வொரு வழங்குநரின் விதிமுறைகளையும் பாருங்கள்; அவை வேறுபடுகின்றன.

எடுத்துக்காட்டு prompts

ஒரு ஒற்றை உட்பொதிக்கப்பட்ட வரைபடம்:

தொடர்புப் பக்கத்தில், எங்கள் முகவரியைக் (12 High Street, Leeds) காட்டும் உட்பொதிக்கப்பட்ட Google வரைபடத்தை Maps Embed API மூலம் சேர்க்கவும், key GOOGLE_MAPS_EMBED_KEY-இல். அதன் கீழ் "திசைகளைப் பெறு" இணைப்பைச் சேர்க்கவும். கைபேசிகளில் முழு அகலமாக்கி, lazy-load செய்யவும்.

பட்டியல்களின் ஊடாடும் வரைபடம்:

பட்டியல்கள் அட்டவணையில் அகலாங்கு மற்றும் நெட்டாங்கைச் சேர்க்கவும். ஒரு பட்டியல் உருவாக்கப்படும்போது அல்லது அதன் முகவரி மாறும்போது, GEOCODING_API_KEY-இல் உள்ள key-ஐப் பயன்படுத்தி server-இல் அதை geocode செய்து ஆயங்களைச் சேமியுங்கள். Browse பக்கத்தில், Leaflet பயன்படுத்தி ஒவ்வொரு பட்டியலுக்கும் ஒரு முள்ளுடன் வரைபடம் காட்டவும், முள்கள் ஒன்றோடொன்று சேரும்போது குழுவாக்கவும். ஒரு முள்ளைக் கிளிக் செய்தால் தலைப்பு, விலை மற்றும் ஒரு இணைப்பு காட்டட்டும். வரைபடமும் பட்டியலும் ஒரே வடிகட்டிகளைப் பயன்படுத்த வேண்டும்.

"அருகில்":

பார்வையாளரின் இருப்பிடத்தைக் கேட்கும் "அருகில்" பொத்தானைச் சேர்க்கவும், 10 கிமீக்குள் உள்ள பட்டியல்களை தூரத்தின்படி வரிசைப்படுத்திக் காட்டவும். இருப்பிட அனுமதியை அவர்கள் மறுத்தால், ஒரு நகரத்தைத் தட்டச்சு செய்ய அனுமதியுங்கள்.

படிப்படியாக

1. வரைபட வகையைத் தேர்ந்தெடுங்கள் மேலே உள்ள அட்டவணையிலிருந்து.
2. வழங்குநர் கணக்கையும் project-ஐயும் உருவாக்குங்கள், தேவையான APIs-ஐ மட்டும் இயக்குங்கள்.
3. Keys உருவாக்குங்கள்: உங்கள் domains-க்கு (உருவாக்கும்போது preview domain உட்பட) கட்டுப்படுத்தப்பட்ட ஒரு browser key, மற்றும் தேவைப்பட்டால் geocoding-க்கு ஒரு server key.
4. Keys-ஐ secrets ஆக வையுங்கள், உங்கள் builder அவற்றைப் பயன்படுத்தும்படி கேளுங்கள்; browser key பக்கத்தில் முடிந்தாலும் கட்டுப்படுத்தப்பட்டதாகவே இருக்கட்டும்.
5. ஒவ்வொரு இடத்துக்கும் ஆயங்களைச் டேட்டாபேஸில் சேமியுங்கள்.
6. வரைபடத்தை உருவாக்குங்கள்: முள்கள், popups, குழுவாக்கல், நியாயமான இயல்புநிலை zoom.
7. ஒரு பட்டியலுடன் இணையுங்கள். வரைபடம் மட்டும் கைபேசியிலும் திரை வாசிப்பான்களுக்கும் பயன்படுத்த கடினம். அதே முடிவுகளைப் பட்டியலாகக் காட்டுங்கள்.
8. வழங்குநரின் console-இல் பட்ஜெட் எச்சரிக்கையை அமையுங்கள்.
9. நேரடி domain-இல் வெளியிட்டு சோதியுங்கள், ஏனெனில் referrer கட்டுப்பாடுகள் நேரடி domain சேர்க்கும் வரை வரைபடத்தைத் தடுக்கும்.

பொதுவான தவறுகள்

• கட்டுப்படுத்தப்படாத keys. யாரும் அவற்றை தங்கள் சொந்தத் தளத்தில் மீண்டும் பயன்படுத்தலாம்.
• ஒவ்வொரு பக்கப் பார்வையிலும் geocoding. மெதுவானது, செலவு மிக்கது; சேமிக்கும்போது ஒருமுறை geocode செய்யுங்கள்.
• கட்டுப்பாட்டில் நேரடி domain-ஐ மறப்பது. Preview-இல் வேலை செய்யும், உற்பத்தியில் வெற்றுச் சாம்பல் பெட்டி.
• வரைபடம்-மட்டும் அமைப்புகள். பட்டியல் இல்லாத முள்கள் சிறிய திரைகளில் சிரமம், திரை வாசிப்பான்களுக்கு அணுக முடியாதவை.
• குழுவாக்கல் இல்லாமல் நூற்றுக்கணக்கான முள்கள். படிக்க முடியாதது, மெதுவானது.
• பண்புக்கூறு இல்லாமை. பெரும்பாலான வரைபட மற்றும் tile வழங்குநர்களுக்கு அது தேவை; அதை மறைப்பது அவர்களின் விதிமுறைகளை மீறுவது.
• பக்கம் ஏற்றும்போதே இருப்பிடம் கேட்பது. பயனர் "அருகில்" என்பதைத் தட்டும்போதுதான் கேளுங்கள்.

சரிபார்ப்புப் பட்டியல்

• வேலைக்குச் சரியான வரைபட வகை தேர்வு செய்யப்பட்டுள்ளது
• உலாவி key உங்கள் domains-க்கும் தேவையான APIs-க்கும் கட்டுப்படுத்தப்பட்டுள்ளது
• Server-side keys secrets-இல் வைக்கப்பட்டுள்ளன
• ஆயங்கள் டேட்டாபேஸில் சேமிக்கப்பட்டுள்ளன, ஒருமுறை geocode செய்யப்பட்டன
• முடிவுகள் பட்டியலாகவும் காட்டப்படுகின்றன
• பல முள்களுக்கு குழுவாக்கல் உள்ளது
• பண்புக்கூறு தெரிகிறது
• வழங்குநருடன் பட்ஜெட் எச்சரிக்கை அமைக்கப்பட்டுள்ளது
• வெளியிட்ட domain-இலும் கைபேசியிலும் சோதிக்கப்பட்டுள்ளது

Mythex-இல் வரைபடங்கள் சேர்ப்பது

Mythex-இல் உள்ளமைந்த வரைபட ஒருங்கிணைப்பு இல்லை; உங்கள் சொந்த வழங்குநர் key-ஐக் கொண்டு வருகிறீர்கள், அதை project secret ஆக வையுங்கள் (அல்லது agent ஒரு secrets அட்டையைக் காட்டும்போது ஒட்டுங்கள்), மற்றும் வரைபடத்தை chat-இல் கேளுங்கள் — எந்த API-ஐயும் ஒருங்கிணைத்தல் என்பதில் விவரிக்கப்பட்டுள்ளபடி. ஆயங்கள் project-இன் டேட்டாபேஸில் செல்லும். உங்கள் preview மற்றும் வெளியிட்ட domains இரண்டையும் key-இன் வலைத்தளக் கட்டுப்பாடுகளில் சேர்க்க மறக்காதீர்கள், மற்றும் secrets-ஐ மாற்றிய பிறகு மீண்டும் publish செய்யுங்கள்.

வரைபடங்கள் பொதுவாக தேடல் மற்றும் பட்டியல்களுடன் இருக்கும்: ஆப்பில் தேடலைச் சேர்ப்பது எப்படி, அடைவு வலைத்தளம் உருவாக்குவது எப்படி மற்றும் சிறு வணிக வலைத்தளம் உருவாக்குவது எப்படி பாருங்கள்.

கேள்விகள்