Set google map canvas width 100% minus sidebar width?

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 ).

Up vote 1 down vote favorite share g+ share fb share tw.

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; }); google-maps-api-3 width positioning percentage sidebar link|improve this question edited Aug 27 '11 at 9:31 asked Aug 27 '11 at 8:57elbatron808 81% accept rate.

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: ... ....

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.

I had exactly the same problem, but just 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 cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.