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

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

تضمين خرائط جوجل بشكل مستجيب

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

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

كيفية تضمين خرائط جوجل بشكل مستجيب

هذا هو رمز التضمين الافتراضي الذي تم إنشاؤه بواسطة خرائط Google:

<iframe
  src="https://www.google.com/maps/embed"
  width="600"
  height="450"
  style="border:0;"
  allowfullscreen=""
  loading="lazy"
></iframe>

كما هو محدد في معلمات الارتفاع والعرض للتعليمة البرمجية المضمنة، فإن الارتفاع الافتراضي لكائن الخريطة المضمن هو 450 بكسل أو 75% من العرض الافتراضي (600 بكسل).

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

سيكون رمز التضمين الجديد ذو النمط سريع الاستجابة شيئًا من هذا القبيل. يمكنك تغيير قيمة الحشوة السفلية (السطر رقم 4) من 75% إلى قيمة أخرى لنسبة عرض إلى ارتفاع مختلفة.

<style>
  .google-maps {
    position: relative;
    padding-bottom: 75%; // This is the aspect ratio
    height: 0;
    overflow: hidden;
  }
  .google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
  }
</style>

<div class="google-maps">
  <iframe
    src="https://www.google.com/maps/embed"
    width="600"
    height="450"
    style="border:0;"
    allowfullscreen=""
    loading="lazy"
  ></iframe>
</div>

كسول تحميل خرائط جوجل

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

في وقت سابق، كان يتعين على مواقع الويب استخدام Intersection Observer API لتحميل الخرائط والصور تدريجيًا عندما تصبح مرئية على الشاشة. لم يعد هذا هو الحال لأن معظم المتصفحات الحديثة تدعم الآن loading السمة على img و <iframe> عناصر.

أضف ببساطة loading='lazy' إلى IFRAME سيؤجل العنصر والمتصفح تحميل خرائط Google التي تكون خارج الشاشة حتى يقوم المستخدم بالتمرير بالقرب منها. يمكن استخدام تقنية مماثلة لتضمين مقاطع فيديو وصور Instagram.