google mapsを表示後、png画像に変換するプログラムです。
jQuery 1.11.3、html2canvas 0.4.1を利用しています。
map.html
<html>
<head>
<meta charset="UTF-8">
<title>Google Maps Javascript API test page</title>
<link rel="stylesheet" href="/css/mymap.css">
</head>
<body>
<img id="ss" src="" />
<div class="map-embed">
<div id="map-canvas">ここに地図が表示されます</div>
</div>
<script src="/js/jquery/1.11.3/jquery-1.11.3.min.js"></script>
<script src="/js/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
$(document).ready(function() {
$("#ss").hide();
var canvas = document.getElementById( 'map-canvas' ) ;
var latlng = new google.maps.LatLng( 35.633664 , 139.715593 );
var options = {
zoom: 15,
center: latlng ,
};
var map = new google.maps.Map( canvas , options );
setTimeout(map2image,1000);
});
function map2image() {
html2canvas($("#map-canvas"), {
useCORS: true,
onrendered: function(canvas) {
var myImage = canvas.toDataURL("image/png");
$("#map-canvas").hide();
$("#ss").show();
$("#ss").attr("src", myImage);
}
});
}
</script>
</body>
</html>