Google Maps giúp bạn chèn bản đồ vị trí shop, doanh nghiệp vào website, nhưng mặc định sẽ không hiển thị responsive trên điện thoại. Đây là cách DoveBay giúp bạn thực hiện điều này một cách dễ dàng và nhanh chóng nhất.

Bước 1: Lấy mã nhúng Google Maps, có dạng như sau:

<iframe src=”https://www.google.com/maps/embed?pb=” width=”600″ height=”450″ frameborder=”0″ style=”border:0″ allowfullscreen></iframe>

B1-Lay-ma-nhung-google-maps-1

B1-Lay-ma-nhung-google-maps-2

Bước 2: Chèn thêm class vào mã nhúng Google Maps như sau:

<div class=”google-map”>

<iframe src=”https://www.google.com/maps/embed?pb=” width=”600″ height=”450″ frameborder=”0″ style=”border:0″ allowfullscreen></iframe>

</div>

Bước 3: Chèn đoạn CSS sau vào mục CSS bổ sung

.google-map{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.google-map iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}

Chú ý class phải trùng nhau là “google-map”

Giá trị padding-bottom:56.25%; có thể thay đổi độ phóng đại.

Xem thêm: Hướng dẫn tạo PopUp khi thiết kế website wordpress