How to line up an Amcharts single country on google maps api?

Question

I am trying to replicate the amcharts demo seen here: https://www.amcharts.com/docs/v4/tutorials/using-mapchart-with-google-maps-api/

to only show Canada:

What is the best way to lock these two layers together like the amcharts world demo?

I have tried setting bounds, but the zoom scales don't line up. I'm sure there's an easier way that I'm simply not aware of.

  
var gmap;

function initGoogleMap() {
  gmap = new google.maps.Map(document.getElementById("gmap"), {
    scrollwheel: true,
        center: new google.maps.LatLng(56.130366, -106.346771),
        zoom: 3,
    disableDefaultUI: true
  });
  
  var swBound = new google.maps.LatLng(41.6765556, -141.00275);
  var neBound = new google.maps.LatLng(83.3362128, -52.3231981);
  var bounds = new google.maps.LatLngBounds(swBound, neBound);
  // google.maps.event.addListener(gmap, 'bounds_changed', updateMapPosition);
  gmap.fitBounds(bounds);
}

var ammap = am4core.create("ammap", am4maps.MapChart);
ammap.geodata = am4geodata_canadaLow;
ammap.projection = new am4maps.projections.Mercator();
ammap.zoomDuration = 0;
ammap.homeZoomLevel = 0;
ammap.homeGeoPoint = {
  latitude: 56.130366,
  longitude: -106.346771
};

var polygonSeries = ammap.series.push(new am4maps.MapPolygonSeries());
polygonSeries.useGeodata = true;

ammap.zoomControl = new am4maps.ZoomControl();

var polygonTemplate = polygonSeries.mapPolygons.template;
polygonTemplate.tooltipText = "{name}";
polygonTemplate.fill = am4core.color("#74B266");
polygonTemplate.fillOpacity = 0.5;

var hs = polygonTemplate.states.create("hover");
hs.properties.fill = am4core.color("#367B25");

ammap.events.on("zoomlevelchanged", updateMapPosition);
ammap.events.on("mappositionchanged", updateMapPosition);
ammap.events.on("scaleratiochanged", updateMapPosition);

function updateMapPosition(ev) {

  if ( typeof gmap === "undefined" )
    return;

  gmap.setZoom(Math.log2(ammap.zoomLevel) + 3);

  gmap.setCenter( {
    // a small adjustment needed for this div size:
    lat: ammap.zoomGeoPoint.latitude,
    lng: ammap.zoomGeoPoint.longitude
  } );
}

#maps {
  width: 1000px;
  height: 500px;
  border: 0px solid #eee;
  margin: 0px auto;
  position: relative;
}

.mapdiv {
  width: 1000px;
  height: 500px;
  position: absolute;
  top: 0;
  left: 0;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBojfkK4p5V3u9fq0pb_OtN7KTrZayr3hk&callback=initGoogleMap" defer></script>

<script src="https://www.amcharts.com/lib/4/core.js?ver=5.9.2"></script>
<script src="https://www.amcharts.com/lib/4/maps.js?ver=5.9.2"></script>
<script type='text/javascript' src='https://cdn.amcharts.com/lib/4/geodata/canadaLow.js?ver=5.9.2' id='am-canada-js'></script>


<!-- HTML -->
<div id="maps">
  <div id="gmap" class="mapdiv" style="visibility: visible;"></div>
  <div id="ammap" class="mapdiv" style="visibility: visible;"></div>
</div>