Chrome won't print custom google map (which is inside a div)
My Chrome version is 18.0.1025.142 m.
I have used the JS API to create a Google Map , but part of the map will not show in the Chrome Print preview or actually print on paper.
Then I tried to shrink the map . The content now fits neatly into one page and is displayed in the preview for IE, FF, and Opera. Therefore, size is not an issue.
Do I have some kind of unorthodox HTML or JS? Is there a way to rewrite the page (maybe add the correct CSS) so that it prints in Chrome? Ignoring most of the JS, which doesn't matter here 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>
+3
source to share