My Chrome version is 18.0.1025.142 m.
I used the JS API to make this Google Map, but the map portion won’t display in Chrome’s Print Preview or actually print on paper.
Then I tried to shrink the map. Now, the contents clearly fit in one page, and show up in the print preview for IE, FF, and Opera. So size isn’t the problem.
Do I have any unorthodox HTML or JS? Is there a way to rewrite the page (add the right CSS, maybe) so it will print in Chrome? Ignoring most of the JS, which is irrelevant here, this is what I wrote (the map_canvas div displays the map)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 67%; width: 30% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
...
function initialize() {
geocoder = new google.maps.Geocoder();
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
...
</script>
</head>
<body>
<div id="menu">
<b>address:</b>
<input id="text_address" type="text" size="60" onkeyup="checkReturn(event)">
<input id="check_sp" type="checkbox" checked="checked">SP
<input type="button" value="clear" onclick="document.getElementById('text_address').value=''; document.getElementById('text_address').focus()">
<input id="button3" type="button" value="clear markers" onclick="clearMarkers()">
</div>
<div id="map_canvas">
</div>
</body>
</html>
Well, it seems that the printing is working when the fits the page. Thus, reduce it to the size that it would fit A4 page quite well and you’re good 🙂 Here you are: