設置谷歌地圖畫布寬度100％減去側邊欄寬度？

我正在嘗試在Google地圖的左側顯示一個側邊欄。邊欄寬度爲380px，我需要地圖畫布div來佔用剩餘的寬度，但目前爲止我沒有運氣來完成此操作。設置谷歌地圖畫布寬度100％減去側邊欄寬度？

地圖div必須聲明寬度和高度，否則不起作用。我試圖找到一個寬度100％減去X像素解決方案，但沒有人在這種情況下工作。

有沒有人有一個想法如何做到這一點？

謝謝。

我想這一點，但看起來它並不適用於地圖畫布格：

$(document).ready(function(){ 
$(window).width(); 
$(document).width(); 

var width1 = $(document).width(); 
var width2 = $("#left").width(); 

var canvas_width = width1 – width2 + "px"; 

$('#map_canvas').width = canvas_width;

}）;

來源

2011-08-27 elbatron

難道你不能用js計算尺寸，而不是用js將地圖添加到屏幕上？ –

我刪除了[google-maps-api-3]標籤，元素的內容與其定位並不特別相關。 –

我正在做這個（也側邊欄+ GM）與相對寬度和最小寬度。我可以切換側邊欄可見/不可見。爲了保存原始值，請參閱：Getting values of global stylesheet in jQuery）。

順便說一句，我想你分配在JS是錯誤的，它應該是element.**style**.width或jQuery的$("#id").width(value)： How to set width of a div in percent in JavaScript?

的風格：

#sideBar { 
float: left; 
width: 27.5%; 
min-width: 275px; 
height: 100%; 
z-index: 0; 
} 

#sideBarLocation div { 
display: inline; 
} 

#mapCanvas 
{ 
width: 72.5%; 
min-width: 725px; 
height: 100%; 
float: left; 
z-index: 0; 
}

與HTML：

<div id="sideBar"> 
      <!-- tab location starts here --> 
      <table id="sideBarLocation" class="sideBarStandard"> 
      ... 
      </table> 
</div> 
.... 
<!-- side bar ends here --> 
<div id="mapCanvas"></div>

來源

2011-08-27 09:43:27

謝謝，是的，我意識到JS上面是錯誤的。使用你的CSS地圖只會顯示，如果我改變位置爲絕對（它是相對的），地圖漂浮在我的邊欄div上方左側。你能指點我一個例子，有人獲得了我想要的東西嗎？ thx – elbatron

在我的情況下，側欄的子元素的「內聯」避免了浮動。您應該能夠用絕對像素寬度替換百分比值，並使用上述（固定）計算來更改它。但是，您需要在調整窗口大小時重新計算。 –

我有完全相同的問題，但設法解決它。

例如，如果你的側邊欄div是200像素寬設置額外div容器，其谷歌地圖寫入其內容的div左右。

對於div-container調整大小時設置

position: absolute; 
left: 200px; 
right: 0; 
height: 100%

就像一個魅力，也。讓我知道這個解決方案是否與您的情況不符。

來源

2012-01-20 15:10:48 Micros

設置谷歌地圖畫布寬度100％減去側邊欄寬度？

回答

相關問題