Html2Canvas and google maps api v3.33 polylines do not appear in image

Question

I am trying to export a google map that includes a route (using polylines) to an image, but in the result the line does not appear. With some css transformation, it worked fine with the google maps api v3.31, but since this version is no longer available after August I need to use v3.33. And in this case the polyline just disappears in the printed image. Other components do appear in the result however.

The map looks like that:

but printed like that:

I could reproduce the problem in the following sample:

function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
        zoom: 7,
        center: new google.maps.LatLng(53.140665, 8.805315),
        mapTypeId: 'roadmap'
    });

    var routeCoordinates = [
        {lat: 52.593534, lng: 7.327996},
        {lat: 52.701129, lng: 7.692394},
        {lat: 52.459662, lng: 8.264844},
        {lat: 52.697619, lng: 8.705006},
        {lat: 52.297608, lng: 9.225077}
    ];
    var routePath = new google.maps.Polyline({
        map: map,
        path: routeCoordinates,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
    });
    //console.log('routePath=' + routePath.getPath().getArray());
    routePath.setMap(map);
}

Using the following options in html2canvas:

var options = {
    useCORS: true,
    allowTaint: false
};

And applying the following transformation:

var mapNodes = '.gm-style>div:first>div:first>div:last>div';
var transformer = $(mapNodes).css('transform');
var comp = transformer.split(',');
var mapLeft = parseFloat(comp[4]);
var mapTop = parseFloat(comp[5]);
$(mapNodes).css({
    'transform': 'none',
    'left': mapLeft,
    'top': mapTop
});

Tested (among others) in:

• html2canvas: html2canvas 1.0.0-alpha.12
• Browser & version: Firefox Quantum 60.0.2 (64-bit)
• Operating system: Win 7
• Google maps api: v3.33 (v3.32 has also the same issue)

Any hint what might be the problem there?

Thank you!

Answer 1

I answered the issue on the html2canvas repository too, but here's what I've found:

This is not a polyline issue. It's a derivative of the highly documented css transformation issue. The problem is that your polyline is on part of the map that without a transformation, will be cut off.

This selector .gm-style>div:first>div:first>div:last>div is for the Google map tile layer.

This drawing overlay tile layer which shows your polygons and polylines is in a different div. If you use your browser's inspector tool, you'll see other divs in .gm-style>div:first>div:first. Once you find other divs with a transform css component, you can start troubleshooting which div is the correct one.

You'll have to do the transform on each div that needs a transformation. For my project, the drawing layer was in '.gm-style>div:first>div:first>div:nth-child(2)>div:first>div.

var transform=$(".gm-style>div:first>div:first>div:last>div").css("transform");
var comp=transform.split(",");
var mapleft=parseFloat(comp[4]);
var maptop=parseFloat(comp[5]);
$(".gm-style>div:first>div:first>div:last>div").css({
  "transform":"none",
  "left":mapleft,
  "top":maptop,
});
$(".gm-style>div:first>div:first>div:nth-child(2)>div:first>div").css({
  "transform":"none",
  "left":mapleft,
  "top":maptop,
});