Como hacer Google Maps responsivo con Javascript

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

view plainprint?

1. function initialize() {  
2.    var mapOptions = {  
3.            zoom: 9,  
4.            center: new google.maps.LatLng(28.9285745, 77.09149350000007),    
5.            mapTypeId: google.maps.MapTypeId.TERRAIN  
6.        };  
7.    
8.    var map = new google.maps.Map(document.getElementById('location-canvas'),  
9.                                    mapOptions);  
10.                                 
11.    var marker = new google.maps.Marker({  
12.                    map: map,  
13.                    draggable: false,  
14.                    position: new google.maps.LatLng(28.9285745, 77.09149350000007)  
15.        });  
16. }  
17.                           
18. google.maps.event.addDomListener(window, 'resize', initialize);  
19. google.maps.event.addDomListener(window, 'load', initialize);  

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

view plainprint?

1. <div id="location-canvas" style="width:100%;height:300px;"></div>  

Eso es todo!

view plainprint?

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

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

Este evento rezise

view plainprint?

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

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!