0

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: enter image description here

but printed like that: enter image description here

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!

P. Moloney
  • 721
  • 8
  • 22
devBre
  • 13
  • 2

2 Answers2

1

I was going through the similar issue throughout today. Finally, I got it working using the following approach. 

       var transform = $(".gstyle>div:first>div:first>div:last>div").css("transform")
       var comp = transform.split(",") //split up the transform matrix
       var mapleft = parseFloat(comp[4]) //get left value
       var maptop = parseFloat(comp[5])  //get top value
       $(".gm-style>div:first>div:first>div:last>div").css({ 
            "transform": "none",
            "left": mapleft,
            "top": maptop,
        });

           //In previous versions, mapId was enough,
           //but for 3.33 version I had to append .gm-style>div:first in selector

            html2canvas($(mapId+' .gm-style>div:first')[0], {useCORS: true}).then(function(canvas) {
            var imgSrc= canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
            console.log(imgSrc); 
            //it now captures polyline as well
            });
nirazlatu
  • 983
  • 8
  • 18
0

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,
});
myles
  • 18
  • 6