金子邦彦研究室プログラミングJavaScript による Web プログラミングGoogle Maps JavaScript API v3 を使ってみる

Maps JavaScript API v3 を使ってみる

この Web ページで行うこと.

準備

◆ JavaScript に関する Web ブラウザの設定

Google Maps JavaScript API v3 を使ってストリートビューを表示してみる

参考Web ページ

プログラムの見本 1

<!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html; initial-scale=1.0; charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <meta http-equiv="MSThemeCompatible" CONTENT="yes" />

    <title>Google Maps API sample</title>

    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery.ui.all.css" />
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/prototype/1/prototype.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>

    <script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
      <!--
          jQuery.noConflict();
      jQuery(document).ready(function($) {

        google.maps.event.addDomListener(window, 'load', function() {
          var latlng = new google.maps.LatLng(33.59656025053064, 130.21688103675842); 
          var panoOptions = {
              position: latlng, 
            pov: { 
              heading: 180, 
              pitch: 0 
                }
          };
          var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"), panoOptions);
              map.setSteetView(panorama);
        });
          });
      // -->
    </script>
  </head>

  <body style="width : 640px; height : 640px;">
    <p>
      <div id="pano" style="width : 640px; height : 480px;"></div> 
  </body>
</html>

[image]

プログラムの見本 2

今度はパノラマ表示


<!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html; initial-scale=1.0; />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <meta http-equiv="MSThemeCompatible" CONTENT="yes" />

    <title>Google Maps API sample</title>

    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery.ui.all.css" />
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/prototype/1/prototype.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>

    <script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
      <!--
          jQuery.noConflict();
      jQuery(document).ready(function($) {

        var lat = 33.589030; 
        var lng = 130.419948; 
        var h = 270.934323; 

        google.maps.event.addDomListener(window, 'load', function() {
          var latlng = new google.maps.LatLng(lat, lng); 
          var panoOptions = {
              position: latlng, 
                addressControlOptions: {
                  position: google.maps.ControlPosition.BOTTOM_CENTER
                },
                linksControl: false,
                panControl: false,
                zoomControlOptions: {
                  style: google.maps.ZoomControlStyle.SMALL
                },
                enableCloseButton: false,
            pov: { 
              heading: h, 
              pitch: 10, 
                  zoom: 0
                }
          };
          var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"), panoOptions);
              google.maps.event.addDomListener(window, 'load', initialize);
        });
          });
      // -->
    </script>
  </head>

  <body style="width : 1600px; height : 1200px;">
      <div id="pano" style="width : 1800px; height : 900px;"></div> 

  </body>
</html>

[image]

GSVPano.js を使ってみる

  1. https://github.com/spite/GSVPano.js を開く
  2. ZIP」をクリック。

    ダウンロードが始まる

    [image]
  3. ダウンロードした ZIP ファイルの解凍
  4. examples/basic/index.html を Web ブラウザで開き、動作を確認する

    <!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
      <head>
        <meta http-equiv="Content-Type" content="text/html; initial-scale=1.0; charset=utf-8" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="MSThemeCompatible" CONTENT="yes" />
    
        <title>Google Maps API + GSVPano.js sample</title>
    
        <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery.ui.all.css" />
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/prototype/1/prototype.js"></script>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
    
        <script type="text/javascript" src="GSVPano.min.js"></script>
        <script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
          <!--
              jQuery.noConflict();
          jQuery(document).ready(function($) {
              // Slider01
              $('#slider01').slider({
              range: true,
              values: [0, 10]
              });
          // --> 
          </script>
      </head>
    
      <body style="width : 800px; height : 600px;">
    
        <script type="text/javascript">
          // Create a PanoLoader object
          var loader = new GSVPANO.PanoLoader( {
          zoom: 1
          } );
    
    
          // Implement the onPanoramaLoad handler
          loader.onPanoramaLoad = function() {
          document.body.appendChild( this.canvas );
          /*
          Do your thing with the panorama:
          this.canvas: an HTML5 canvas with the texture
          this.copyright: the copyright of the images
          */
    
          };
    
          loader.load( new google.maps.LatLng( 33.59656025053064, 130.21688103675842 ) );
          // -->
        </script>
    
    <p>
          <div id="slider01"/>
    
    </body>
    </html>
    

    [image]