Printing page with multiple embedded Google Maps in WebKit produces tile errors

Question

Printing the following example page in either Chrome or Safari on Mac (i.e., WebKit) produces misplaced map tiles in the printed output from the second map onwards. It works on the webpage itself, and printing it does also seem to work in Firefox. Need it to work in Chrome or Safari, though.

Example page: http://matsch.binaervarianz.de/tmp/print_entries.html
Print-to-PDF output of the page: http://matsch.binaervarianz.de/tmp/print_entries.pdf

(See, e.g., the displacement of road US421 on page 2 onwards.)

It looks like a caching problem that only affects printing. But clearing the cache or private/incognito browsing doesn't solve the issue.

While in the example all map sections are the same are, the problem also occurs with different maps (e.g., try panning and zooming in the example).

I'm OK with a partial solution where I can get it to work in my own browser -- i.e., it does not have to work for everyone, but it must be Webkit (Safari or Chrome). Can't use Firefox for this...

Bonus points if this works for everyone.

Here is some code how maps are initialized. More in the example page above.

// first map
var snippets = [];
snippets.push({
  snippet_approx_location_lat: "",
  snippet_approx_location_long: "",
  snippet_location_lat: "39.9510463",
  snippet_location_long: "-86.2288448"
});

var mapData_2899_1 = {
  snippets: snippets,
  entry_approx_location_lat: "",
  entry_approx_location_long: ""
};

showMap(mapData_2899_1, "2899_1");

// second map
snippets = [];
snippets.push({
  snippet_approx_location_lat: "",
  snippet_approx_location_long: "",
  snippet_location_lat: "39.9510639",
  snippet_location_long: "-86.2287998"
});
snippets.push({
  snippet_approx_location_lat: "",
  snippet_approx_location_long: "",
  snippet_location_lat: "39.9510739",
  snippet_location_long: "-86.2288998"
});

var mapData_2899_3 = {
  snippets: snippets,
  entry_approx_location_lat: "",
  entry_approx_location_long: ""
};

showMap(mapData_2899_3, "2899_3");

// show map function
function showMap(d, primKey) {
  $( '#map-' + primKey ).addClass('map-canvas');

  var mapOptions = {
    center: { lat: 39.9513164, lng: -86.2274201 },
    streetViewControl: false, zoom: 12,
    disableDefaultUI: true
  };
  var map = new google.maps.Map(document.getElementById('map-' + primKey), mapOptions);

  $.each(d.snippets, function( i, snippet ) {

    // location when snippet was recorded
    if (snippet.snippet_location_lat !== "" && snippet.snippet_location_long !== "") {
      var snippetLoc = new google.maps.LatLng(
        p(snippet.snippet_location_lat),
        p(snippet.snippet_location_long)
      );
      var marker = new google.maps.Marker({ position: snippetLoc, map: map });
    }

    // approximate location taking into account how long ago the event reportadly took place
    if (snippet.snippet_approx_location_lat !== "") {
      var snippetApproxLocation = new google.maps.LatLng(
        p(snippet.snippet_approx_location_lat),
        p(snippet.snippet_approx_location_long)
      );
      var marker2 = new google.maps.Marker({
        position: snippetApproxLocation,
        map: map,
        icon: 'https://maps.google.com/mapfiles/ms/icons/blue-dot.png'
      });
    }
  });

  // approximate location at corrected time from diary entry
  if (d.entry_approx_location_lat !== "") {
    var entryApproxLocation = new google.maps.LatLng(
      p(d.entry_approx_location_lat),
      p(d.entry_approx_location_long)
    );
    var marker3 = new google.maps.Marker({
      position: entryApproxLocation,
      map: map,
      icon: 'https://maps.google.com/mapfiles/ms/icons/yellow-dot.png'
    });
  }
}

function p( string ) {
  if (string === null)
    return "";
  else
    return string;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDO_bHfTaLLr2Ugghz1hQ2QIZdRaa0SKX0"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<style type="text/css">
.map-canvas {
    width: 325px;
    height: 325px;
    float: right;
    margin: 5px;
}
</style>

<div id="map-2899_1" class="map-canvas"></div><br><br>
<div id="map-2899_3" class="map-canvas"></div>

Answer 1

I found workaround for what I think is a bug in WebKit. Since caching of map tiles didn't seem to be the problem, I started playing around with CSS display and position properties.

Adding display:inline-block; to my .map_canvas seems to solve the problems in the printout… The tiles are now all correct. display:inline; alone doesn't have the same effect; and I don't know why inline-block solves the problem.

(Since in my particular case I wanted the map to float:right; I had to put a wrapper around the .map_canvas div. So, .map_canvas has the display:inline-block; and the .map-container has float:right;.)

So, it seems, in WebKit, print support for multiple maps on a page is either buggy, or I'm not understanding it fully.

Here, now, is the working example page: http://matsch.binaervarianz.de/tmp/print_entries-solution.html And this is the Print-to-PDF output of that page: http://matsch.binaervarianz.de/tmp/print_entries-solution.pdf

Here's the working code (only the HTML/CSS has changed):

// first map
var snippets = [];
snippets.push({
  snippet_approx_location_lat: "",
  snippet_approx_location_long: "",
  snippet_location_lat: "39.9510463",
  snippet_location_long: "-86.2288448"
});

var mapData_2899_1 = {
  snippets: snippets,
  entry_approx_location_lat: "",
  entry_approx_location_long: ""
};

showMap(mapData_2899_1, "2899_1");

// second map
snippets = [];
snippets.push({
  snippet_approx_location_lat: "",
  snippet_approx_location_long: "",
  snippet_location_lat: "39.9510639",
  snippet_location_long: "-86.2287998"
});
snippets.push({
  snippet_approx_location_lat: "",
  snippet_approx_location_long: "",
  snippet_location_lat: "39.9510739",
  snippet_location_long: "-86.2288998"
});

var mapData_2899_3 = {
  snippets: snippets,
  entry_approx_location_lat: "",
  entry_approx_location_long: ""
};

showMap(mapData_2899_3, "2899_3");

// show map function
function showMap(d, primKey) {
  $( '#map-' + primKey ).addClass('map-canvas');

  var mapOptions = {
    center: { lat: 39.9513164, lng: -86.2274201 },
    streetViewControl: false, zoom: 12,
    disableDefaultUI: true
  };
  var map = new google.maps.Map(document.getElementById('map-' + primKey), mapOptions);

  $.each(d.snippets, function( i, snippet ) {

    // location when snippet was recorded
    if (snippet.snippet_location_lat !== "" && snippet.snippet_location_long !== "") {
      var snippetLoc = new google.maps.LatLng(
        p(snippet.snippet_location_lat),
        p(snippet.snippet_location_long)
      );
      var marker = new google.maps.Marker({ position: snippetLoc, map: map });
    }

    // approximate location taking into account how long ago the event reportedly took place
    if (snippet.snippet_approx_location_lat !== "") {
      var snippetApproxLocation = new google.maps.LatLng(
        p(snippet.snippet_approx_location_lat),
        p(snippet.snippet_approx_location_long)
      );
      var marker2 = new google.maps.Marker({
        position: snippetApproxLocation,
        map: map,
        icon: 'https://maps.google.com/mapfiles/ms/icons/blue-dot.png'
      });
    }
  });

  // approximate location at corrected time from diary entry
  if (d.entry_approx_location_lat !== "") {
    var entryApproxLocation = new google.maps.LatLng(
      p(d.entry_approx_location_lat),
      p(d.entry_approx_location_long)
    );
    var marker3 = new google.maps.Marker({
      position: entryApproxLocation,
      map: map,
      icon: 'https://maps.google.com/mapfiles/ms/icons/yellow-dot.png'
    });
  }
}

function p( string ) {
  if (string === null)
    return "";
  else
    return string;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDO_bHfTaLLr2Ugghz1hQ2QIZdRaa0SKX0"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<style type="text/css">
.map-container {
    float: right;
    margin-left: 5px;
}

.map-canvas {
    width: 325px;
    height: 325px;
    display: inline-block;
}
</style>

<div class="map-container">
    <div id="map-2899_1" class="map-canvas"></div>
</div>
<br><br>
<div class="map-container">
    <div id="map-2899_3" class="map-canvas"></div>
</div>