எந்தத் தளத்திலும் வரைபட விட்ஜெட்டை எப்படி இணைப்பது

உருவாக்கியில் தொடங்குங்கள் (உண்மையான வேலை இதுதான்)

எல்லாம் வரைபட உட்பொதிப்பு உருவாக்கியில் தொடங்குகிறது. புவிக்குறியீடு ஒரே ஒரு முறை, அங்கேயே நடக்கிறது — நீங்கள் நகலெடுக்கும் குறியீடு நிலையான ஆயத்தொலைவுகளைச் சுமந்து செல்கிறது. எனவே புவிக்குறியீட்டுச் சேவை செயலிழந்தாலும், “முகவரி இயல்பாக்கம்” நடந்தாலும், பிறகு உங்கள் பின்னை நகர்த்த முடியாது. முகவரியைத் தட்டச்சு செய்யுங்கள், பின் இறங்குவதைப் பாருங்கள், நகலெடுப்பதற்கு முன் அதை உங்கள் உண்மையான நுழைவாயிலுக்கு இழுத்து வையுங்கள்: அந்தப் பத்து வினாடி இழுப்புதான் “சரியான தெரு” என்பதற்கும் “சரியான கதவு” என்பதற்கும் உள்ள வித்தியாசம்.

உங்களுடையதை உருவாக்கும் முன் முடிக்கப்பட்ட பல கிளை அமைப்பைப் பார்க்க வேண்டுமா? உருவாக்கியின் டெமோவைத் திறங்கள் — மூன்று கிளைகள் கொண்ட ஒரு மாதிரி நிறுவனம் ஏற்றப்படும்: முகவரிகள், நிறமிட்ட எண்ணிடப்பட்ட பின்கள், இருப்பிடங்கள் பேனல் — அனைத்தும் முன்னோட்டத்தில் நேரடியாக, சோதித்துப் பார்க்கத் தயாராக.

WordPress: பிளகின் ஷார்ட்கோடா, நேரடி iframe-ஆ?

இரண்டு வழிகளும் ஒரே விட்ஜெட்டிலேயே முடிகின்றன — உங்கள் விருப்பப்படி தேர்வு செய்யுங்கள்.

பிளகின் வழி (பரிந்துரைக்கப்படுகிறது): whatismylocation-widget.zip பதிவிறக்குங்கள் → wp-admin ▸ Plugins ▸ Add New ▸ Upload Plugin → Activate. பிறகு ஒரு Shortcode பிளாக்கைச் சேர்க்கவும்:

[whatismylocation_map lat="48.858400" lng="2.294500" name="Acme SARL" address="Champ de Mars, Paris"]

பண்புக்கூறுகள் உருவாக்கியின் விருப்பங்களைப் போலவே இருக்கின்றன: theme, marker, zoom, height, directions, கிளைகளுக்கு pins="lat,lng,Label~Address|…" மற்றும் panel=, motion= (கீழே உள்ள குறிப்பு அட்டவணையைப் பாருங்கள்). உருவாக்கியின் WordPress பகுதி முழு ஷார்ட்கோடையும் உங்களுக்காக உருவாக்கித் தருகிறது — தட்டச்சு செய்ய வேண்டியதே இல்லை.

பிளகின் இல்லாத வழி: உருவாக்கியில் இருந்து iframe-ஐ ஒரு Custom HTML பிளாக்கில் ஒட்டுங்கள். விட்ஜெட் அதுவேதான், புதுப்பிக்க பிளகின் எதுவும் இல்லை; ஈடாக உங்கள் உள்ளடக்கத்தில் மார்க்அப் நீளமாகும், பிறகு பண்புக்கூறு வழியாகத் திருத்தவும் முடியாது.

Squarespace, Shopify, Notion — மற்றும் பிற

WordPress-க்கு வெளியே வேலை பொதுவாக ஒரே ஒரு ஒட்டுதல்தான்: உங்கள் பிளாட்ஃபார்மின் HTML/உட்பொதிப்பு உறுப்பைச் சேர்த்து (Wix-இல் Embed HTML, Squarespace-இல் Code பிளாக், Webflow-இல் Embed) அதற்குள் iframe-ஐ இடுங்கள். ஒரு வித்தியாசம் இருப்பிட விட்ஜெட்டை விட வரைபட விட்ஜெட்டை எளிதாக்குகிறது: இதற்கு allow="geolocation" பண்புக்கூறு தேவையில்லை, ஏனெனில் இது பார்வையாளர்களிடம் எதையும் கேட்பதே இல்லை — எனவே பக்க உருவாக்கி உங்கள் HTML-ஐ மீண்டும் எழுதும்போது காப்பாற்ற வேண்டிய நுட்பமான எதுவும் இல்லை.

Squarespace: ஒரு Code பிளாக்கைச் சேர்த்து ஒட்டுங்கள். முன்கூட்டியே தெரிந்துகொள்ள வேண்டிய ஒரு விஷயம்: Code பிளாக்குகளுக்கு Business திட்டம் அல்லது அதற்கு மேல் தேவை — Personal திட்டத்தில் பிளாக் உங்கள் குறியீட்டை ரெண்டர் செய்யாமல் சாதாரண உரையாகக் காட்டும்.

Shopify-க்கு ஒட்டுவதை விடச் சிறந்தது ஒன்று உண்டு: தயாராக இருக்கும் ஒரு தீம் பிரிவை நாங்கள் தருகிறோம் — உங்கள் தீமில் ஒரே ஒரு கோப்பு, சொந்த அமைப்புகள் பேனலைத் தருகிறது; கிளைகள் இழுத்து வரிசை மாற்றக்கூடிய பிளாக்குகளாக இருக்கும், ஆப்ஸ் இல்லை, API விசை இல்லை.

Notion மற்றும் Google Sites HTML மூலம் அல்ல, URL மூலமே இணைக்கின்றன. அவை iframe குறியீட்டை ஏற்கவே ஏற்காது — அதற்குப் பதிலாக Copy widget URL என்பதை உருவாக்கியில் அழுத்தி, அதை Notion-இன் /embed பிளாக்கிலோ Google Sites-இன் Embed ▸ By URL-இலோ ஒட்டுங்கள். விட்ஜெட் ஒரு முழுமையான தனிப் பக்கம், எனவே இரண்டு வழியிலும் சரியாக ரெண்டர் ஆகும்.

Salesforce Experience Cloud (பொது சமூகத் தளங்கள்): iframe-ஐ ஒரு HTML Editor கூறுக்குள் இடுங்கள் — பிறகு whatismylocation.ai-ஐ Setup ▸ Trusted URLs-இல் frame-src CSP விதியுடன் சேர்க்க உங்கள் நிர்வாகியிடம் சொல்லுங்கள்; இல்லையெனில் Salesforce அமைதியாக அந்த ஃபிரேமைத் தடுத்துவிடும். குறியீட்டில் உருவாக்கும் குழுக்கள் அதே URL-ஐ ~10 வரி Lightning Web Component-இல் மடிக்கலாம்:

<!-- wimlMap.html -->
<template>
  <iframe src={src} width="100%" height="340"
          loading="lazy" title="Map"></iframe>
</template>

// wimlMap.js
import { LightningElement } from 'lwc';
export default class WimlMap extends LightningElement {
  src = 'https://whatismylocation.ai/widget/map?lat=48.858400&lng=2.294500&name=Acme';
}

பல கிளைகள்: இருப்பிடங்கள் பேனல்

ஒரே உட்பொதிப்பில் 10 இருப்பிடங்கள் வரை அடங்கும். உருவாக்கியின் Advanced பயன்முறையில் ஒவ்வொரு பின்னையும் நிலைநிறுத்தி, அதற்கு ஒரு லேபிளும் முகவரியும் கொடுத்து, Add location அழுத்துங்கள். பார்வையாளர்களுக்கு எண்ணிடப்பட்ட பின்களுடன் ஒரு இருப்பிடங்கள் பேனல் கிடைக்கும் — டெஸ்க்டாப்பில் வரைபடத்தின் அருகில் ஒரு அக்கார்டியன், போன்களில் ஸ்வைப் செய்யக்கூடிய கார்டு வரிசை. ஒரு கிளையைத் தேர்வு செய்தால் வரைபடம் அங்கே பறந்து சென்று, அதன் முகவரியைத் தனி வழிகாட்டல் இணைப்புடன் காட்டும்.

• panel= தளவமைப்பைத் தேர்வு செய்கிறது: auto (இயல்பு — அகலமான iframe-களில் பக்கவாட்டில், குறுகியவற்றில் வரிசையாக), side, bottom, அல்லது சாதாரண பின்கள் + பாப்அப்களுக்கு none.
• motion= மாறுதல் அனிமேஷனை அமைக்கிறது: smooth (இயல்பான பறத்தல்), fade, lively, அல்லது none. தங்கள் இயக்க முறைமையில் “reduce motion” அமைத்திருக்கும் பார்வையாளர்களுக்கு, நீங்கள் எதைத் தேர்வு செய்தாலும், எப்போதும் உடனடிப் பதிப்பே கிடைக்கும்.
• open=no என்றால் ஒவ்வொரு உள்ளீடும் சுருங்கிய நிலையில் தொடங்கும்; வரைபடம் எல்லாக் கிளைகளையும் தானாகப் பொருத்திக் கொள்ளும், உங்கள் zoom அதிகபட்ச அளவாக மாறும்.

விருப்பங்களின் குறிப்பு அட்டவணை

WordPress சிக்கல் தீர்வு

ஷார்ட்கோடு பக்கத்தில் அப்படியே உரையாகத் தெரிகிறது. அந்தப் பிளாக் ஷார்ட்கோடுகளைச் செயலாக்குவதில்லை. பிளாக் எடிட்டரில் ஒரு Shortcode பிளாக்கைப் பயன்படுத்துங்கள் (குறியீடு அல்லது முன்வடிவமைக்கப்பட்ட பிளாக் அல்ல); Elementor-இல் அதன் Shortcode விட்ஜெட், Divi-இல் ஒரு Code தொகுதி. கிளாசிக் எடிட்டர் பயன்படுத்துபவர்கள்: Visual தாவலில் சாதாரண உரையாகத் தட்டச்சு செய்யுங்கள்.

எதுவுமே தெரியவில்லை. பக்கத்தின் மூலக் குறியீட்டைப் பார்த்து whatismylocation என்று தேடுங்கள். lat/lng இல்லை என்று ஒரு HTML கருத்துரை இருந்தால், ஆயத்தொலைவுகள் இல்லை அல்லது தவறானவை என்று அர்த்தம் — பண்புக்கூறுகளைக் கையால் தட்டச்சு செய்யாமல், உருவாக்கியில் இருந்து முழு ஷார்ட்கோடையும் நகலெடுங்கள்.

சேமிக்கும்போது iframe மறைந்துவிடுகிறது (பிளகின் இல்லாத வழி). unfiltered_html அனுமதி இல்லாத பயனர் பாத்திரங்களுக்கு WordPress iframe-களை நீக்கிவிடும் — மல்டிசைட்டில் இயல்பாக நிர்வாகிகளும் இதில் அடங்குவார்கள் — சில பாதுகாப்புப் பிளகின்களும் அதையே செய்கின்றன. பிளகின் ஷார்ட்கோடே சுத்தமான தீர்வு: நேரடி iframe-களைச் சேமிக்க உங்கள் பாத்திரத்திற்கு அனுமதி உள்ளதா என்பதை அது சார்ந்திருப்பதில்லை.

வரைபடம் சாம்பல் நிறமாக உள்ளது / டைல்கள் ஏற்றப்படவில்லை. டைல்கள் tile.openstreetmap.org-இல் இருந்து வருகின்றன; மிகத் தீவிரமான விளம்பரத் தடுப்பான் அல்லது நிறுவன வலையமைப்பு அவற்றைத் தடுக்கலாம் (மேலோட்டக் கார்டு அப்போதும் தெரியும்). வேறு வலையமைப்பில் அல்லது மொபைல் தரவில் ஒரு போனில் சரிபாருங்கள்.

இருப்பிடங்கள் பேனல் தெரியவில்லை. பேனல் 2 பின்கள் முதல் தோன்றும் — ஒரே இருப்பிடத்திற்குக் கிளாசிக் மேலோட்டக் கார்டு கிடைக்கும். panel="none" அமைக்கப்படவில்லை என்பதையும் சரிபாருங்கள்.

மாறுதல் அனிமேஷன் இயங்கவில்லை. கிட்டத்தட்ட எப்போதும் காரணம் பார்வையாளரின் (அல்லது உங்கள் சொந்த) இயக்க முறைமையின் “reduce motion” அமைப்புதான் — விட்ஜெட் அதை வேண்டுமென்றே மதித்து உடனடியாக மாற்றுகிறது. இது பிழை அல்ல; மற்ற பார்வையாளர்களுக்கு நீங்கள் தேர்வு செய்த அனிமேஷனே தெரியும்.

திருத்தங்கள் தெரியவில்லை. ஒரு கேச்சிங் பிளகின் (அல்லது ஹோஸ்ட்டின் கேச்) பழைய பக்கத்தையே காட்டுகிறது. ஷார்ட்கோடு பண்புக்கூறுகளைத் திருத்திய பிறகு பக்கக் கேச்சை நீக்குங்கள் — விட்ஜெட்டுக்குக் கேச் செய்ய எதுவும் இல்லை.