કોઈપણ સાઇટ પર નકશા વિજેટ કેવી રીતે એમ્બેડ કરવું

બિલ્ડરથી શરૂ કરો (અસલી કામ આટલું જ છે)

બધું નકશા-એમ્બેડ બિલ્ડરથી શરૂ થાય છે. જિયોકોડિંગ એક જ વાર, ત્યાં જ થાય છે — તમે જે સ્નિપેટ કૉપિ કરો છો તેમાં નિશ્ચિત કોઓર્ડિનેટ્સ હોય છે. એટલે જિયોકોડર બંધ પડે કે “સરનામાનું નોર્મલાઇઝેશન” થાય, પછીથી તમારો પિન ખસી શકતો નથી. સરનામું ટાઇપ કરો, પિન ક્યાં પડે છે તે જુઓ, અને કૉપિ કરતાં પહેલાં તેને તમારા ખરા પ્રવેશદ્વાર પર ખેંચી લો: એ દસ સેકન્ડનું ખેંચાણ જ “સાચી શેરી” અને “સાચો દરવાજો” વચ્ચેનો ફરક છે.

તમારું બનાવતાં પહેલાં તૈયાર મલ્ટિ-બ્રાન્ચ સેટઅપ જોવું છે? બિલ્ડર ડેમો ખોલો — તેમાં ત્રણ શાખાવાળી નમૂના કંપની લોડ થાય છે, સાથે સરનામાં, રંગીન નંબરવાળા પિન અને પ્રીવ્યૂમાં જીવંત સ્થાનો પેનલ — તરત અજમાવી શકાય તેવું.

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 કમ્પોનન્ટમાં મૂકો — પછી તમારા એડમિન પાસે Setup ▸ Trusted URLs માં whatismylocation.ai ને 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 દબાવો. મુલાકાતીઓને સ્થાનો પેનલ મળે છે — ડેસ્કટોપ પર નકશાની બાજુમાં એકોર્ડિયન, ફોન પર સ્વાઇપ થતી કાર્ડ પટ્ટી — નંબરવાળા પિન સાથે. કોઈ શાખા પસંદ કરતાં નકશો ઊડીને ત્યાં પહોંચે છે અને તેનું સરનામું તેની પોતાની Get-directions લિંક સાથે બતાવે છે.

• panel= લેઆઉટ પસંદ કરે છે: auto (ડિફૉલ્ટ — પહોળા iframe માં બાજુમાં, સાંકડામાં પટ્ટી), side, bottom, અથવા સાદા પિન + પોપઅપ માટે none.
• motion= બદલવાનું એનિમેશન નક્કી કરે છે: smooth (ડિફૉલ્ટ ઉડાન), fade, lively, અથવા none. જે મુલાકાતીઓએ પોતાની સિસ્ટમમાં “મોશન ઘટાડો” સેટ કર્યું હોય તેમને હંમેશાં તાત્કાલિક આવૃત્તિ મળે છે, તમે ગમે તે પસંદ કરો.
• open=no થી શરૂઆતમાં દરેક એન્ટ્રી બંધ રહે છે; નકશો બધી શાખાઓ આપોઆપ સમાવી લે છે અને તમારો zoom મહત્તમ મર્યાદા બની જાય છે.

વિકલ્પોની સંદર્ભ યાદી

WordPress સમસ્યાનિવારણ

પેજ પર શોર્ટકોડ અક્ષરશઃ ટેક્સ્ટ તરીકે દેખાય છે. એ બ્લોક શોર્ટકોડ પ્રોસેસ કરતો નથી. બ્લોક એડિટરમાં Shortcode બ્લોક વાપરો (કોડ કે પ્રિફોર્મેટેડ બ્લોક નહીં); Elementor માં તેનું Shortcode વિજેટ વાપરો, Divi માં Code મોડ્યુલ. Classic એડિટર વાપરનારા: તેને Visual ટૅબમાં સાદા ટેક્સ્ટ તરીકે ટાઇપ કરો.

કશું જ દેખાતું નથી. પેજનો સોર્સ જુઓ અને whatismylocation શોધો. lat/lng ખૂટતા હોવા વિશેની HTML કોમેન્ટ મળે તો કોઓર્ડિનેટ્સ ગેરહાજર કે અમાન્ય છે — હાથે એટ્રિબ્યુટ ટાઇપ કરવાને બદલે બિલ્ડરમાંથી આખો શોર્ટકોડ કૉપિ કરો.

સાચવતાં જ iframe ગાયબ થઈ જાય છે (પ્લગઇન વગરનો રસ્તો). જે યુઝર રોલ પાસે unfiltered_html ક્ષમતા ન હોય તેમના માટે WordPress iframe કાઢી નાખે છે — મલ્ટિસાઇટ પર ડિફૉલ્ટમાં એડમિન પણ તેમાં આવે છે — અને કેટલાંક સિક્યોરિટી પ્લગઇન પણ એવું જ કરે છે. પ્લગઇનનો શોર્ટકોડ સાફ ઉકેલ છે: તે તમારા રોલને કાચા iframe સાચવવાની છૂટ છે કે નહીં તેના પર આધાર રાખતો નથી.

નકશો ભૂખરો છે / ટાઇલ્સ લોડ થતી નથી. ટાઇલ્સ tile.openstreetmap.org પરથી આવે છે; ખૂબ આક્રમક એડ-બ્લોકર કે કંપનીનું નેટવર્ક તેને બ્લોક કરી શકે છે (ઓવરલે કાર્ડ તો પણ દેખાય છે). બીજા નેટવર્ક પર કે મોબાઇલ ડેટા વાળા ફોન પર ચકાસો.

સ્થાનો પેનલ દેખાતી નથી. પેનલ 2 પિનથી ઉપર દેખાય છે — એક જ સ્થાન હોય તો પરંપરાગત ઓવરલે કાર્ડ મળે છે. panel="none" સેટ તો નથી ને, તે પણ તપાસો.

બદલવાનું એનિમેશન ચાલતું નથી. લગભગ હંમેશાં તેનું કારણ મુલાકાતીની (કે તમારી પોતાની) ઓપરેટિંગ સિસ્ટમની “મોશન ઘટાડો” સેટિંગ હોય છે — વિજેટ તેને ઇરાદાપૂર્વક માન આપે છે અને તાત્કાલિક બદલે છે. આ ખામી નથી, અને બીજા મુલાકાતીઓને તમારો પસંદ કરેલો પ્રીસેટ દેખાય જ છે.

ફેરફારો દેખાતા નથી. કોઈ કેશિંગ પ્લગઇન (કે હોસ્ટનું કેશ) જૂનું પેજ પીરસી રહ્યું છે. શોર્ટકોડ એટ્રિબ્યુટ બદલ્યા પછી પેજ કેશ સાફ કરો — વિજેટમાં પોતે કેશ કરવા જેવું કશું નથી.