Jinsi ya kupachika wijeti ya ramani kwenye tovuti yoyote

Anza kwenye kijenzi (kazi halisi ni hapa)

Kila kitu huanzia kijenzi cha kupachika ramani. Jiokodi hufanyika mara moja, hapo — msimbo unaonakili hubeba viwianishi visivyobadilika, hivyo kukatika kwa jiokoda au “usanifishaji wa anwani” hakuwezi kuhamisha pini yako baadaye. Andika anwani, tazama pini inapotua, kisha ivute hadi kwenye lango lako halisi kabla ya kunakili: mvuto huo wa sekunde kumi ni tofauti kati ya “mtaa sahihi” na “mlango sahihi”.

Unataka kuona mpangilio kamili wa matawi mengi kabla ya kujenga wako? Fungua onyesho la kijenzi — hupakia kampuni ya mfano yenye matawi matatu, ikiwa na anwani, pini zenye rangi na namba, na paneli ya maeneo ikiwa hai katika onyesho la kukagua, tayari kuchezewa.

WordPress: shortcode ya programu-jalizi au iframe ghafi?

Njia zote mbili zinaishia kwenye wijeti ile ile — chagua unayoipenda.

Njia ya programu-jalizi (inapendekezwa): pakua whatismylocation-widget.zip → wp-admin ▸ Plugins ▸ Add New ▸ Upload Plugin → Activate. Kisha ongeza bloku ya Shortcode:

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

Sifa zinafanana na chaguo za kijenzi: theme, marker, zoom, height, directions, na kwa matawi pins="lat,lng,Label~Address|…" pamoja na panel= na motion= (ona jedwali la rejeo hapa chini). Sehemu ya WordPress kwenye kijenzi hutengeneza shortcode kamili kwa niaba yako — hakuna kuandika.

Njia bila programu-jalizi: bandika iframe kutoka kwenye kijenzi ndani ya bloku ya Custom HTML. Wijeti ile ile, hakuna programu-jalizi ya kusasisha; hasara ni msimbo mrefu ndani ya maudhui yako na hakuna uhariri kwa mtindo wa sifa baadaye.

Squarespace, Shopify, Notion — na nyingine zote

Nje ya WordPress kazi huwa kubandika mara moja: ongeza kipengele cha HTML/kupachika cha jukwaa lako (Wix Embed HTML, bloku ya Code ya Squarespace, Embed ya Webflow) na uweke iframe humo. Tofauti moja hufanya wijeti ya ramani kuwa rahisi kuliko wijeti ya eneo: haihitaji sifa ya allow="geolocation", kwa sababu haiwaombi wageni kitu chochote — hivyo hakuna kitu tete cha kuhifadhi wakati kijenzi cha kurasa kinabadilisha HTML yako.

Squarespace: ongeza bloku ya Code na ubandike. Kitu kimoja cha kujua mapema: bloku za Code zinahitaji mpango wa Business au wa juu zaidi — kwenye mpango wa Personal bloku huonyesha msimbo wako kama maandishi ya kawaida badala ya kuuendesha.

Shopify inastahili zaidi ya kubandika: tunatoa sehemu ya mandhari iliyo tayari — faili moja katika mandhari yako hukupa paneli ya mipangilio ya asili yenye matawi kama bloku unazovuta kupanga upya, bila programu na bila ufunguo wa API.

Notion na Google Sites zinapachika kwa URL, sio HTML. Hazitakubali msimbo wa iframe kabisa. Badala yake, bonyeza Nakili URL ya wijeti kwenye kijenzi na ubandike katika bloku ya /embed ya Notion au Embed ▸ By URL ya Google Sites. Wijeti ni ukurasa kamili unaojitegemea, hivyo huonekana vizuri kwa njia yoyote.

Salesforce Experience Cloud (tovuti za jumuiya za umma): weka iframe ndani ya kijenzi cha HTML Editor — kisha mwambie msimamizi wako aongeze whatismylocation.ai chini ya Setup ▸ Trusted URLs pamoja na agizo la CSP frame-src, la sivyo Salesforce itazuia fremu kimyakimya. Timu zinazotumia msimbo zinaweza kufunga URL hiyo hiyo katika Lightning Web Component ya mistari ~10:

<!-- 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';
}

Matawi mengi: paneli ya maeneo

Maeneo hadi 10 yanatoshea katika upachikaji mmoja. Katika modi ya kina ya kijenzi, weka kila pini mahali pake, ipe lebo na anwani, kisha bonyeza Ongeza eneo. Wageni hupata paneli ya maeneo — akodioni kando ya ramani kwenye kompyuta, na mkanda wa kadi unaotelezwa kwenye simu — yenye pini zenye namba: kuchagua tawi hupeperusha ramani hadi kwake na kuonyesha anwani yake pamoja na kiungo chake cha kupata maelekezo.

• panel= huchagua muundo: auto (chaguo-msingi — kando kwenye iframe pana, mkanda kwenye nyembamba), side, bottom, au none kwa pini za kawaida na madirisha ibukizi.
• motion= huweka mwendo wa kubadili: smooth (upeperushaji wa chaguo-msingi), fade, lively, au none. Wageni waliowasha “punguza mwendo” kwenye mfumo wao hupata toleo la papo hapo kila wakati, hata ukichagua nini.
• open=no huanza na kila kipengee kimekunjwa; ramani hujipanga yenyewe kuonyesha matawi yote na zoom yako inakuwa kikomo cha juu.

Rejeo la chaguo

Utatuzi wa matatizo kwenye WordPress

Shortcode inaonekana kama maandishi ya kawaida kwenye ukurasa. Bloku hiyo haichakati shortcode. Katika kihariri cha bloku tumia bloku ya Shortcode (sio bloku ya msimbo au ya maandishi yaliyoumbizwa); katika Elementor tumia wijeti yake ya Shortcode, na katika Divi moduli ya Code. Watumiaji wa kihariri cha kawaida: iandike kwenye kichupo cha Visual kama maandishi ya kawaida.

Hakuna kitu kinaonekana kabisa. Tazama chanzo cha ukurasa na utafute whatismylocation. Komenti ya HTML kuhusu lat/lng zinazokosekana inamaanisha viwianishi havipo au si sahihi — nakili shortcode kamili kutoka kwenye kijenzi badala ya kuandika sifa kwa mkono.

Iframe inatoweka unapohifadhi (njia bila programu-jalizi). WordPress huondoa iframe kwa majukumu ya watumiaji yasiyo na uwezo wa unfiltered_html — kwenye multisite hii inajumuisha wasimamizi kwa chaguo-msingi — na programu-jalizi kadhaa za usalama hufanya vivyo hivyo. Shortcode ya programu-jalizi ni suluhisho safi: haitegemei jukumu lako kuruhusiwa kuhifadhi iframe ghafi.

Ramani ni ya kijivu / vigae havipakiwi. Vigae hutoka tile.openstreetmap.org; kizuia-matangazo kikali sana au mtandao wa kampuni unaweza kuvizuia (kadi ya juu bado huonekana). Hakiki kwenye mtandao mwingine au kwa simu inayotumia data ya simu.

Hakuna paneli ya maeneo. Paneli huonekana kuanzia pini 2 — eneo moja hupata kadi ya kawaida ya juu. Pia hakikisha panel="none" haijawekwa.

Mwendo wa kubadili haufanyi kazi. Karibu kila wakati ni mpangilio wa “punguza mwendo” kwenye mfumo wa uendeshaji wa mgeni (au wako) — wijeti huuheshimu kwa makusudi na hubadilisha papo hapo. Si hitilafu, na wageni wengine bado wanaona mpangilio uliochagua.

Mabadiliko hayaonekani. Programu-jalizi ya akiba (au akiba ya seva pangishi) inatoa ukurasa wa zamani. Safisha akiba ya ukurasa baada ya kuhariri sifa za shortcode — wijeti yenyewe haina kitu cha kuweka katika akiba.