Задать ширину холста карты Google 100% минус ширина боковой панели?

Question

Я пытаюсь отобразить боковую панель в левой части карты Google.Ширина боковой панели составляет 380 пикселей, и мне нужно, чтобы div холста карты занял оставшуюся ширину, но пока мне не повезло.

В div карты должны быть объявлены ширина и высота, иначе это не сработает,Я пытался найти решение шириной 100% минус X пикселей , но в этом случае ни один из них не работает.

У кого-нибудь есть идеи, как это сделать?

Спасибо.

Я пробовал это, но похоже, что это не относится к div холста карты:

$(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;

});

Answer 1

У меня была точно такая же проблема, но мне удалось ее исправить.

Например, если ваша боковая панель div имеет ширину 200 пикселей, установите дополнительный контейнер div вокруг div, в котором Google Mapsзаписывает его содержимое.

Для этого div-container set

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

Работает как шарм, даже при изменении размера.Дайте мне знать, если это решение не соответствует вашей ситуации.

Answer 2

Я делаю это (также боковая панель + GM) с относительной шириной и минимальной шириной.Я могу переключать боковую панель видимым / невидимым.Чтобы сохранить исходные значения, смотрите: Получение значений глобальной таблицы стилей в jQuery ).

Кстати, я думаю, что вы присваиваете в js неверное, оно должно быть element.**style**.width или в jQuery$("#id").width(value): Как установить ширину деления в процентах в 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>