html2canvas is not working properly while taking snap of a div containing gmap (Google Map)

Question

I'm am converting a div containing google map inside to image but it is not showing as it was.

I'm using angular4.

My original image was as follows:

but after converting with html2canvas shows as follows:

My code for conversion is as follows:

html2Cnv(){
    let self = this;
    let mycnvHtml: HTMLVideoElement = self.mycnvHtml.nativeElement;
    html2canvas(mycnvHtml, {
      onrendered: function(canvas1) {
        canvas1.toBlob((blob: Blob)=>{
          let file = new File([blob], 'msr-' + (new Date).toISOString().replace(/:|\./g, '-') + '.webm', {
            type: 'image/png'
          });
          self.fileShare.addFile(file);
          self.onDone.emit(file);
        }, "image/png");
      }
    });
  }

Answer 1

In place of converting div containing google map to canvas I followed following steps and I reached closed to my requirement except it didn't gave route

Original div After Conversion

1. Get URL of Map

   getCordDistance() { let radlat1 = Math.PI * this.locStart.lat/180; let radlat2 = Math.PI * this.locEnd.lat/180; let theta = this.locStart.lng-this.locEnd.lng; let radtheta = Math.PI * theta/180; let dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta); dist = Math.acos(dist); dist = dist * 180/Math.PI; dist = dist * 60 * 1.1515; /*if (unit=="K") { dist = dist * 1.609344 } if (unit=="N") { dist = dist * 0.8684 }*/ return dist }

   getImgUrl(cll){ let dist=this.getCordDistance(); let comn={ lat:((this.locStart.lat+this.locEnd.lat)/2), lng:((this.locStart.lng+this.locEnd.lng)/2) }; try { let ppp=document.getElementById('map456'); this.dynamicImg='https://maps.googleapis.com/maps/api/staticmap?' + 'center=' +comn.lat+','+comn.lng + '&zoom='+(dist<1?15:dist>1800?3:dist>900?4:this.mapRef.getZoom())+ '&size='+ppp.offsetWidth+'x'+ppp.offsetHeight + '&maptype=roadmap'+ '&markers=color:blue%7Clabel:S%7C'+this.locStart.lat+','+this.locStart.lng + '&markers=color:red%7Clabel:C%7C'+this.locEnd.lat+','+this.locEnd.lng + '&key=myKey'; }catch(er){console.log(er)} if(cll){ cll() } }

2. Do an ajax request to get image blob if you just need image of map

   html2Cnv(){ let self = this; this.getImgUrl(()=>{ let oReq = new XMLHttpRequest(); oReq.open("GET", this.dynamicImg, true); oReq.responseType = "arraybuffer"; oReq.onload =(oEvent)=>{ let blob = new Blob([oReq.response], {type: "image/png"}); let file = new File([blob], 'msr-' + (new Date).toISOString().replace(/:|\./g, '-') + '.webm', { type: 'image/png' }); self.fileShare.addFile(file); self.onDone.emit(file); }; oReq.send(); }); }

3. Else create a duplicate content same as the div we want to take screenshot but in place of google map create an img tag with src as found in first step

   html2Cnv(){ let self = this; this.getImgUrl(()=>{ html2canvas(this.canvas1, { onrendered: function(canvas1) { canvas1.toBlob((blob: Blob)=>{ let file = new File([blob], 'msr-' + (new Date).toISOString().replace(/:|\./g, '-') + '.webm', { type: 'image/png' }); self.fileShare.addFile(file); self.onDone.emit(file); }, "image/png"); } }); }) }