Cách nhúng Google Map vào web mà Responsive

Cách nhúng Google Map vào web mà Responsive

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. Bài này hướng dẫn bạn Cách nhúng Google Map vào web mà Responsive

Để đả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é.

Như vậy là qua bài viết trên bạn đã biết Cách nhúng Google Map vào web mà Responsive

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

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 *

Call Now Button