div to image

by Lindow

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>
<div class="elements" id="img-out"></div>

CSS

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

.elements {
  display:inline-block;
}

JavaScript

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

var map = new GMaps({
    div: '#map',
    lat: -12.043333,
    lng: -77.028333
});