Responsive GMap - Resizing

This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.

by Behseini

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

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css');

.container {
    margin-top: 30px;
}
#map_canvas {
   width: 100%;
   height:400px;
}

JavaScript

var map;
var panorama;
jQuery(function($) {
    $(document).ready(function() {
        var latlng = new google.maps.LatLng(49.241943,-122.889318);
        var myOptions = {
            zoom: 18,
            center: latlng,
            panControl: true,
            zoomControl: true,
            zoomControlOptions: {
                                  style: google.maps.ZoomControlStyle.SMALL
                                },
            mapTypeControl: false,
            scaleControl: false,
            streetViewControl: false,
            overviewMapControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
           };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        });
});