Como hacer Google Maps responsivo con Javascript

Utiliza el siguiente código JavaScript antes de cerrar la etiqueta head en su archivo HTML.

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);
google.maps.event.addDomListener(window, 'load', initialize);

Ahora pon este HTML

Eso es todo!

google.maps.event.addDomListener(window, 'resize', initialize);
// and 
google.maps.event.addDomListener(window, 'load', initialize);

Este evento rezise

google.maps.event.addDomListener(window, 'resize', initialize);

Es el evento principal que inicializa nuestra función de mapa en la ventana del navegador, redimensiona el mapa según el dispositivo.

Espero que les sea de utilidad!