JSFiddle - React, Tailwind, and code Playground

by denis_miroshnikov_ts

HTML

<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script src="https://maps.google.com/maps/api/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>

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'), {
    zoom: 17,
    center: new google.maps.LatLng(51.178905803876795, -1.8262302875518799),
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    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);