Responsive GMap - Resizing
This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false&dummy=.js"></script>
<div class="container">
<div class="well">
<div id="map_canvas"></div>
</div>
</div>
CSS
#map_canvas {
width: 100%;
}
JavaScript
var map;
jQuery(function($) {
$(document).ready(function() {
var latlng = new google.maps.LatLng(52.493403, 13.492351);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// init Height
$('#map_canvas').height($( window ).height());
});
// On Resize
$(window).resize(function(){
$('#map_canvas').height($( window ).height());
});
});