Center and bounds of map are incorrect if map_canvas isn't a fixed size
746 views
Skip to first unread message
hildenl
Nov 6, 2009, 1:24:21 PM11/6/09
to Google Maps JavaScript API v3
How do I display a map anchored to the bottom of the browser with a
fixed header at the top and still get a map that's centered
properly? I've tried wrapping a div around the map_canvas div with a
relative outer div and specifying the map_canvas div as absolute
(something like this):
<div id="outterdiv" style="width: 100%; height: 100%: position:
relative">
<div id="map_canvas" style="width: 100%; height: 100%; position:
absolute: bottom: 0;"></div>
</div>
but that doesn't work. The map is not centered correctly and the
bounds are off. I've tried inserting the map_canvas div inside a
table cell and that doesn't work either (see below).
Someone else ran into this same issue with not being able to get the
wrapping div approach to work and suggested inserting the map_canvas
into a table cell.
http://code.google.com/p/gmaps-api-issues/issues/detail?id=1413
That works as long as the map_canvas is a fixed length (e.g. 300px).
If you want the map_canvas to expand with the browser by setting the
height to %100, both the center and bounds of the map are displayed
incorrectly.
There are other posts that are complaining about this issue, but
they've been dismissed either because it was a V2 issue:
http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/b8780bbddae0bca1/22fd6e2e0edaf0d0?lnk=gst&q=center#22fd6e2e0edaf0d0)
or it was an issue with displaying in a hidden tab:
http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/ff5df89d4eae127d/d8e0a021618ce9cb?lnk=gst&q=center#d8e0a021618ce9cb
but I'm starting to wonder if this is a legitimate issue with how the
map_canvas is rendered or just my inexperience with HTML/CSS. Can
someone help me out?
Here's some sample code that exhibits this behavior. Notice that the
marker is not centered and if you drag the map, you'll see that the
map's SW bounds are way off:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html>
<head>
<style>
html, body {width: 100%; height: 100%; margin: 0px; padding:
0px; border: 0px; overflow: hidden;}
#top {height: 200px; width: 100%;}
#map_table {width: 100%; height: 100%;}
#map_canvas {width: 100%; height: 100%;}
</style>
<meta name="viewport" content="initial-scale=1.0, user-
scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/
api/js?sensor=false"></script>
<script type="text/javascript">
var center = null,
isDragging = false,
map = null,
bounds = null;
function addBounds() {
if (bounds !== null) {
bounds.setMap(null);
}
var sw = map.getBounds().getSouthWest(),
ne = map.getBounds().getNorthEast(),
nw = new google.maps.LatLng(ne.lat(), sw.lng()),
se = new google.maps.LatLng(sw.lat(), ne.lng()),
boundary = [nw,ne,se,sw,nw];
bounds = new google.maps.Polyline({path: boundary});
bounds.setMap(map);
}
function addMarkers() {
if (center !== null) {
center.setMap(null);
}
center = new google.maps.Marker( {
title : map.getCenter().toUrlValue(),
position : map.getCenter()
});
center.setMap(map);
}
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644),
myOptions = {
zoom : 8,
center : latlng,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById
("map_canvas"), myOptions);
google.maps.event.addListener(map, "dragstart", function()
{
if (window.console) {
console.log("drag start");
}
isDragging = true;
});
google.maps.event.addListener(map, "dragend", function() {
if (window.console) {
console.log("drag end");
}
isDragging = false;
addMarkers();
addBounds();
});
google.maps.event.addListener(map, "bounds_changed",
function() {
if (window.console) {
console.log("bounds_changed");
}
if (!isDragging) {
addMarkers();
addBounds();
}
});
}
</script>
</head>
<body onload="initialize()">
<div id="top">Header</div>
<table id="map_table">
<tr>
<td style="height: 100%;">
<div id="map_canvas"></div>
</td>
</tr>
</table>
</body>
</html>
fixed header at the top and still get a map that's centered
properly? I've tried wrapping a div around the map_canvas div with a
relative outer div and specifying the map_canvas div as absolute
(something like this):
<div id="outterdiv" style="width: 100%; height: 100%: position:
relative">
<div id="map_canvas" style="width: 100%; height: 100%; position:
absolute: bottom: 0;"></div>
</div>
but that doesn't work. The map is not centered correctly and the
bounds are off. I've tried inserting the map_canvas div inside a
table cell and that doesn't work either (see below).
Someone else ran into this same issue with not being able to get the
wrapping div approach to work and suggested inserting the map_canvas
into a table cell.
http://code.google.com/p/gmaps-api-issues/issues/detail?id=1413
That works as long as the map_canvas is a fixed length (e.g. 300px).
If you want the map_canvas to expand with the browser by setting the
height to %100, both the center and bounds of the map are displayed
incorrectly.
There are other posts that are complaining about this issue, but
they've been dismissed either because it was a V2 issue:
http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/b8780bbddae0bca1/22fd6e2e0edaf0d0?lnk=gst&q=center#22fd6e2e0edaf0d0)
or it was an issue with displaying in a hidden tab:
http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/ff5df89d4eae127d/d8e0a021618ce9cb?lnk=gst&q=center#d8e0a021618ce9cb
but I'm starting to wonder if this is a legitimate issue with how the
map_canvas is rendered or just my inexperience with HTML/CSS. Can
someone help me out?
Here's some sample code that exhibits this behavior. Notice that the
marker is not centered and if you drag the map, you'll see that the
map's SW bounds are way off:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html>
<head>
<style>
html, body {width: 100%; height: 100%; margin: 0px; padding:
0px; border: 0px; overflow: hidden;}
#top {height: 200px; width: 100%;}
#map_table {width: 100%; height: 100%;}
#map_canvas {width: 100%; height: 100%;}
</style>
<meta name="viewport" content="initial-scale=1.0, user-
scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/
api/js?sensor=false"></script>
<script type="text/javascript">
var center = null,
isDragging = false,
map = null,
bounds = null;
function addBounds() {
if (bounds !== null) {
bounds.setMap(null);
}
var sw = map.getBounds().getSouthWest(),
ne = map.getBounds().getNorthEast(),
nw = new google.maps.LatLng(ne.lat(), sw.lng()),
se = new google.maps.LatLng(sw.lat(), ne.lng()),
boundary = [nw,ne,se,sw,nw];
bounds = new google.maps.Polyline({path: boundary});
bounds.setMap(map);
}
function addMarkers() {
if (center !== null) {
center.setMap(null);
}
center = new google.maps.Marker( {
title : map.getCenter().toUrlValue(),
position : map.getCenter()
});
center.setMap(map);
}
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644),
myOptions = {
zoom : 8,
center : latlng,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById
("map_canvas"), myOptions);
google.maps.event.addListener(map, "dragstart", function()
{
if (window.console) {
console.log("drag start");
}
isDragging = true;
});
google.maps.event.addListener(map, "dragend", function() {
if (window.console) {
console.log("drag end");
}
isDragging = false;
addMarkers();
addBounds();
});
google.maps.event.addListener(map, "bounds_changed",
function() {
if (window.console) {
console.log("bounds_changed");
}
if (!isDragging) {
addMarkers();
addBounds();
}
});
}
</script>
</head>
<body onload="initialize()">
<div id="top">Header</div>
<table id="map_table">
<tr>
<td style="height: 100%;">
<div id="map_canvas"></div>
</td>
</tr>
</table>
</body>
</html>
hildenl
Nov 6, 2009, 3:01:58 PM11/6/09
to Google Maps JavaScript API v3
hildenl
Nov 11, 2009, 11:40:00 AM11/11/09
to Google Maps JavaScript API v3
Susannah (Google Employee)
Nov 11, 2009, 4:01:23 PM11/11/09
to Google Maps JavaScript API v3
When setting the height of the map's td to 100%, the map_canvas's
height is actually 100% of the screen size. It is not using 100% -
200px, as you are expecting. You'll notice that the margin does not
appear at the bottom of the page as it does on the left and right
because the div is extending past the bottom.
You'll need to find another CSS solution for making the map take up
all the vertical space except for 200px at the top. You can use
Firebug to examine the actual width/height of the div using the DOM
and Layout tabs to ensure that it is the size you expect.
The map's bounds and centers are correctly set according to the size
of the div.
Thanks,
Susannah
height is actually 100% of the screen size. It is not using 100% -
200px, as you are expecting. You'll notice that the margin does not
appear at the bottom of the page as it does on the left and right
because the div is extending past the bottom.
You'll need to find another CSS solution for making the map take up
all the vertical space except for 200px at the top. You can use
Firebug to examine the actual width/height of the div using the DOM
and Layout tabs to ensure that it is the size you expect.
The map's bounds and centers are correctly set according to the size
of the div.
Thanks,
Susannah
Dann (Google Employee)
Nov 18, 2009, 10:15:27 PM11/18/09
to Google Maps JavaScript API v3
Specifying height using relative values aren't cross-browser
compatible. Instead, you'll need to use a fixed value. To calculate
vertical height, I usually rely on HTMLElement.offsetHeight for most
things, which you can then set the map container's height to using
CSS.
For example:
document.getElementById('myMapContainer').style.height =
document.body.offsetHeight + 'px';
Hope that helps,
Dann
On Nov 11, 1:01 pm, "Susannah (Google Employee)"
compatible. Instead, you'll need to use a fixed value. To calculate
vertical height, I usually rely on HTMLElement.offsetHeight for most
things, which you can then set the map container's height to using
CSS.
For example:
document.getElementById('myMapContainer').style.height =
document.body.offsetHeight + 'px';
Hope that helps,
Dann
On Nov 11, 1:01 pm, "Susannah (Google Employee)"
Louis Hilden
Nov 20, 2009, 10:26:22 AM11/20/09
to google-map...@googlegroups.com
Thanks Dann, it helps indeed. That's exactly what I needed to solve this problem.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=.--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages