金子邦彦研究室 ▶ プログラミング ▶ 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]

本サイトは金子邦彦研究室のWebページである．

資料等の公開では，原則，「クリエイティブコモンズ BY NC SA」として公開するようにしている． PDFファイル，パワーポイントファイルなどには， 「クリエイティブコモンズ BY NC SA」を明記するとともに，ロゴを記載するようにしている（作業が間に合っていない分もあるのでご容赦ください）．

公開している資料をご利用になる場合の，再配布の条件，剽窃の防止などについて，別ページ »で説明 再配布や資料改変の際には，そのページをご確認ください．

サイトマップは，サイトマップのページをご覧下さい． 本サイト内の検索は，サイト内検索のページをご利用下さい．

問い合わせ先： 金子邦彦（かねこ くにひこ） [image]