Set google map canvas width 100% minus sidebar width?

Question

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_width;

});

Answer 1

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.