examples/google-maps.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Google Maps and html2canvas</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
    #map_canvas{
        height: 400px;
        width: 600px;
        border: 1px #c0c0c0 solid;
    }

    .note {
        color: #fff;
        padding: 25px;
        background: #2fa9f6;
        box-shadow: inset 1px 1px 2px rgba(0,0,0,.1), 1px 1px 1px rgba(255,255,255,.1);
    }
    .note a {
        color: inherit;
    }

    code {
        padding: .2em;
        margin: 0;
        font-size: 85%;
        background-color: rgba(0,0,0,.04);
        border-radius: 3px;
    }

    #output {
        margin: .5em;
        padding: .5em;
        border-radius: .2em;
        background: #cfcfcf;
    }

    #output > img {
        margin: .5em;
        background: #fff;
        box-shadow: 2px 2px 5px rgba(0,0,0,.5);
    }
    </style>

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>

    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
</head>
<body>
    <h1>Google Maps with html2canvas</h1>

    <p>Tested on Chrome and Firefox</p>

    <p class="note">
        <strong>Note:</strong> for use this example you needs replace <code>YOUR_API_KEY</code> in <code>&lt;img&gt;</code> by your "api key" from "google dev"</strong>, for obtain a "api key" access: <a href="https://developers.google.com/maps/documentation/javascript/get-api-key" target="_blank">https://developers.google.com/maps/documentation/javascript/get-api-key</a>
    </p>

    <div id="container">
        <h2>Maps example:</h2>
        <div id="map_canvas"></div>
        <div>
            <button id="save1">Save #map_canvas</button>
            <button id="save2">Save #container</button>
        </div>
    </div>

    <hr>

    <div id="output">
        <h2>Output results:</h2>
    </div>

    <script type="text/javascript">
    function initialize() {
        var parametreCarteVillage = {
            zoom                   : 9,
            center                 : new google.maps.LatLng(38.959409, -87.289124),
            disableDoubleClickZoom : false,
            draggable              : true,
            scrollwheel            : true,
            panControl             : false,
            disableDefaultUI       : true,
            mapTypeControl         : true,
            keyboardShortcuts      : true,
            mapTypeId              : google.maps.MapTypeId.ROADMAP
        }

        var map = new google.maps.Map(document.getElementById('map_canvas'), parametreCarteVillage);

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(38.959409,-87.289124),
            title: 'Title!',
            map: map
        });
    }

    initialize();

    function convert(target) {
        html2canvas(target, {
            "proxy": "../html2canvasproxy.php",
            "logging": true, //Enable log (use Web Console for get Errors and Warnings)
            "onrendered": function (canvas) {
                var img = new Image;

                img.onload = function () {
                    img.onload = null;

                    document.getElementById("output").appendChild(img);
                };

                img.onerror = function () {
                    img.onerror = null;

                    console.log("Not loaded image from canvas.toDataURL");
                };

                img.src = canvas.toDataURL("image/png");
            }
        });
    }

    document.getElementById("save1").onclick = function () {
        convert(document.getElementById("map_canvas"));
    };

    document.getElementById("save2").onclick = function () {
        convert(document.getElementById("container"));
    };
    </script>
</body>
</html>