To make a map resizable you need to specify the height and width for all its containers in terms of percent. In my example I need to add height and width attributes to <html>, <body> and the <div> containing the map.
Bugs: 1. adding height and width attributes to the original google example script (http://www.google.com/apis/maps/documentation/simple.html) gave the following javascript error which i was able to work around by moving the script from the <head> to the <body>;.
I had a couple different things happen to me when i tried to move 'height' to the external css file. In the simple-resize-css example, using mozilla, the map did not display.
Moving 'height' worked fine with my usgs map when i used mozilla, but safari got confused and placed the equator up at the top of the map box where the north pole should have been. http://www.speakeasy.org/~endico/maps/usgs.html
3. I don't have much data on MSIE, but I read in another thread that MSIE gets confused if you set height and width to 100%. I think 98% should work.
Great work! I've evolved your solution a little based on my own testing. Note the following additional requirements:
- You must listen to the window.onResize event and call the map.onResize() function when the window is resized. Otherwise the Google map doesn't seem to know that the window's been resized, and two problems will occur:
1) The map won't recenter properly when double-clicking 2) If you start out with a small window size, and then make it a LOT bigger, the map won't take up the full screen. That's cause you're not actually making the map bigger, you're just seeing the "offscreen" area of it.
if (window.attachEvent) { window.attachEvent("onresize", function() {this.map.onResize()} );
> Great work! I've evolved your solution a little based on my own
> testing. Note the following additional requirements:
> - You must listen to the window.onResize event and call the
> map.onResize() function when the window is resized. Otherwise the
> Google map doesn't seem to know that the window's been resized, and two
> problems will occur:
> 1) The map won't recenter properly when double-clicking
> 2) If you start out with a small window size, and then make it a LOT
> bigger, the map won't take up the full screen. That's cause you're not
> actually making the map bigger, you're just seeing the "offscreen" area
> of it.
Very nice seeing the resize on a full screen map. Have you seen an easy way to make resiziable maps which still allow for top and side static content areas? This would work much like the maps.google.com site itself with a static sized area on the top and right sides of the window. My experiments so far with a div block inside of a table cell (which does resize correctly) have gone very badly.
But it doesn't work in MSIE. The problem is that in MSIE, the DIV's are shrunk to fit their content. Since there's no content in the map div, it is shrunk infinitesimally. You can set the div's width and height to 100%, but then it underlaps the right panel, and the map doesn't center properly. I tried playing with things like margin-right:300px, but that didn't help either.
If you're not anal about keeping your right panel a constant-width, you could do something like the following:
But if you want to emulate the layout at maps.google.com, The only surefire way I know if is to avoid using percentage height/width's altogether, and adjust things using javascript on the window.resize event.
|
