Responsive Google Map?

Question

How to make a responsive google map from the code

I use in css

Answer 1

Responsive with CSS You can make the Iframe responsive with the following CSS codes.

.map {
    position: relative;
    padding-bottom: 26.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.map iframe,
.map object,
.map embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Responsive with JavaScript

This possible through window.resize event and you can apply this on google map like google.maps.event.addDomListener(window, 'resize', initialize);

Consider the following example:

function initialize() {
    var mapOptions = {
           zoom: 9,
           center: new google.maps.LatLng(28.9285745, 77.09149350000007),  
           mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    
    var map = new google.maps.Map(document.getElementById('location-canvas'), mapOptions);
    var marker = new google.maps.Marker({
           map: map,
           draggable: false,
           position: new google.maps.LatLng(28.9285745, 77.09149350000007)
     });
}
google.maps.event.addDomListener(window, 'resize', initialize);

Take a look for more details - https://webomnizz.com/how-to-make-responsive-google-map-with-google-map-api/