Làm cách nào để tạo bản đồ phản hồi cho trang web

Vì bạn đã gắn thẻ truy vấn của mình là HTML & Javascript, như Mike đã đề xuất, liên kết đầu tiên đối với tôi là: 5 cách để thêm Google Maps đáp ứng vào trang web của bạn[^]

Để có một bản đồ Google đơn giản, đây là phương pháp dễ nhất từ ​​​​ một tài liệu tham khảo khác ở đây[^]:

1. Truy cập trang web Google Maps.
2. Tìm kiếm vị trí bạn muốn làm nổi bật trên bản đồ được nhúng của mình.
3. Nhấp vào Chia sẻ.
4. Nhấp vào Nhúng bản đồ để xem bản xem trước của nội dung nhúng. Tại đây, bạn có thể chuyển đổi khu vực bản đồ, thu phóng, loại (bản đồ đường phố hoặc bản đồ vệ tinh) và kích thước (bao gồm kích thước tùy chỉnh nếu bạn muốn)
5. Khi đã sẵn sàng nhúng, hãy nhấp vào Sao chép HTML.
6. Trong tệp HTML của bạn, dán mã nhúng vào nơi bạn muốn bản đồ xuất hiện trên trang. Mã sẽ trông giống như thế này (có thể trông khác tùy thuộc vào kích thước bạn đã chọn cho bản đồ của mình:
7. Lưu tệp HTML và mở tệp trong trình duyệt web để xem bản đồ đang hoạt động.
8. Làm cho bản đồ nhúng của chúng tôi phản hồi nhanh hơn với một chút HTML và CSS bổ sung
Mã số:
1. lấy mã nhúng hiện có của bạn và đặt nó vào tài liệu HTML của bạn. Sau đó, bọc <iframe> phần tử (đại diện cho bản đồ) trong một thùng chứa <div> với lớp 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. Tiếp theo, trong CSS của bạn, hãy thêm đoạn mã sau:

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

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

Để tạo bản đồ trên trang web điều chỉnh theo kích thước màn hình, bạn có thể sử dụng API JavaScript của Google Maps hoặc thư viện bản đồ khác. Chỉ cần đặt mã bản đồ bên trong div vùng chứa.

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

Áp dụng các nguyên tắc thiết kế bằng CSS, chẳng hạn như sử dụng chiều rộng dựa trên tỷ lệ phần trăm. Để kiểm soát các kích thước màn hình khác nhau, bạn có thể muốn xem xét sử dụng các truy vấn phương tiện như bên dưới:

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