Google Map screen capture is not working for marker and marker cluster using html2canvas

Question

I am doing python project using flask where I used google map api to show the map in the project. I implement html2canvas script to capture the map successfully. But I hav

Answer 1

To save markers (workaround for html2canvas):

(Source#1) : http://humaan.com/custom-html-markers-google-maps/
(Source#2) : http://jsfiddle.net/BCr2B/99/

Its quick and quite simple to implement your own markers, which then circumvents the tainted problems.

function HTMLMarker(lat, lng, col) {
    this.lat = lat;
    this.lng = lng;
    this.col = col;
    this.pos = new google.maps.LatLng(lat, lng);
}

HTMLMarker.prototype = new google.maps.OverlayView();
HTMLMarker.prototype.onRemove = function() {}
HTMLMarker.prototype.onAdd = function() {}
HTMLMarker.prototype.draw = function() {
    var self = this;
    var div = this.div;

    if(!div) {
        div = this.div = document.createElement('div');
        div.className = 'marker';
        div.style.position = 'absolute';
        div.style.width = '32px';
        div.style.height = '32px';

        switch(this.col) {
            case "green":
                div.innerHTML = '';
                break;
            case "yellow":
                div.innerHTML = '';
                break;
            case "red":
                div.innerHTML = '';
                break;
        }

        var panes = this.getPanes();
        panes.overlayImage.appendChild(div);
    }


    var position = this.getProjection().fromLatLngToDivPixel(this.pos);
    div.style.left = position.x - 16 + "px";
    div.style.top = position.y - 32 + "px";
}

Then just add:

var htmlMarker = new HTMLMarker(data[gps].Latitude, data[gps].Longitude, "green");
markersArray.push(htmlMarker.setMap(map));

When you export in this way, the map markers are added successfully as they come from a local source.