How to make Google Maps Responsive?

Question

I am trying to add Google Maps to a web page, however it has a fixed width and height, from the code using Googles tutorial. My HTML in the head is this:

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
    function initialize() {
        var mapCanvas = document.getElementById('map');
        var myLatLng = {lat: 51.434408, lng: -2.53531};
        var mapOptions = {
            center: new google.maps.LatLng(51.434408, -2.53531),
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(mapCanvas, mapOptions);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: 'Hello Wold'
});
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

The HTML in the body is this:

<div id="map"></div>

The CSS thats related is this:

#map {
width: 1140px;
height: 300px;
}

I am using bootstraps column method to layout and make my page responsive, at all sizes I would like the map to take up all 12 columns of the row that it is in. Any ideas?

Thanks!

Solution

So, I found a solution to my question. Here is my revised CSS:

#map {
width: 100%;
height: 300px;
}

I found that you have to have a height of a certain amount of pixels, using 100% or another percentage would make the map disappear, however the width 100% makes the map respond to resizing the browser. The HTML has been left the same.

Comments

[iH8]

That won't work. You'll need to declare 100% width on all parent elements.

[Elow]

Exacty, using bootstrap you can do that. You shouldn't have down vote my answer

[Sebastian Brosch]

@Elow - have you tried it? it is not working because on load the marker is on the middle. after resizing the markers is away or not centered!

[iH8]

@elow i didn't downvote, please go slander someone else.

[Brian]

col-xs-12 - I doubt he's using bootstrap2.

[BenRichi_]

Yeah, sorry Im using bootstrap 3, I have had a look for this question but it uses old bootstrap and also old google code

[BenRichi_]

This hasn't worked, if I use your CSS, then the map disappears!