css configuration for map template - css

Question

Hi I'm using a bootstrap template to display some map tools but I been having problems with css of the div containing the map-canvas when I collapse the side panel the map moves to the proper place but live blank space on the opposite side and also there is a big issue with the height of the map.
I'm looking to place the map to full extend when sidepanel is collapsed or extended tried everything without success, I will appreciate any help from the stackoverflow community.
Thanks in advance.
here is a link to my page https://secure.cevamhn.net/AirAid/maptoolsair.php
css code here:
/*!
* Start Bootstrap - Simple Sidebar HTML Template (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
/* Toggle Styles */
#wrapper {
padding-left: 0px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 0px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0; /* disini agar ketika di kecilkan tidak hilang semua default 0*/
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 0px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -150px;
}
/*------------------------------------------------ MAP FEATURES BEGIN ----------------------------------*/
#map-canvas {
height: 100%;
width: 100%;
margin-left: 0px;
padding: 0px;
}
#drawPanel {
position: absolute;
width: 200px;
font-family: Arial, sans-serif;
font-size: 13px;
float: left;
margin-top: 5px;
margin-left: 200px;
z-index: 1000;
}
#color-palette {
clear: both;
}
.color-button {
width: 20px;
height: 20px;
font-size: 0;
margin: 2px;
float: left;
cursor: pointer;
}
#delete-button {
margin-top: 0px;
margin-left: 22px;
}
#wrapper.toggled #map-canvas #drawPanel #color-palette.color-button #delete-button {
position: absolute;
}
#botLeft{
color: red;
font-weight: bold;
border: 0px solid;
background-color: transparent;
}
#botRight{
color: red;
font-weight: bold;
border: 0px solid;
background-color: transparent;
}
input {
color: White;
font-weight: bold;
border: 0px solid;
background-color: transparent;
text-align: left;
}
#opacity {
color: black;
font-weight: bold;
background-color: white;
width: 30px;
height: 20px;
margin-left: 5px;
}
/*------------------------------------------------ END MAP FEATURES ----------------------------------*/
.fixed-brand{
width: auto;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
margin-top: 2px;
}
.sidebar-nav li {
text-indent: 15px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.2);
border-left: red 2px solid;
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
.no-margin{
margin:0;
}
#media(min-width:768px) {
#wrapper {
padding-left: 250px;
}
.fixed-brand{
width: 250px;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 250px;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#wrapper.toggled-2 #sidebar-wrapper {
width: 50px;
}
#wrapper.toggled-2 #sidebar-wrapper:hover {
width: 250px;
}
#page-content-wrapper {
padding: 0px;
position: relative;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#map-canvas {
padding: 442px; /* ------------------------------- If left at 0 Map is not Display ---------------------- */
position: relative;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
padding-left: 200px;
}
#wrapper.toggled #map-canvas #map-canvas {
position: relative;
margin-right: 0px;
padding-left: 0px;
}
#wrapper.toggled-2 #page-content-wrapper {
position: relative;
margin-right: 0px;
margin-left: -220px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled-2 #map-canvas #map-canvas #drawPanel #color-palette.color-button #delete-button {
position: relative;
margin-right: 0px;
margin-left: 0px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
}

Answer 1

When ever the size of the div containing your map changes, you need to trigger the 'resize' event on your Map object.
google.maps.event.trigger(map, 'resize');
Also, by changing:
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 0px;
}
to:
#page-content-wrapper {
min-width: 100%;
position: absolute;
padding: 0px;
}
the element stays the width of the space.