איך להטמיע וידג'ט מפה בכל אתר

התחל בבונה ההטמעה (העבודה האמיתית היחידה)

הכול מתחיל בבונה ההטמעה של המפה. הגיאוקודינג מתבצע פעם אחת, שם — הקטע שאתה מעתיק נושא קואורדינטות קבועות, ולכן תקלה בשירות הגיאוקודינג או “נרמול כתובת” לא יזיזו את הסמן שלך אחר כך. הקלד את הכתובת, ראה את הסמן נוחת, ואז גרור אותו אל הכניסה האמיתית שלך לפני ההעתקה: גרירה אחת של עשר שניות היא ההבדל בין “הרחוב הנכון” ל“הדלת הנכונה”.

רוצה לראות הגדרה מוכנה עם כמה סניפים לפני שאתה בונה את שלך? פתח את הדמו של הבונה — הוא טוען חברה לדוגמה עם שלושה סניפים, כתובות, סמנים ממוספרים בצבעים ופאנל מיקומים חי בתצוגה המקדימה, מוכן להתנסות.

WordPress: שורטקוד של תוסף או iframe גולמי?

שני המסלולים מסתיימים באותו וידג'ט בדיוק — בחר לפי הטעם שלך.

מסלול התוסף (מומלץ): הורד את whatismylocation-widget.zip → wp-admin ▸ תוספים ▸ הוסף חדש ▸ העלה תוסף → הפעל. אחר כך הוסף בלוק שורטקוד:

[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 מהבונה בבלוק 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 מטמיעים לפי כתובת URL, לא לפי HTML. הם לא יקבלו קטע iframe בכלל — במקום זה לחץ על העתק כתובת הווידג'ט בבונה ההטמעה והדבק אותה בבלוק /embed של Notion או ב-Embed ▸ By URL של Google Sites. הווידג'ט הוא עמוד עצמאי שלם, ולכן הוא נטען מושלם בשתי הדרכים.

Salesforce Experience Cloud (אתרי קהילה ציבוריים): הכנס את ה-iframe לרכיב HTML Editor — ואז בקש מהמנהל להוסיף את whatismylocation.ai תחת Setup ▸ Trusted URLs עם הנחיית ה-CSP frame-src, אחרת Salesforce חוסם את המסגרת בשקט. צוותים שעובדים עם קוד יכולים לעטוף את אותה כתובת ב-Lightning Web Component של כ-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';
}

כמה סניפים: פאנל המיקומים

עד 10 מיקומים נכנסים בהטמעה אחת. במצב מתקדם של הבונה, מקם כל סמן, תן לו תווית וכתובת ולחץ הוסף מיקום. המבקרים מקבלים פאנל מיקומים — אקורדיון לצד המפה במסך רחב, רצועת כרטיסים להחלקה בטלפון — עם סמנים ממוספרים: בחירת סניף מעיפה את המפה אליו ומציגה את הכתובת שלו עם קישור הוראות הגעה משלו.

• panel= בוחר את הפריסה: auto (ברירת מחדל — בצד ב-iframe רחב, רצועה ב-iframe צר), side, bottom, או none לסמנים פשוטים + חלוניות מידע.
• motion= קובע את אנימציית המעבר: smooth (תעופה, ברירת מחדל), fade, lively או none. מבקרים שהגדירו “הפחתת תנועה” במערכת שלהם מקבלים תמיד את הגרסה המיידית, מה שלא תבחר.
• open=no מתחיל כשכל הרשומות מכווצות; המפה מתאימה את עצמה אוטומטית לכל הסניפים, וה-zoom שלך הופך למקסימום.

אפשרויות: טבלת עזר

פתרון בעיות ב-WordPress

השורטקוד מופיע בעמוד כטקסט רגיל. הבלוק הזה לא מעבד שורטקודים. בעורך הבלוקים השתמש בבלוק שורטקוד (לא בבלוק קוד או טקסט מעוצב מראש); ב-Elementor השתמש בווידג'ט Shortcode, ב-Divi במודול Code. משתמשי העורך הקלאסי: הקלד אותו בלשונית הוויזואלית כטקסט רגיל.

שום דבר לא מופיע. הצג את מקור העמוד וחפש whatismylocation. הערת HTML על lat/lng חסרים אומרת שהקואורדינטות לא קיימות או לא תקינות — העתק את השורטקוד המלא מהבונה במקום להקליד מאפיינים ביד.

ה-iframe נעלם בשמירה (מסלול בלי תוסף). WordPress מסיר iframe-ים אצל תפקידי משתמש שאין להם ההרשאה unfiltered_html — ב-multisite זה כולל מנהלים כברירת מחדל — וגם תוספי אבטחה מסוימים עושים את זה. שורטקוד התוסף הוא הפתרון הנקי: הוא לא תלוי בכך שהתפקיד שלך מורשה לשמור iframe גולמי.

המפה אפורה / האריחים לא נטענים. האריחים מגיעים מ-tile.openstreetmap.org; חוסם פרסומות אגרסיבי מאוד או רשת ארגונית יכולים לחסום אותם (כרטיס השכבה עדיין מוצג). בדוק ברשת אחרת או בטלפון עם חבילת גלישה.

אין פאנל מיקומים. הפאנל מופיע מ-2 סמנים ומעלה — מיקום בודד מקבל את כרטיס השכבה הקלאסי. בדוק גם ש-panel="none" לא מוגדר.

אנימציית המעבר לא פועלת. כמעט תמיד זו הגדרת “הפחתת תנועה” במערכת ההפעלה של המבקר (או שלך) — הווידג'ט מכבד אותה בכוונה ומחליף מיד. זה לא באג, ומבקרים אחרים עדיין רואים את ההגדרה שבחרת.

העריכות לא מופיעות. תוסף מטמון (או המטמון של השרת) מגיש את העמוד הישן. נקה את מטמון העמוד אחרי עריכת מאפייני השורטקוד — לווידג'ט עצמו אין מה לשמור במטמון.