html2canvas: Problem to generate the image of map (Google Maps)

Seems that in the new version of google maps transform is applied to the different div. Using @GCorbel’s solution but with this selector (“.gm-style>div:first>div:first>div:last>div”) seems to work. Though I haven’t yet tested it thoroughly.

    html2canvas($('.gm-style>div:eq(0)')[0],{
        useCORS: true,
        allowTaint: true,
        async:false,
    }).then(canvas => {document.body.appendChild(canvas)});

Fixed !

The fix for chrome I stupidly copy/pasted was not triggered.

I did this :

  if(window.chrome) {// Fix for Chrome
    var transform=$(".gm-style>div:first>div").css("transform");
    var comp=transform.split(","); //split up the transform matrix
    var mapleft=parseFloat(comp[4]); //get left value
    var maptop=parseFloat(comp[5]);  //get top value
    $(".gm-style>div:first>div").css({ //get the map container. not sure if stable
      "transform":"none",
      "left":mapleft,
      "top":maptop,
    });
  }

  html2canvas([$("#map > div.g-map-canvas > div > div > div:nth-child(1)")[0]], {
    logging: false,
    useCORS: true,
    onrendered: function (canvas) {
      $('#screenshot').after(canvas);

      if(window.chrome) {// Fix for Chrome
        $(".gm-style>div:first>div").css({
          left:0,
          top:0,
          "transform":transform
        });
      }
    }
  });

The very long selector in html2canvas is for have map without buttons and options.

I works now, thanks.

Looks like the latest version of google map (v3.32) released recently has a new experimental renderer. https://developers.google.com/maps/documentation/javascript/releases

This has broken the fix. I only did a quick testing, but it seems like now things are broken equally in all browsers (not just for Chrome), so hopefully that will make it easier to fix in the next version of html2canvas?

But a quick work-around would be to use the older version of gmap, where the fix would still be working fine.

@TGOlson It’s really problem with CSS3 transformations, because current release of html2canvas is able to render only “one level” of transformation - it doesn’t stack them. You can verify that problem is in transformations simply by playing with google maps - usually, screenshot like this is given: (In css, whole map is positioned correctly but after disabling css3, this happens) Only solution is to implement whole css3 transformations stack. I don’t know, if it’s in progress by Niklas, but someone should do it 😃

Hmm seems this problem is back for me, I have to pan the map to see the issue and when I pan and use Html2Canvas to get the screen grab, some areas show as blank grey?

@hseeda Thank you! Your selector was doing the trick for me!

Here’s my slightly modified selector that does work (at least for me, haha)

const div = document.querySelector('#map > div:first-of-type')

html2canvas(div, {})

However, now it’s cutting off the Google Logo which always has to show in order to comply with the terms and conditions 😦

Well well, I’ll just clone the node or something. I’ve been fighting this map for a while now 😄

This works for me:

$('#snapshot').on('click',function () {
	html2canvas(document.querySelector('.gm-style'), 
           {useCORS:true, allowTaint: true,async:false} ).then(canvas => {
			document.body.appendChild(canvas)
	});
});

@Ananda-Pryana I’ve tried your jsFiddle however the fix does not seem to work anymore. Is there any other solution ?

Thanks in advance.

link https://stackblitz.com/edit/angular-agm-maps-html2canvas-nice

And finally it worked with my angular v2 +

import {
  Component,
  OnInit,
  ElementRef,
  ViewChild,
  NgZone
} from "@angular/core";
import { FormControl } from "@angular/forms";
import { MapsAPILoader } from "@agm/core";
declare var google;
import html2canvas from "html2canvas";
import { from } from 'rxjs';

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  public latitude: number;
  public longitude: number;
  public searchControl: FormControl;
  public zoom: number;

  @ViewChild("search", { static: true }) public searchElementRef: ElementRef;
  @ViewChild("screen", { static: true }) screen: ElementRef;
  @ViewChild("canvas", { static: true }) canvas: ElementRef;
  @ViewChild("downloadLink", { static: true }) downloadLink: ElementRef;

  async downloadImage() {
    // Fix issue capture google map
    const mapNode = document.querySelectorAll(".gm-style>div>div>div:last-child>div");
    mapNode.forEach(m => {
      const transformMatrix = getComputedStyle(m).transform.split(",");
      m.setAttribute("style",`left:${parseFloat(transformMatrix[4])}px; top:${parseFloat(transformMatrix[5])}px; transform:none; position:absolute; z-index:9999;`
      );
    });
    const capture$ = from(
      html2canvas(this.screen.nativeElement, { useCORS: true }).then(
        canv => {
          return canv.toDataURL('image/png');
        }, err => {
          throw new Error(err);
        }
      ).catch(res => {
        throw new Error(res);
      })
    );
    // Async
    const image = await capture$.toPromise();
    console.log(image);
    // Loac base64
    this.canvas.nativeElement.src = image;
    // Download image
    this.downloadLink.nativeElement.href = image;
    this.downloadLink.nativeElement.download = "marble-diagram.png";
    this.downloadLink.nativeElement.click();
  }

  constructor(private mapsAPILoader: MapsAPILoader, private ngZone: NgZone) {}

  mapReady(event) {
    console.log(event);
    this.setCurrentPosition();
  }

  ngOnInit() {
    this.zoom = 15;
    this.searchControl = new FormControl();
    this.mapsAPILoader.load().then(() => {
      let autocomplete = new google.maps.places.Autocomplete(
        this.searchElementRef.nativeElement,
        {
          types: ["address"]
        }
      );
      autocomplete.addListener("place_changed", () => {
        this.ngZone.run(() => {
          let place: google.maps.places.PlaceResult = autocomplete.getPlace();
          if (place.geometry === undefined || place.geometry === null) {
            return;
          }
          this.latitude = place.geometry.location.lat();
          this.longitude = place.geometry.location.lng();
          this.zoom = 12;
        });
      });
    });
  }
  recenterMap() {
    this.latitude = 36.8392542;
    this.longitude = 10.313922699999999;
  }

  private setCurrentPosition() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(position => {
        this.latitude = position.coords.latitude;
        this.longitude = position.coords.longitude;
        this.zoom = 15;
        console.log(this.latitude, this.longitude);
      });
    }
  }

  getPosition() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(position => {
        this.latitude =
          position.coords.latitude + 0.00000000001 * Math.random();
        this.longitude =
          position.coords.longitude + 0.00000000001 * Math.random();
      });
    } else {
      alert("Geolocation is not supported by this browser.");
    }
  }
}

<button (click)="downloadImage()">Capture</button>

<div class="container" #screen>
	<h2>Angular 2 + Google Maps Places Autocomplete</h2>
	<div class="form-group">
    <input placeholder="search for location" autocorrect="off" autocapitalize="off" spellcheck="off" type="text" class="form-control" #search [formControl]="searchControl">
  </div>
  <agm-map [latitude]="latitude" [longitude]="longitude" [scrollwheel]="false" [zoom]="zoom" [usePanning]='true'
    (mapReady)="mapReady($event)">
    <agm-marker [latitude]="latitude" [longitude]="longitude"
      iconUrl="http://maps.google.com/mapfiles/ms/icons/blue-dot.png"></agm-marker>
  </agm-map>
</div>

<div id="download">
  <img #canvas>
  <a #downloadLink></a>
</div>

Thanks to @imlinus and @hseeda ! This selector works perfectly for me! and it even keeps the google logo, thanks!

@hseeda Thank you! Your selector was doing the trick for me!

Here’s my slightly modified selector that does work (at least for me, haha)

const div = document.querySelector('#map > div:first-of-type')

html2canvas(div, {})

However, now it’s cutting off the Google Logo which always has to show in order to comply with the terms and conditions 😦

Well well, I’ll just clone the node or something. I’ve been fighting this map for a while now 😄

The issue with blank map or an error generating the canvas was tricky, but eventually what fixed it for me was adding this config:

ignoreElements: (node) => {
        return node.nodeName === 'IFRAME';
      }

html2canvas(mapWrapper, {
      useCORS: true,
      allowTaint: false,
      ignoreElements: (node) => {
        return node.nodeName === 'IFRAME';
      }
    }).then(canvas => {
      const url = canvas.toDataURL('image/png');
      saveAs(url, 'image3.png');
      window.URL.revokeObjectURL(url);
    });

Thanks @Ananda-Pryana! I had this working last week then moved it to a new platform and I thought the move was what broke it. I was totally going down a rat hole assuming the new environment was the culprit. I downgraded to 3.30 and all is well.

@niklasvh I can confirm that it is still an issue with the latest version. Here is a fiddle I created while testing this issue: http://jsfiddle.net/9agom947/4/

The fiddle shows the problem as described in the linked stackoverflow question, not necessarily what’s in the OP of this thread. If you don’t pan the map, there is no problem in getting the map to be copied. Once you pan the map, in Chrome but not in FireFox, the copied map will be blank outside the region that was initially loaded.

The fix given in this thread does seem to solve the problem.

Does the above script work for Google Maps v3?

My requirement is to take a screenshot of a Google Map v3 with a route drawn on it.

It works nicely in Firefox, but in Chrome there is no marker or route. I am already using custom markers.

I have a difficult time debugging because there is no error in console and logging is so limited.

Has anyone solve the issue in Chrome? I have tried the proxy scripts in two languages, but neither seems to make a difference.