html2canvas does not work with Google Maps Pan
After a Google Maps update the solution of mfirdaus stop working, the new solution is this:
var transform = $(".gm-style>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({ //get the map container. not sure if stable
"transform": "none",
"left": mapleft,
"top": maptop,
})
is the same but u need to change de selector from
.gm-style>div:first>div
to
.gm-style>div:first>div:first>div:last>div
Hands up ð
In my case i just allowed Cross Origin Resource Sharing (CORS) in the html2Canvas configuration and it worked for me.
useCORS:true,
For more info you can refer to the html2Canvas Documentation: http://html2canvas.hertzen.com/configuration
Apparently, the problem seems to stem from html2canvas
not being able to render css transforms, at least in chrome (I could only reproduce the problem in chrome, on OSX). The container that holds the tiles, is translated using -webkit-transform
. So what we could do is to grab the values that the container is shifted, remove the transform, assign left
and top
from the values we got off transform
then use html2canvas
. Then so the map doesn't break, we reset the map's css values when html2canvas
is done.
So I pasted this into the javascript console at your site and at it seemed to work
//get transform value
var transform=$(".gm-style>div:first>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").css({ //get the map container. not sure if stable
"transform":"none",
"left":mapleft,
"top":maptop,
})
html2canvas($('#map-canvas'),
{
useCORS: true,
onrendered: function(canvas)
{
var dataUrl= canvas.toDataURL('image/png');
location.href=dataUrl //for testing I never get window.open to work
$(".gm-style>div:first>div").css({
left:0,
top:0,
"transform":transform
})
}
});
I have the same problem, but I used Leaflet Map instead of Google Map.
The code is below
var transform=$(".leaflet-map-pane").css("transform");
if (transform) {
var c = transform.split(",");
var d = parseFloat(c[4]);
var h = parseFloat(c[5]);
$(".leaflet-map-pane").css({
"transform": "none",
"left": d,
"top": h
})
}
html2canvas(document.body).then(function(canvas){
$(".leaflet-map-pane").css({
left: 0,
top: 0,
"transform": transform
})
}
// Here is used html2canvas 1.0.0-alpha.9