Add a google map using the grid system with boostrap - html

Question

I have a question that has been surely asked 10000 times already but I don't really understand the answers.
I want to make something simple : divide my screen in 3 columns, add some buttons on the 1 column, a google map in the second one and other buttons in the 3rd one.
How can I manage to do that properly?
For moment I added the buttons where I wanted, but when it comes to manage the map, I have problems usually with the size.
<div class="container">
<div class="row">
<div class="col-lg-4">
<button type="button" class="btn btn-primary btn-lg">1</button>
<button type="button" class="btn btn-default btn-lg">2</button>
</div>
<div class="col-lg-4">
<div id="map-container" style="width: 500px; height: 300px;"></div>
</div>
<div class="col-lg-4">
<form class>
<b>Point A : <input type="text" class="form-control"></b>
<b>Point B : <input type="text" class="form-control"><b>
<button>Validate</button>
</form>
</div>
</div>
<div class="row">
<br></br>
</div>
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4">
<button type="button" class="btn btn-success sharp">Good</button>
<button type="button" class="btn btn-warning sharp">Normal</button>
<button type="button" class="btn btn-danger sharp">Bad</button>
</div>
<div class="col-lg-4"></div>
</div>
</div>

Answer 1

You should set the map height style, but not the width. Also you should set:
#map-container img {
max-width: none;
}
See this question on stackoverflow for more information.