كيفية تضمين خريطة جوجل تستجيب في موقع على شبكة الإنترنت

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

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

استجابة تصميم الويب

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

للقيام بذلك ، يجب أن يتكيف موقع الويب مع دقة الشاشة المختلفة وأحجامها ولمسها.

تضمين خريطة جوجل سريعة الاستجابة في موقع الويب

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

استخدم سمة WordPress لتضمين خريطة Google سريعة الاستجابة

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

1. تفضل بزيارة هذه الصفحة على موقع Google الإلكتروني لبدء عملية API.
2. حدد الزر "بدء البدء" الأزرق.
3. حدد أيقونة القائمة الثلاثة أسطر في أعلى يسار الشاشة الجديدة.
4. حدد واجهات برمجة التطبيقات والخدمات ثم بيانات الاعتماد.
5. حدد إنشاء بيانات اعتماد ، ثم مفتاح API.
6. حدد مفتاح تقييد وحدد HTTP الإحالات.
7. اختر حفظ.
8. انسخ مفتاح API والصقه في صفحة خيارات التصميم التي تتطلب ذلك.

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

استخدم مكونًا إضافيًا لتضمين خريطة Google سريعة الاستجابة

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

1. في WordPress ، انتقل إلى الإضافات وإضافة جديد.
2. ابحث عن خرائط Google وحدد مكونًا إضافيًا تريده.
3. قم بتمكينه داخل الإضافات وانتقل إلى إعداداته.
4. أضف Google Maps API الذي قمت بإنشائه أعلاه حيث أشار وحفظ.
5. نفذ المكوّن الإضافي أينما تريد أن تظهر الخريطة.

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

استخدم الكود لتضمين خريطة Google سريعة الاستجابة

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

1. انتقل إلى خرائط Google وانتقل إلى أن تملأ الخريطة التي تريد عرضها الشاشة.
2. حدد رابط المشاركة الأزرق وانسخ الرمز من تضمين الخريطة.
3. أضف كود التضمين الخاص بك إلى الكود أدناه بين و.
4. أضف الشفرة داخل HTML لصفحة الويب الخاصة بك حيث تريد رؤية الخريطة.
5. حفظ التغييرات الخاصة بك.

الرمز:

هذا ليس الرمز الخاص بي ، لقد عثرت عليه عبر الإنترنت لكنني اختبرت ذلك على موقعي الإلكتروني إنه يعمل مثل السحر ويجب أن يعمل سواء كنت تستخدم CMS أو HTML أو Hugo أو إحدى لغات مواقع الويب أو أدوات الصفحات العديدة الأخرى.