كيفية عمل خريطة Google مع دبابيس متعددة في WordPress

نشرت: 2025-07-23

يمكن أن تساعد إضافة خريطة إلى موقع الويب الخاص بك زوارك في العثور على مواقع عملك أو الأحداث بسهولة. إذا كان لدى عملك أكثر من موقع ، فقد ترغب في إظهارها جميعًا على نفس الخريطة. هذا هو المكان الذي قد يصبح فيه استخدام دبابيس متعددة على خريطة Google مفيدًا.

إذا تم تصميم موقع الويب الخاص بك باستخدام Elementor ، فلن تضطر إلى تناول الكثير من المتاعب في إضافة دبابيس متعددة على خريطة Google الخاصة بك. بدلاً من ذلك ، يمكنك بسهولة إضافة أكبر عدد تريده. العملية بسيطة للغاية ، حتى بالنسبة للمبتدئين.

في هذا المنشور ، سنقوم بتغطية برنامج تعليمي مفصل حول كيفية عمل خريطة Google مع دبابيس متعددة في WordPress مع Elementor. ولكن قبل ذلك ، سنغطي بضع كلمات حول السبب ومتى يجب عليك استخدام خرائط Google مع دبابيس متعددة على مواقع WordPress الخاصة بك.

لماذا تستخدم خرائط Google مع دبابيس متعددة على موقع WordPress الخاص بك

Why Use Google Maps with Multiple Pins on Your WordPress Site

يمكن أن يؤدي استخدام خرائط Google مع دبابيس متعددة إلى تحسين موقع الويب الخاص بك بعدة طرق. لا يتعلق الأمر فقط بعرض المواقع. يمكن أن يساعد المستخدمين على بناء الثقة وجعل موقعك أكثر فائدة لأنه يمكنهم العثور على متاجرك بسهولة. فيما يلي بعض أهم الأسباب التي تجعلك تفكر في ذلك.

1. أظهر جميع مواقعك في مكان واحد

إذا كان لشركتك العديد من الفروع أو المتاجر أو المكاتب ، فيمكن أن تساعدك دبابيس متعددة على عرضها جميعًا على خريطة واحدة. هذا يجعل من السهل على الزائرين رؤية كل موقع في لمحة دون التبديل بين الخرائط أو الصفحات المختلفة.

2. مساعدة المستخدمين في العثور على أقرب بقعة

عندما يرى المستخدمون جميع المواقع على خريطة واحدة ، يمكنهم العثور بسرعة على المواقع الأقرب إليها. هذا يمكن أن يحسن تجربتهم ويساعدهم على اتخاذ إجراء بشكل أسرع ، مثل زيارة متجرك أو حجز موعد.

3. وفر الوقت للزوار

بدلاً من إدراج كل عنوان واحد تلو الآخر في نص عادي ، يمكنك إظهارها بصريًا مع دبابيس. هذا يوفر الوقت لك ولزوارك. كما أنه يجعل موقعك يبدو أكثر احترافية وحديثة.

4. تعزيز كبار المسئولين الاقتصاديين المحليين مع بيانات الموقع

يمكن أن تساعد خرائط Google في مُحسنات محركات البحث المحلية لموقع الويب الخاص بك. عندما تضيف عناوين حقيقية إلى خريطتك ، فإنها تخبر محركات البحث عن مواقع عملك. قد يساعد هذا موقعك في الظهور في نتائج البحث المحلي. استكشف كيفية تحسين كبار المسئولين الاقتصاديين المحلي مع Happyaddons.

Boost Local SEO with Location Data

5. اجعل موقعك أكثر تفاعلية

تبدو الخريطة ذات دبابيس متعددة أكثر تفاعلية وديناميكية من النص العادي. يمكن للزوار التكبير ، والنقر على المسامير ، واستكشاف الخريطة. هذا يجعل موقعك أكثر جاذبية وسهولة في الاستخدام.

6. مثالي للشركات القائمة على الخدمة أو متعددة الفروع

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

المتطلبات الأساسية لصنع خريطة Google مع دبابيس متعددة مع Elementor

دعونا نوضح شيئًا واحدًا في البداية. يحتوي Elementor على عنصر واجهة مستخدم مدمجة تسمى Google Map . لكن ميزاتها محدودة للغاية. لا يمكنك إضافة دبابيس متعددة إلى الخريطة باستخدام هذه القطعة الافتراضية. لذلك ، للقيام بذلك ، ستحتاج إلى ملحق إضافي.

خيار واحد رائع هو Happyaddons . يوفر عنصر واجهة مستخدم يسمى خرائط Google المتقدمة ، والتي تتيح لك إنشاء دبابيس متعددة بسهولة إلى خريطتك دون أي متاعب.

لذلك ، في المجموع ، تحتاج إلى الأدوات التالية على موقعك لهذا البرنامج التعليمي.

  • عنصر
  • Happyaddons
  • Happyaddons Pro

مطلوب HappyAddons Pro لأن خريطة Google المتقدمة هي عنصر واجهة مستأجرة للمكون الإضافي. بمجرد تثبيتها وتفعيلها على موقعك ، ابدأ باتباع البرنامج التعليمي كما هو مذكور أدناه. استكشف جميع عناصر واجهة المستخدم الأخرى من Happyaddons.

كيفية صنع خريطة Google مع دبابيس متعددة في WordPress: تعليمي خطوة بخطوة

في هذا القسم ، سنشرح خطوة بخطوة كيفية إنشاء خريطة Google مع دبابيس متعددة في WordPress مع الإضافات Elementor و HappyAddons. سنقوم بتزيين هذا القسم باستخدام لقطات شاشة ضرورية أيضًا ، حتى تتمكن من فهم العملية الكاملة. استمر في القراءة!

الخطوة 01: افتح صفحة وابحث عن أداة خريطة Google المتقدمة

افتح المنشور أو الصفحة التي تريد إنشاء خريطة Google مع دبابيس متعددة. ابحث عن عنصر واجهة خريطة Google المتقدمة على لوحة Elementor. اسحبه وإسقاطه على قماش Elementor.

Use the Advanced Google Map widget to create multiple pins

الخطوة 02: احصل على مفتاح Google API

بعد إضافة عنصر واجهة المستخدم إلى القماش ، يُطلب منك تكوين بيانات الاعتماد لعرض خريطة Google. لبدء هذا ، انقر فوق خيار بيانات الاعتماد ضمن قسم الإعدادات العامة في اللوحة.

Get credential for the Advanced Google Map

سيتم نقلها إلى قسم بيانات الاعتماد في Happyaddons في الخلفية من الموقع. ابحث عن خيار خريطة Google . ثم ، اضغط على خيار الحصول على مفتاح API .

Get Google Map API Key

سوف تأتي إلى صفحة Google Cloud.

Google Cloud Page

الآن ، عليك أن تجد "خرائط JavaScript API". لهذا ، اكتب خرائط JavaScript API في مربع البحث. بمجرد ظهور الخيار ، انقر فوقه .

Find Maps JavaScript API

بعد القدوم إلى صفحة JavaScript API ، قم بتمكين الخيار .

Enable Maps JavaScript API

اضغط على الزر "اتفاق ومتابعة" . قبل ذلك ، يمكنك اختيار بلدك. لقد قمنا بتعبئة حالتنا.

Configure JavaScript Account

مفتاح Google API ليس مجانيًا تقنيًا. يجب عليك إكمال معلومات الفواتير الخاصة بك للحصول على واجهة برمجة التطبيقات.

ملاحظة (كيف تكون مجانية): على الرغم من أنها ليست مجانية من الناحية الفنية ، إلا أنك ستتلقى الرموز المميزة التي تعادل 200 دولار شهريًا دون أي تكلفة . مع هذا الرمز المميز ، يمكن تحميل خريطة Google أو عرضها حتى 28000 مرة . فقط إذا تم عبور حد العرض/التحميل هذا ، فسيتم شحن بطاقتك.

Complete the billing information

بعد ذلك ، سيتم تزويدك بنبؤة منبثقة. يجب عليك تقديم بعض المعلومات حول عملك حيث سيتم استخدام هذه الخريطة. بمجرد الانتهاء ، انقر فوق الزر "إرسال" في الزاوية السفلية اليمنى من المنبثقة.

Fill in your industry-related information

سيظهر مفتاح Google MAP API على شاشتك على الفور مع نافذة منبثقة جديدة. انسخ مفتاح API .

Copy the Google Map API key

عد إلى خيار HappyAddons Google API Key ولصق الكود الخاص بك هناك. اضغط على زر حفظ التغييرات في النهاية.

Paste the Google Map API key to HappyAddons

الآن ، تعال إلى قماش Elementor الخاص بك وتحديثه/إعادة تحميله. ستظهر خريطة Google على القماش.

Google map appears on the Elementor Canvas

تحقق من كيفية إنشاء جدول زمني في WordPress مع Elementor.

الخطوة 03: أضف دبابيس متعددة إلى الخريطة

بشكل افتراضي ، يتم عرض دبوس واحد فقط على الخريطة. لإضافة وعرض المزيد من المسامير إلى الخريطة ، قم بتوسيع قسم علامة الخريطة في اللوحة.

Expand the Map Marker section on the panel

بعد توسيع قسم علامة الخريطة ، يمكنك إضافة أكبر عدد من المسامير التي تريدها بالنقر فوق الزر "إضافة العنصر" .

Add more pins to the Google Map

الآن ، من خلال وضع القيم لخط الطول والعرض ، يمكنك ضبط الدبابيس بدقة لكل مكان.

Add latitude and longitude to pins on Google Map

الخطوة 04: تكوين إعدادات الخريطة

بنفس الطريقة ، قم بتوسيع قسم إعدادات الخريطة .

Configure Map Settings

ستجد الكثير من الخيارات ضمن هذا القسم.

Mag Settings options of the Advanced Google Map widget

الآن ، يمكنك استكشاف كل خيار عن طريق التبديل وإيقاف تشغيله لمعرفة كيف يعملون حتى تتمكن من البقاء أخيرًا مع تلك التي تناسب احتياجات التصميم.

تعرف على كيفية إنشاء معرض صور للتمرير التلقائي في WordPress.

الخطوة 05: قم بتصميم عنصر واجهة مستخدم خريطة Google المتقدمة

عند الانتهاء من جميع الإعدادات وأجزاء المحتوى ، تعال إلى علامة التبويب النمط . من هنا ، يمكنك تخصيص الارتفاع والعرض ونوع الحدود ونصف قطر الحدود والمزيد من الخيارات.

Stylize the Advanced Google Map Widget

بنفس الطريقة ، قم بتوسيع الخيارات الأخرى أيضًا وقم بالتخصيصات اللازمة حيث تريد تغيير مظهر المسامير.

Stylize the other options of the Advanced Google Map widget

الخطوة 06: معاينة التصميم

عند الانتهاء من التصميم ، قبل نشره عبر الإنترنت ، قم بمعاييره لمعرفة ما إذا كان أي تصحيح أو تعديل مطلوب. يمكنك أن ترى أن القطعة تعمل بشكل جيد في نهايتنا في مقطع الفيديو المرفق أدناه.

وبالتالي ، يمكنك عمل خريطة Google مع دبابيس متعددة في WordPress مع Elementor.

نصائح متقدمة لخريطة Google مع دبابيس متعددة

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

Advanced Tips for Google Map with Multiple Pins

1. استخدم الصور المخصصة بدلاً من الرموز

بدلاً من الدبوس الأحمر الافتراضي ، حاول استخدام أيقونات أو صور مخصصة لكل موقع. يتيح لك HappyAddons القيام بذلك من علامة تبويب Content> MAP MARK. يمكن أن تجعل الصور والأيقونات المخصصة خريطتك أكثر وضوحًا وجذابة بصريًا.

2. تكبير وإعدادات المركز

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

3. اجعلها صديقة للهاتف المحمول

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

4. خرائط التضمين على صفحات الاتصال أو الموقع

لا تترك خريطتك فقط في صفحة واحدة. يمكنك إعادة استخدام الخريطة نفسها من خلال تضمينها على صفحات أخرى مثل "الاتصال بنا" أو "مواقعنا" أو "زيارتنا". يساعد هذا المستخدمين في العثور على المكان المناسب أينما كانوا على موقعك.

تعرف على كيفية إنشاء صفحة ويب ديناميكية في WordPress مع Elementor.

خاتمة

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

بمساعدة مكونات Elementor و HappyAddons ، يمكنك إضافتها بسهولة إلى موقع الويب الخاص بك دون الكثير من المتاعب. إنه أمر بسيط للغاية بحيث يمكن للمبتدئين القيام بذلك فقط عن طريق اتباع البرنامج التعليمي المغطى أعلاه. إذا كان لا يزال لديك أي أسئلة دون إجابة ، فأخبرنا من خلال مربع التعليق أدناه.

سنعود إليك قريبًا جدًا مع ردود قابلة للحياة. شكرا لوجود معنا حتى النهاية. اسمحوا لنا أن نعرف الموضوع الذي تريد منا أن نغطيه في المنشور التالي.