div to image

HTML

<script src="https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script>
<script src="http://www.nihilogic.dk/labs/canvas2image/base64.js"></script>
<script src="https://rawgit.com/HPNeo/gmaps/master/gmaps.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true&amp;.js"></script>
<input type="button" id="btnSave" value="Save PNG"/>
<hr>
<div class="elements" id="map">
  <div _ngcontent-c9="" class="mapbox  margin-bottom-10 ">
  <input _ngcontent-c9="" class="controls" id="pac-input" placeholder="Search Box" type="text" hidden="">
  <div _ngcontent-c9="" id="map" style="width: 100%; height: 410px; position: relative; overflow: hidden;" ng-reflect-ng-style="[object Object]"><div style="height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; background-color: rgb(229, 227, 223);"><div class="gm-style" style="position: absolute; z-index: 0; left: 0px; top: 0px; height: 100%; width: 100%; padding: 0px; border-width: 0px; margin: 0px;"><div tabindex="0" style="position: absolute; z-index: 0; left: 0px; top: 0px; height: 100%; width: 100%; padding: 0px; border-width: 0px; margin: 0px; cursor: url(&quot;https://maps.gstatic.com/mapfiles/openhand_8_8.cur&quot;), default; touch-action: pan-x pan-y;"><div style="z-index: 1; position: absolute; left: 50%; top: 50%; width: 100%; transform: translate(0px, 0px);"><div style="position: absolute; left: 0px; top: 0px; z-index: 100; width: 100%;"><div style="position: absolute; left: 0px; top: 0px; z-index: 0;"><div style="position: absolute; z-index: 982; transform: matrix(1, 0, 0, 1, -106, -37);"><div style="position: absolute; left: 0px; top: 0px; width: 256px; height: 256px;"><div style="width: 256px; height: 256px;"></div></div><div style="position: absolute; left: -256px; top: 0px; width: 256px; height: 256px;"><div style="width: 256px; height: 256px;"></div></div><div style="position: absolute; left: -256px; top: -256px; width: 256px; height: 256px;"><div...

CSS

#map {
  width:300px;
  height:300px;
}

.elements {
  display:inline-block;
}

JavaScript

$(function() { 
    $("#btnSave").click(function() { 
    		$("#img-out").children().remove();
        html2canvas($(".gm-style"), {
            useCORS: true,
            onrendered: function(canvas) {
                theCanvas = canvas;
                document.body.appendChild(canvas);
                $("#img-out").append(canvas);
            }
        });
    });
});