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;

});

Can't you calculate the dimension with js and than use js to add the map to the screen? — Jasper Kennis, Aug 27 '11 at 09:08
I removed the [google-maps-api-3] tag the elements' contents are not particularly relevant their positioning. — Beetroot-Beetroot, Jul 08 '13 at 23:52

score 4 · Answer 1 · edited Jul 08 '13 at 16:11

4

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.

edited Jul 08 '13 at 16:11

Tony

9,672
3
47
75

answered Jan 20 '12 at 15:10

Micros

5,966
2
28
34

score 0 · Accepted Answer · edited May 23 '17 at 12:14

0

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>

edited May 23 '17 at 12:14

Community

1
1

answered Aug 27 '11 at 09:43

Horst Walter

13,663
32
126
228

Thanks, yes I realized that JS is wrong above. Using your CSS the map only shows up if I change the position to absolute (it's relative somehow) and the map floats above my sidebar div on the left. Can you point me to an example where somebody achieved something like I want to? thx – elbatron Aug 27 '11 at 10:21
In my case the "inline" for the sidebar's sub element did the trick avoiding the floating. You should be able to replace the percentage value by absolute px width and change it with your above (fixed) calculation. However, you need then to recalculate when resizing the window. – Horst Walter Aug 27 '11 at 14:19

Set google map canvas width 100% minus sidebar width?

2 Answers2