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

نظرًا لأنك قمت بوضع علامة على استعلامك على أنه HTML وJavascript، كما اقترح مايك، فإن الرابط الأول بالنسبة لي هو: 5 طرق لإضافة خرائط جوجل المستجيبة إلى موقع الويب الخاص بك[^]

للحصول على خريطة جوجل بسيطة، إليك الطريقة الأسهل من مرجع آخر هنا[^]:

1. انتقل إلى موقع خرائط جوجل.
2. ابحث عن الموقع الذي تريد تمييزه في خريطتك المضمنة.
3. انقر فوق مشاركة.
4. انقر فوق تضمين الخريطة لمشاهدة معاينة للتضمين. هنا، يمكنك تبديل منطقة الخريطة، والتكبير/التصغير، والكتابة (خريطة الشارع أو خريطة القمر الصناعي)، والحجم (بما في ذلك الحجم المخصص إذا كنت ترغب في ذلك)
5. عندما تصبح جاهزًا للتضمين، انقر فوق نسخ HTML.
6. في ملف HTML الخاص بك، الصق كود التضمين حيث تريد أن تظهر الخريطة على الصفحة. سيبدو الرمز على هذا النحو (قد يبدو مختلفًا اعتمادًا على الحجم الذي اخترته لخريطتك:
7. احفظ ملف HTML وافتح الملف في متصفح الويب لعرض الخريطة أثناء العمل.
8. اجعل خريطتنا المضمنة سريعة الاستجابة مع القليل من HTML وCSS الإضافيين
شفرة:
1. خذ كود التضمين الموجود لديك وضعه في مستند HTML الخاص بك. ثم قم بلف <iframe> العنصر (الذي يمثل الخريطة) في الحاوية <div> مع فئة خريطة جوجل.

<div class="google-map">
     <iframe src="[your unique google URL] " width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>

2. بعد ذلك، في CSS الخاص بك، أضف الكود التالي:

.google-map {
     padding-bottom: 50%;
     position: relative;
}

.google-map iframe {
     height: 100%;
     width: 100%;
     left: 0;
     top: 0;
     position: absolute;
}

لإنشاء خريطة على موقع ويب يتم ضبطها حسب أحجام الشاشة، يمكنك استخدام Google Maps JavaScript API أو مكتبة خرائط أخرى. ما عليك سوى وضع رمز الخريطة داخل حاوية div.

<div id="map-container"></div>

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

#map-container {
    height: 60vh; /* Adjust the height as needed */
    width: 100%;
}