كيفية تضمين أداة خريطة في أي موقع

ابدأ من أداة الإنشاء (العمل الحقيقي الوحيد)

يبدأ كل شيء من أداة إنشاء تضمين الخريطة. يحدث الترميز الجغرافي مرة واحدة، هناك — المقتطف الذي تنسخه يحمل إحداثيات ثابتة، لذا لا يمكن لعطل في خدمة الترميز الجغرافي أو «توحيد صيغة العنوان» أن يحرّك دبوسك لاحقًا. اكتب العنوان، وراقب الدبوس وهو يحطّ، ثم اسحبه إلى مدخلك الفعلي قبل النسخ: هذا السحب الذي يستغرق عشر ثوانٍ هو الفرق بين «الشارع الصحيح» و«الباب الصحيح».

هل تريد رؤية إعداد جاهز متعدد الفروع قبل بناء إعدادك؟ افتح العرض التجريبي لأداة الإنشاء — يحمّل شركة نموذجية بثلاثة فروع مع العناوين ودبابيس مرقّمة ملوّنة ولوحة المواقع حيّة في المعاينة، جاهزة للتجريب.

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 أو التضمين في منصتك (Embed HTML في Wix، وكتلة الشيفرة في Squarespace، وEmbed في Webflow) وضع iframe فيه. وفارق واحد يجعل أداة الخريطة أسهل من أداة الموقع: لا تحتاج إلى السمة allow="geolocation"، لأنها لا تطلب من الزائر أي شيء — فلا يوجد شيء هشّ يجب الحفاظ عليه حين يعيد منشئ الصفحات كتابة HTML.

Squarespace: أضف كتلة شيفرة والصق. وهناك عقبة واحدة يجدر معرفتها مسبقًا: كتل الشيفرة تتطلب خطة Business أو أعلى — في خطة Personal تعرض الكتلة شيفرتك كنص عادي بدل تشغيلها.

Shopify يستحق أفضل من مجرد لصق: نوفّر قسم قالب جاهزًا — ملف واحد في قالبك يمنحك لوحة إعدادات أصلية مع الفروع ككتل تُرتَّب بالسحب، بلا تطبيق وبلا مفتاح API.

يعتمد Notion وGoogle Sites على التضمين بالرابط لا بـ HTML. لن يقبلا مقتطف iframe إطلاقًا — بدلًا من ذلك اضغط نسخ رابط الأداة في أداة الإنشاء والصقه في كتلة /embed في Notion أو في Embed ▸ By URL في Google Sites. الأداة صفحة مستقلة كاملة، لذا تُعرض بشكل مثالي في الحالتين.

Salesforce Experience Cloud (مواقع المجتمعات العامة): ضع iframe داخل مكوّن HTML Editor — ثم اطلب من المسؤول إضافة whatismylocation.ai ضمن الإعداد ▸ عناوين URL الموثوقة مع توجيه 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';
}

فروع متعددة: لوحة المواقع

يتّسع التضمين الواحد لعشرة مواقع كحد أقصى. في الوضع المتقدّم بأداة الإنشاء، حدّد موضع كل دبوس، وأعطه اسمًا وعنوانًا، ثم اضغط إضافة موقع. يحصل الزوار على لوحة مواقع — قائمة قابلة للطي بجانب الخريطة على سطح المكتب، وشريط بطاقات يُسحب بالإصبع على الهاتف — مع دبابيس مرقّمة: اختيار فرع يطيّر الخريطة إليه ويعرض عنوانه مع رابط اتجاهات خاص به.

• panel= يختار التخطيط: auto (الافتراضي — جانبي في الإطارات العريضة، وشريط في الضيقة)، أو side، أو bottom، أو none لدبابيس ونوافذ منبثقة فقط.
• motion= يضبط حركة التبديل: smooth (الطيران الافتراضي)، أو fade، أو lively، أو none. والزوار الذين فعّلوا «تقليل الحركة» في أنظمتهم يحصلون دائمًا على النسخة الفورية مهما اخترت.
• open=no يبدأ بكل المدخلات مطوية؛ وتضبط الخريطة نفسها تلقائيًا لتشمل كل الفروع، فيصبح zoom الذي حدّدته هو الحد الأقصى.

مرجع الخيارات

حل مشكلات WordPress

الكود المختصر يظهر كنص حرفي في الصفحة. تلك الكتلة لا تعالج الأكواد المختصرة. في محرّر الكتل استخدم كتلة كود مختصر (لا كتلة شيفرة أو نص منسّق مسبقًا)؛ وفي Elementor استخدم أداة Shortcode، وفي Divi وحدة Code. أما مستخدمو المحرّر الكلاسيكي فيكتبونه في تبويب «مرئي» كنص عادي.

لا يظهر أي شيء إطلاقًا. اعرض مصدر الصفحة وابحث عن whatismylocation. وجود تعليق HTML عن غياب lat/lng يعني أن الإحداثيات ناقصة أو غير صالحة — انسخ الكود المختصر كاملًا من أداة الإنشاء بدل كتابة السمات يدويًا.

يختفي iframe عند الحفظ (طريق بلا إضافة). يحذف WordPress الإطارات لأدوار المستخدمين التي لا تملك صلاحية unfiltered_html — وفي الشبكة المتعددة يشمل ذلك المسؤولين افتراضيًا — وبعض إضافات الحماية تفعل الشيء نفسه. الحل النظيف هو الكود المختصر عبر الإضافة: فهو لا يعتمد على السماح لدورك بحفظ iframe مباشر.

الخريطة رمادية أو المربّعات لا تُحمَّل. تأتي المربّعات من tile.openstreetmap.org؛ وقد يحجبها مانع إعلانات شديد الصرامة أو شبكة شركة (وتظل بطاقة المعلومات ظاهرة). تأكّد عبر شبكة أخرى أو هاتف يعمل ببيانات الجوال.

لا توجد لوحة مواقع. تظهر اللوحة ابتداءً من دبوسين — الموقع الواحد يحصل على البطاقة الكلاسيكية. وتحقّق أيضًا من أن panel="none" غير مضبوط.

حركة التبديل لا تعمل. السبب في الغالب إعداد «تقليل الحركة» في نظام تشغيل الزائر (أو نظامك أنت) — والأداة تحترمه عن قصد فتبدّل فورًا. ليست علة، وبقية الزوار يرون النمط الذي اخترته.

التعديلات لا تظهر. إضافة تخزين مؤقت (أو ذاكرة الاستضافة) تقدّم الصفحة القديمة. امسح ذاكرة الصفحة المؤقتة بعد تعديل سمات الكود المختصر — فالأداة نفسها لا شيء فيها يُخزَّن مؤقتًا.