Making a Google map fit in a container

As a developer, adding a Google Map to a responsive page can be difficult because both the minimum width and minimum height have to be specified to make the map display. The best solution is to use “vw” units. 10vw will resolve to 10% of the current viewport width.

For example :

.themap {
min-height: 120vw;
min-width: 100vw;
}

Setting these minimums will cause the map to completely fill the width of the viewport. For example, you might need to fill the width of an iPhone X screen.

You can do a media query to be sure that these minimums are only chosen for small screen sizes. For example:

@media only screen and (max-width: 400px) {
.themap {
min-height: 120vw;
min-width: 100vw;
}

For a larger screen, apply a different media query so that the map uses, for example, min-width: 50vw and min-height: 60vw. Although, the unit ” vh” is valid, be sure to set the minimum height using the “vw” unit, and not the “vh” unit.

Posted in CSS

Leave a Reply

Your email address will not be published. Required fields are marked *