Html2canvas: Google Maps Offset After Render

[blueBounder]

version: html2canvas v1.0.0-alpha.12
tested browsers: chrome, ff, safari

I've been struggling to find a solution to a seeming rendering bug where google maps will render "offset". This happens if the map is panned, zoomed, or just not touched whatsoever. In the below screenshot, you see the border that should contain the entirety of the map, but after rendering it always shifts to this position (or higher, vertically if panned).

I've seen (and tried) suggestions found of SO regarding calculating the transform but it seems gmaps v3 does things differently as the transform values given are always "none".

Any insight into what might be causing this issues would be awesome.
I'm not doing anything special I don't believe, but here's the applicable code and a screenshot:

html2canvas(document.getElementById("capture"), { useCORS: true, imageTimeout: 30000 }).then(function(canvas) { //do other UI related stuff return false;

[lordgreg]

Hi @blueBounder, have you found the issue for the bug you're having?

[blueBounder]

@lordgreg I never did find a fix for this issue- I wound up working around it.
If you're interested in the workaround, it is basically this:

1) Before calling html2canvas, convert the dynamic google map to a static map by using the google maps static API. In my case I needed to include custom icons, directions lines, and custom map styles, which are all doable by modifying the request URL sent to google map static API. https://developers.google.com/maps/documentation/maps-static/intro#Usage for examples on how to do this.
2) After you get a response back from the static maps API, replace the contents of your mapDiv with the static map image. Note- I ran into another html2canvas issue with using overflow: hidden (as google maps static return sset sizes of maps and I wanted a specific size- try setting the returned image as background in css if this is your case.
3) call html2canvas with the static image instead of dynamic and it should work fine (and faster).

I'd still be interested in knowing what the actual fix for this is- I imagine it has to do with some kind of transform but I couldn't find anything that was using transform in my dynamic google maps.

[lordgreg]

Thank you for your response @blueBounder. As I was occupied working around this issue, I did exactly the same thing. I used Static API by Google Maps. None of the css hacks or transformations helped me get around the issue. I hope the author finds a time to look into the issue.

Regards and good luck :)

[vinnygambiny]

I have done with this

html2canvas($('.gm-style>div:first')[0], {
useCORS: true, imageTimeout: 30000}).then(function (canvas) { });

[blueBounder]

thanks for the reply @vinnygambiny but that only targets the map itself, not the surrounding content which is what I'm after. We wound up not being satisfied with the results of the static map workaround as it has limitations like not being able to render polylines, infowindows, etc that are drawn to the dynamic map.

Still looking/hoping for a solution to this shifting issue- as far as I can tell

[blueBounder]

This is a duplicate of several other issues on here regarding css3 transform. I ran into a silly issue due to having multiple maps on the same page, just need to use the following and make sure you select the correct map:

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