Incorrect canvas export

Question

I have a webpage with a google map and some dynamically AJAX-generated markers. I was interested in having the ability to export the map as a PNG.

I looked here on stackoverflow and found a solution, which works (Save current Google Map as image) , using http://html2canvas.hertzen.com/.

Unfortunately after a few tries I realized it is not acutally working correctly. The problem is, that if I load some points and then try to export the map, it somehow ignores the new map bounds and the whole map is shifted, meaning the points on the picture are in wrong positions.

Best would be to provide a link so that you can see what I mean. Unfortunately the page is in Czech, but I am sure you will be able to understand what to do.

So if you go here: http://meteopage.com/climate/climate_map.php, just load the page and the general map loads, then underneath it, there is a button "Stahnout" (Download in czech), if you press that, a message pops up that image will be generated and you will then get the image, which should be ok.

Now the problematic part. Go back to the page and select some continent from the menu and on the right, check the checkbox "jen hlavni mesta" (only capitals, so that it loads faster). Or in fact you can use the filter to filter out any points. Then click the button "Zobrazit" (Display). The points are then generated asynchroniously and shown on the map. But... when you now try to download the map, the image is generated but look carefully and compare the original map with the generated image and you will see that it is shifted, the points are in the right position within the canvas, but the map is shifted so it doesnt match...

function addMyMarker(file) {
    $.ajax({
        dataType: "json",
        url: file,
        success: function (json) {
            markerstoadd(json);
        },
    });
}

function markerstoadd(json) {
    var infoWindow = new google.maps.InfoWindow(),
        marker, i;
    removeMarkers();
    var bounds = new google.maps.LatLngBounds();
    stats = json[json.length - 1].stats;
    $("#stats").html(stats);

    for (i = 0; i < json.length - 1; i++) {
        var position = new google.maps.LatLng(json[i].lat, json[i].lon);
        bounds.extend(position);
        label_text = json[i].content;
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: json[i].content,
            label: label_text,
            icon: {
                path: google.maps.SymbolPath.CIRCLE,
                scale: eval(json[i].size),
                fillOpacity: 0.8,
                fillColor: json[i].color,
                strokeOpacity: 0.7,
                strokeColor: '#FFFFFF',
                strokeWeight: 1,
            },
        });
        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                infobox.open(map, marker);
                longitude = json[i].lon;
                latitude = json[i].lat;...
                infobox.setContent(content);
                map.panTo(marker.getPosition());
            }
        })(marker, i));
        gmarkers.push(marker);
    }
    map.fitBounds(bounds);
    var zoom = map.getZoom();
    map.setZoom(zoom > 8 ? 8 : zoom);
}

function removeMarkers() {
    for (i = 0; i < gmarkers.length; i++) {
        gmarkers[i].setMap(null);
        if (typeof (gmarkers[i].label) != "undefined") {
            gmarkers[i].label.setMap(null);
        }
    }
}

And then for the export to canvas I use this function:

function savemap() {
    map.set('disableDefaultUI', true);
    var element = $("#google_map");
    html2canvas(element, {
        useCORS: true,
        onrendered: function (canvas) {
            var dataUrl = canvas.toDataURL("image/png");
            window.open(dataUrl, 'PNG');
            map.set('disableDefaultUI', false);
        }
    });
}