Bagaimana cara membuat peta responsif untuk situs web

Mengingat Anda telah menandai kueri Anda sebagai HTML & Javascript, seperti yang disarankan Mike, tautan pertama bagi saya adalah: 5 Cara Menambahkan Google Maps Responsif ke Website Anda[^]

Untuk peta Google sederhana, berikut cara termudah dari referensi lain di sini[^]:

1. Kunjungi situs web Google Maps.
2. Cari lokasi yang ingin Anda tampilkan di peta tersemat.
3. Klik Bagikan.
4. Klik Sematkan peta untuk melihat pratinjau penyematan. Di sini, Anda dapat mengubah area peta, memperbesar, mengetik (peta jalan atau peta satelit), dan ukuran (termasuk ukuran khusus jika Anda mau)
5. Jika sudah siap untuk disematkan, klik Salin HTML.
6. Dalam file HTML Anda, tempelkan kode semat di tempat yang Anda inginkan untuk menampilkan peta pada halaman. Kodenya akan terlihat seperti ini (mungkin terlihat berbeda tergantung pada ukuran peta yang Anda pilih:
7. Simpan file HTML dan buka file di browser web untuk melihat peta beraksi.
8. Jadikan peta tersemat kami responsif dengan sedikit tambahan HTML dan CSS
Kode:
1. ambil kode semat yang ada dan letakkan di dokumen HTML Anda. Lalu, bungkus <iframe> elemen (yang mewakili peta) dalam sebuah wadah <div> dengan kelas google-map.

<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. Selanjutnya di CSS Anda, tambahkan kode berikut:

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

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

Untuk membuat peta pada website yang menyesuaikan dengan ukuran layar Anda dapat memanfaatkan Google Maps JavaScript API atau pustaka pemetaan lainnya. Cukup tempatkan kode peta di dalam div container.

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

Terapkan prinsip desain menggunakan CSS, seperti menggunakan lebar berdasarkan persentase. Untuk mengontrol berbagai ukuran layar, Anda mungkin ingin mempertimbangkan untuk menggunakan kueri media seperti di bawah ini:

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