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

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

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

تحتوي صفحة الويب هذه على نموذج خريطة مضمنة باستخدام رمز التضمين الافتراضي الذي توفره خرائط Google. الخريطة المضمنة غير مستجيبة. ما يعنيه ذلك هو أنه إذا فتحت الصفحة على جهاز آخر غير كمبيوتر سطح المكتب ، فلن تتناسب خريطة 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

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

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

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