Google Map To Image

by Behseini

HTML

<script src="https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script>
<script src="http://www.nihilogic.dk/labs/canvas2image/canvas2image.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false&dummy=.js"></script>

<div id="widget" ></div>
    
<br/>
<input type="button" id="btnSave" value="Save PNG"/>

<div id="img-out"></div>

CSS

#widget {
    width: 150px;
    height: 150px;
}

JavaScript

$(function() { 
    var map;
       var latlng = new google.maps.LatLng(49.241943, -122.889318);
    var myOptions = {
        zoom: 12,
        center: latlng,
        disableDefaultUI: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("widget"), myOptions); 
    
    $("#btnSave").click(function() { 
        html2canvas($("#widget"), {
            useCORS: true,
//                        allowTaint:true,
            onrendered: function(canvas) {
                theCanvas = canvas;
                document.body.appendChild(canvas);

                // Convert and download as image 
                Canvas2Image.saveAsPNG(canvas); 
                
                $("#img-out").append(canvas);
                // Clean up 
                //document.body.removeChild(canvas);
            }
        });
    });
});