Cách nhúng Google Map vào web mà Responsive
5 (100%) 6 votes

Khi các bạn làm Web thường phải embed ( nhúng mã) Google map lên website trong phần liên hệ để khách hàng dễ dàng tìm kiếm địa chỉ doanh nghiệp. Nhưng nếu chỉ nhúng theo cách thông thường thì sẽ không tương thích kích cỡ với di động, máy tính bảng.

Để đảm bảo responsive cho Google map hiển thị trên nhiều thiết bị khác nhau, chúng ta cần thay đổi thao tác nhỏ mà đơn giàn như sau.

Mã nhúng Google map thông thường như sau:

<iframe src=“https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7098.94326104394!2d78.0430654485247!3d27.172909818538997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1385710909804” width=“600” height=“450” frameborder=“0” style=border:0></iframe>

Để tạo định dạng responsive, các bạn chỉ cần thêm code như sau:

<style>

.googlemaps {

position: relative;

paddingbottom: 75%; // This is the aspect ratio

height: 0;

overflow: hidden;

}

.googlemaps 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?pb=!1m14!1m12!1m3!1d7098.94326104394!2d78.0430654485247!3d27.172909818538997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1385710909804” width=“600” height=“450” frameborder=“0” style=border:0></iframe>

</div>

Giá trị 75% ở line 4 bạn có thể thay đổi theo ý mình được.

Thay phần <iframe….> phía trên bằng mã Google map của chính map bạn cần thêm vào web nhé.

Nếu chưa làm được các bạn có thể comment bên dưới.

Please follow and like us:
Cách nhúng Google Map vào web mà Responsive

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

error: Content is protected !!