Google Maps Offset After Render

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;

[vinnygambiny]

I have done with this

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

[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, }); }