LoginSignup
7
10

More than 5 years have passed since last update.

google mapsを画像に変換する

Last updated at Posted at 2016-01-06

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>

7
10
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
10