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

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=YOUR_API_KEY&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>