Google Map not shown when printing

问题

I was trying to implement a easy route planning with Google maps API for an internal site. I came up with the following:

http://jsfiddle.net/Hn7U8/6/ (If your window is too small, you might not see the map)

Full html code:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Map</title>
    <style>
      html, body, #map-canvas{
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <style>
      #directions-panel {
        height: 100%;
        float: right;
        width: 390px;
        overflow: auto;
      }

      #map-canvas {
        margin-right: 400px;
      }

      #control {
        background: #fff;
        padding: 5px;
        font-size: 14px;
        font-family: Arial;
        border: 1px solid #ccc;
        box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
        display: none;
      }

      @media print {
        #map-canvas {
          height: 500px;
          margin: 0;
        }

        #directions-panel {
          float: none;
          width: auto;
        }
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var mapOptions = {
    zoom: 14,
    center: new google.maps.LatLng(48.1448, 11.5580)
  };
  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
  directionsDisplay.setMap(map);
  directionsDisplay.setPanel(document.getElementById('directions-panel'));

  var control = document.getElementById('control');
  control.style.display = 'block';
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);
}

function calcRoute() {
  var start;
  if((start = document.getElementById('origin').value) == ""){
    start = "Bayerstraße 28, München";
  }
  var selectedMode = document.getElementById('mode').value;
  var end = 'Riesstraße, München';
  var request = {
    origin: start,
    destination: end,
    travelMode: google.maps.TravelMode[selectedMode]
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body onload="calcRoute();">
    <div id="control">
    <b>Start-Adresse:</b>
    <form action="javascript:void(0);" onsubmit="calcRoute();">
        <input type="text" id="origin"  placeholder="Adresse, Stadt">
    </form>
    <b>Reiseart: </b>
    <select id="mode" onchange="calcRoute();">
      <option value="DRIVING">Auto</option>
      <option value="WALKING">Laufen</option>
      <option value="BICYCLING">Fahrrad</option>
      <option value="TRANSIT" selected>Öffentlich</option>
    </select>
    </div>
    <div id="directions-panel"></div>
    <div id="map-canvas"></div>
  </body>
</html>

Everything works as I wanted it to. If you insert

street, country/city

e.g.

Bayerstraße 28, München

With the slider you can adjust the way you travel (Walking, going by car, ...)

It displays it on the map and shows the additional route information (time, distance, ...) on the right.

However when you try to print/preview the page (I am not sure how good that's reproducible using jsfiddle) map is not shown and you only see some grey (empty) field that looks like the background of quotes here on SO. The additional information are printed/shown correctly.

What causes this printing problem?

I tried messing with the CSS a bit, because I thought that might be the problem but I did not manage to solve the problem.

回答1:

To solve this you can add the following code in your css sheet:

img { 
    max-width: none !important; 
}

来源：https://stackoverflow.com/questions/20611182/google-map-not-shown-when-printing

标签

javascript

css

google-maps

printing