@Marting @Ralph
Thanks for the ideas, but it didn't solve the problem.
I tried the htmlcontrol, but I couldn't get it to work with the html I
need to display in the navbar.
And the height: 100% isn't the problem, I got it to stretch fullscreen
already. But I can't get it to stretch to "100% - headerHeight".
I'll elaborate a bit more;
I've managed to get the map to display fullscreen (100%) and scale
with resizing. However, I need a navbar on top of the page to display
different parts of the website. So this header is 25px high, and I
want the Google Map to scale to 100% of the remaining space.
Normally, this would simply work like this:
html, body {
width: 100%
height: 100%
margin: 0
}
#header {
height: 25px;
top: 0px;
}
#content_container {
height: 100%;
}
#map_canvas {
height: 100%;
}
And have html set up like this:
<body>
<div id="header"> </div>
<div id="content_container">
<div id="map_canvas"> </div>
</div>
</body>
However, once I embedded the google map, it for some reason doesn't
seem to take the 25px of the header into account and still stretches
across the whole window-size. That's why I keep getting the scroll-
bar, it doesn't subtract the 25px of the header div.
I've tried a lot of CSS hacking to solve it, and so far the only
solution I found was to place the header "on top" of the map by adding
a z-index. But I'm stuck with either 2 problems:
1.) As you can currently see on http://www.noxious.org/test-maps.html
, the controls are covered by the header.
I then tried to 'move' the controls downward by using
GControlPosition. But then this arised:
2.) http://www.noxious.org/test-maps2.html . When I try to move the
controls myself, and not use map.setUIToDefault(); , the infowindow
is cut off on the top.
For some reason, when I don't use "map.setUIToDefault();" , the map
centers a bit 'higher' than when I do use it.
In example, open test_maps2.html and test_maps3.html in 2 tabs, and
open them one after the other.
Any other suggestions? Feel free to copy the source of either page if
necessary.
On Aug 18, 7:27 am, Martin <[email protected]> wrote:
> Make the map 100% width and height and then put your header in a
> HtmlControl:http://googlemapsapi.martinpearman.co.uk/articles.php?cat_id=2
>
> Martin.
>
> On 18 Aug, 01:48, Wes Saalmink <[email protected]> wrote:
>
>
>
> > I've been trying to solve a problem with embedding Google Maps
> > fullscreen on a website, but making it scale in height.
>
> > To put it simple, I want Google Maps to display full-screen, but I
> > have a 25px header I want to show above it.
> > Somehow, it's possible to make the map scale in width to 100% (like
> > the example
> > ofhttp://groups.google.com/group/Google-Maps-API/browse_thread/thread/b...)
> > but I can't make it do the same in height. I always end up with a
> > scrollbar on the right. And if I hide the scrollbar, then the Google
> > logo isn't visible anymore so that's a no-go aswell.
>
> > Has anyone else had this problem?
> > My current test page is over here:http://www.noxious.org/test_maps.html
>
> > Thanks in advance!
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Google Maps API" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/Google-Maps-API?hl=en
-~----------~----~----~----~------~----~------~--~---
