Few things with html2canvas are not predictable: Below is a screenshot of pdf map.

I am using html2canvas to take a screenshot of google map, and then putting it on pdf by using php.

• sometimes html2canvas will display a grayish faded rectangular shape close to the center (in the image below the shape is to the right of DV-2 marker). Sometimes it is there, sometimes it it is not, inconsistent on all modern browsers.
• Most of the times one or more markers will not have label displayed. In image below the blue marker to the right does not have marker.

On the map, before taking the screenshot, the gray shape is not there and all markers have label visible.

Any thoughts / suggestions why it is happening? Like I mentioned earlier, it is unpredictable, sometimes that shape does not show up and sometimes all marker labels are visible.

I notice that the markers without label are put on the map first (when I console.log()). It is happening in html2canvas not after. Below is the vue.js method which grabs the screenshot.

genAndSubmit() {
            let xCrop = (this.dimensions.vw - this.dimensions.pw) / 2
            this.form.processing = true;
            html2canvas(document.querySelector("#mapWrapper"),
                {
                    useCORS: true,
                    logging: true,
                    width: this.dimensions.pw,
                    x: xCrop,
                    // allowTaint: true,
                    // foreignObjectRendering: true,
                    // imageTimeout: 30000,
                    // scale: 2,
                })
                .then(canvas => {
                    this.form.image = canvas.toDataURL('image/png');
                    this.submit();
                });
        },