Set google map canvas width 100% minus sidebar width?

I'm trying to display a sidebar on the left side of a google map. The sidebar width is 380px and I need the map canvas div to take up the remaining width but I have no luck so far accomplishing this.

The map div must have width and height declared, otherwise it doesn't work. I was trying to find a width 100% minus X pixels solution but no of them is working in this case.

Does anyone has an idea how to do it?

Thanks.

I tried this, but it looks that it doesn't apply to the map canvas 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_w开发者_StackOverflowidth;

});

---

I had exactly the same problem, but managed to fix it.

For example, if your sidebar div is 200px wide set an extra div container around the div in which Google Maps writes its content.

For that div-container set

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

Works like a charm, also when resizing. Let me know if this solution doesn't match your situation.

---

I am doing this (also sidebar + GM) with relative width and min-widths. I can toggle the sidebar visible / invisible. In order to save the original values see: Getting values of global stylesheet in jQuery ).

Btw, I think you assignment in js is wrong, it should be element.**style**.width or in jQuery $("#id").width(value): How to set width of a div in percent in JavaScript?

The styles:

#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;
}

with HTML:

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