Html3canvas FIX

by denis_miroshnikov_ts

HTML

<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <button id="pan">Pan Map</button>
  <button id="withoutFix">Without Fix</button>
  <button id="withFix">With Fix</button>
</div>
<div id="map"></div>
<div id="screenshot"></div>
<script defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDQDs5U7y5bfR068ckOGwK39C_Dj3jIyJw&v=3.33&v=weekly"></script>

CSS

#map,
#screenshot {
  width: 600px;
  height: 250px;
  margin: 10px 0;
  padding: 0;
  border: 1px solid black;
}

button {
  display: inline-block;
  margin-right: 5px;
}

JavaScript

function pan() {
  map.setCenter(new google.maps.LatLng(51.17795745527008, -1.8256616592407227));
}

function withoutFix() {
  html2canvas(document.querySelector("#map"), {useCORS: true}).then(canvas => {
    $('#screenshot').empty().html(canvas);
  });
}

function withFix() {
  //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(document.querySelector("#map"), {useCORS: true}).then(canvas => {
    $('#screenshot').empty().html(canvas);
    //if (window.chrome) { // Fix for Chrome
      $(".gm-style>div:first>div").css({
        left: 0,
        top: 0,
        "transform": transform
      });
    //}
  });
}

function initialize() {
  map =new google.maps.Map(document.getElementById('map'), {
            center: {lat: 49.503972, lng: 8.423917},
            zoom: 18,
            mapTypeId: 'roadmap',
            disableDefaultUI: true
        });

  google.maps.event.addDomListener(document.getElementById('pan'), 'click', pan);
  google.maps.event.addDomListener(document.getElementById('withoutFix'), 'click', withoutFix);
  google.maps.event.addDomListener(document.getElementById('withFix'), 'click', withFix);
}
google.maps.event.addDomListener(window, 'load', initialize);