地圖模板的css配置

Question

您好我正在使用引導模板來顯示一些地圖工具，但我一直有問題與包含地圖畫布的div的CSS當我摺疊側面板地圖移動到適當的地方，但在對面的生活空間和地圖的高度也有一個大問題。

我期待將地圖放置到完全擴展當側面板被摺疊或擴展試了一切都沒有成功，我會感謝從stackoverflow社區的任何幫助。

在此先感謝。

這裏是我的網頁的鏈接https://secure.cevamhn.net/AirAid/maptoolsair.php

CSS代碼在這裏：

/*! 
* 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

當過包含您的地圖更改div的大小，你需要觸發的「調整」事件您地圖對象。

google.maps.event.trigger(map, 'resize'); 

另外，通過改變：

#page-content-wrapper { 
    width: 100%; 
    position: absolute; 
    padding: 0px; 
} 

到：

#page-content-wrapper { 
    min-width: 100%; 
    position: absolute; 
    padding: 0px; 
} 

元件保持的空間的寬度。