Can't capture the content of the google-maps's 'infowindow' with html2canvas

user_11727733 0
Viewed 235

I have a problem when capture google maps with html2canvas.

When I select a place, google maps shows an infowindow with information about this place, but when I capture the map in the print only a white rectangle appears.

You can see this problem when you select any place in this example and you save the map in png

http://jsfiddle.net/Lindow/60yn2hss/

<script>
$(function() { 
    $("#btnSave").click(function() { 
            $("#img-out").children().remove();
        html2canvas($("#map"), {
            useCORS: true,
            onrendered: function(canvas) {
                theCanvas = canvas;
                document.body.appendChild(canvas);
                $("#img-out").append(canvas);
            }
        });
    });
}); 

var map = new GMaps({
    div: '#map',
    lat: -12.043333,
    lng: -77.028333
    });
</script>

<style>
#map {
  width:300px;
  height:300px;
}

.elements {
  display:inline-block;
}
</style>

<input type="button" id="btnSave" value="Save PNG"/>
<hr>
<div class="elements" id="map"></div>
<div class="elements" id="img-out"></div>

This example worked three months ago.

Any idea?

Thanks in advance

html2canvas google-maps
1 Answers

I found the error, I need to use attribute of html2canvas "use Overflow: false"

html2canvas($("#map"), {
                useCORS: true,
                useOverflow: false,
                onrendered: function(canvas) {
                    theCanvas = canvas;
                    document.body.appendChild(canvas);
                    $("#img-out").append(canvas);
                }
            });
user_117277330
Related