以上で完了です。

開発を始めるには、デベロッパー ドキュメント をご覧下さい。

Google Maps JavaScript API をアクティベートする

まず初めに Google Developers Console で次の作業を行います。

  1. プロジェクトを作成または選択する
  2. Google Maps JavaScript API と関連サービスをアクティベートする
  3. 適切なキーを作成する
続ける

ストリート ビュー サービス

概要

Google ストリート ビューは、対象地域全体について、指定された道路からの 360 度のパノラマビューを提供します。ストリート ビューの API の対象地域は、Google マップ アプリケーション(https://maps.google.com/)の対象地域と同じです。ストリート ビューで現在サポートされている都市の一覧については、Google マップのウェブサイトをご覧ください。

ストリート ビュー画像の例を次に示します。


Google Maps JavaScript API には、Google マップ ストリート ビューで使用される画像を取得および操作するためのストリート ビュー サービスが用意されています。ストリート ビュー サービスは、ブラウザ内でネイティブにサポートされています。

ストリート ビュー マップの使用

ストリート ビューは、スタンドアロン DOM 要素内で使用することができます。これは、地図上で場所を示すのに非常に便利です。ストリート ビューはデフォルトでマップ上で有効化されており、ペグマン コントロールがナビゲーション(ズームとパン)コントロールと一体化されて表示されます。このコントロールは、マップの MapOptionsstreetViewControlfalse に設定することで非表示にできます。ストリート ビュー コントロールのデフォルトの位置は、MapstreetViewControlOptions.position プロパティを新しい ControlPosition に設定することで変更できます。

ストリート ビューのペグマン コントロールを使用して、マップ内で直接ストリート ビューのパノラマ画像を表示できます。ユーザーがペグマンをクリックした状態を保持するとマップが更新され、ストリート ビューが有効な道路の周りに青い輪郭線が表示されて、Google マップ アプリと同様なユーザー エクスペリエンスが提供されます。

ユーザーがペグマン マーカーを道路にドロップすると、マップが更新されて、指定された場所のストリート ビューのパノラマ画像が表示されます。

ストリート ビューのパノラマ画像

ストリート ビュー画像は、StreetViewPanorama オブジェクトを使用することでサポートされます。このオブジェクトは、ストリート ビュー「ビューア」への API インターフェースを提供します。各マップには、デフォルトのストリート ビュー パノラマ画像が含まれています。このパノラマ画像は、マップの getStreetView() メソッドを呼び出すことで取得できます。マップの streetViewControl オプションを true に設定してストリート ビュー コントロールをマップに追加すると、ペグマン コントロールがこのデフォルト ストリート ビュー パノラマ画像へ自動接続されます。

独自の StreetViewPanorama オブジェクトを作成して、マップでデフォルトの画像の代わりにこれを使用するように設定することもできます。これを行うには、マップの streetView プロパティを明示的に該当する構成済みオブジェクトに設定します。マップとパノラマ画像間のオーバーレイの自動共有など、デフォルトの動作を変更する場合、デフォルトのパノラマ画像をオーバーライドする必要がある場合があります(下記のストリート ビュー内のオーバーレイをご覧ください)。

ストリート ビュー コンテナ

<div> 要素であることが多い、独立した DOM 要素内に、StreetViewPanorama を表示したい場合があります。StreetViewPanorama のコンストラクタ内に単純に DOM 要素を渡します。画像の表示を最適化するために、最小サイズの 200 x 200 ピクセルを推奨します。

注: ストリート ビュー機能はマップとの組み合わせで使用するように設計されていますが、この使用方法は必須ではありません。マップを使用せずに、ストリート ビュー オブジェクトを単独で使用できます。

ストリート ビューの位置情報と視点(POV)

StreetViewPanorama コンストラクタでは、StreetViewOptions パラメータを使用してストリート ビューの位置情報と視点を設定することもできます。構成後のオブジェクト上で setPosition() および setPov() を呼び出して、その位置と視点を変更できます。

ストリート ビューでの位置情報は、どの画像にカメラを向けるかを定義しますが、その画像でのカメラの向きは定義しません。カメラの方向を定義するには、StreetViewPov オブジェクトの次の 2 つのプロパティを使用します。

  • heading(デフォルトは 0): 真北を基準としたカメラの回転角を度単位で指定します。向首方向は、時計回り(90 度が東)で計測します。
  • pitch(デフォルトは0): カメラの初期デフォルト ピッチ(通常は水平ですが、常にそうであるとは限りません)からの上下の角度の変化を指定します(たとえば、山で撮影された画像は、水平ではないデフォルトの初期ピッチで表示される場合があります)。ピッチ角度は、見上げる方向を正の値(デフォルトのピッチと直行する真上方向が +90 度)で、下を向く方向を負の値(デフォルトのピッチと直交する真下の方向が -90 度)として計測します。

StreetViewPov オブジェクトは、多くの場合ストリート ビュー カメラの視点を確定するために使用されます。撮影機材の視点(通常は車やトライクで撮影した方向)を特定することも可能で、そのためには StreetViewPanorama.getPhotographerPov() メソッドを使用します。

次のコードは、ボストンの地図とフェンウェイ パークの初期ビューを示しています。ペグマンを選択してマップ上のサポート対象の場所にドラッグすると、ストリート ビューのパノラマ画像が変化します。

function initialize() {
  var fenway = {lat: 42.345573, lng: -71.098326};
  var map = new google.maps.Map(document.getElementById('map'), {
    center: fenway,
    zoom: 14
  });
  var panorama = new google.maps.StreetViewPanorama(
      document.getElementById('pano'), {
        position: fenway,
        pov: {
          heading: 34,
          pitch: 10
        }
      });
  map.setStreetView(panorama);
}
<div id="map"></div>
<div id="pano"></div>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map, #pano {
  float: left;
  height: 100%;
  width: 45%;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize">
</script>
function initialize() {
  var fenway = {lat: 42.345573, lng: -71.098326};
  var map = new google.maps.Map(document.getElementById('map'), {
    center: fenway,
    zoom: 14
  });
  var panorama = new google.maps.StreetViewPanorama(
      document.getElementById('pano'), {
        position: fenway,
        pov: {
          heading: 34,
          pitch: 10
        }
      });
  map.setStreetView(panorama);
}

例を見る(streetview-simple.html)

モバイル端末でのモーション トラッキング

端末画面の向きのイベントをサポートする端末では、この API により、端末の動きに連動して視点が変わるストリート ビューをユーザーに表示できます。ユーザーは、端末を動かすことで周囲を見回すことができます。この機能は、モーション トラッキングまたはデバイス ローテーション トラッキングと呼ばれます。

アプリの開発者は、次のようにデフォルトの動作を変更できます。

  • モーション トラッキングの機能を有効または無効にする。モーション トラッキングをサポートするすべての端末では、この機能がデフォルトで有効になっています。次のサンプルは、モーション トラッキングを無効にしますが、モーション トラッキングのコントロールは表示されたままにします(ユーザーは、コントロールをタップしてモーション トラッキングをオンにできます)。
    var panorama = new google.maps.StreetViewPanorama(
        document.getElementById('pano'), {
          position: {lat: 37.869260, lng: -122.254811},
          pov: {heading: 165, pitch: 0},
          motionTracking: false
        });
    
  • モーション トラッキングのコントロールを表示または非表示にする。モーション トラッキングをサポートする端末上では、このコントロールがデフォルトで表示されています。ユーザーは、コントロールをタップしてモーション トラッキングのオンとオフを切り替えることができます。端末がモーション コントロールをサポートしていない場合は、motionTrackingControl の値によらず、コントロールが表示されることはありません。

    次のサンプルは、モーション トラッキングとモーション トラッキング コントロールの両方を無効にします。この場合、ユーザーはモーション トラッキングをオンにできません。

    var panorama = new google.maps.StreetViewPanorama(
        document.getElementById('pano'), {
          position: {lat: 37.869260, lng: -122.254811},
          pov: {heading: 165, pitch: 0},
          motionTracking: false,
          motionTrackingControl: false
        });
    
  • モーション トラッキング コントロールのデフォルト位置を変更する。このコントロールは、デフォルトでパノラマ画像の右下に表示されます(RIGHT_BOTTOM の位置)。次のサンプルは、コントロールの位置を左下に設定します。
    var panorama = new google.maps.StreetViewPanorama(
        document.getElementById('pano'), {
          position: {lat: 37.869260, lng: -122.254811},
          pov: {heading: 165, pitch: 0},
          motionTrackingControlOptions: {
            position: google.maps.ControlPosition.LEFT_BOTTOM
          }
        });
    

実際のモーション トラッキングの動作を確認するには、モバイル端末 (または端末画面の向きイベントをサポートする任意のデバイス)で次のサンプルを表示してください。


新しいページで例を表示する(streetview-embed.html)

ストリート ビュー内のオーバーレイ

デフォルトの StreetViewPanorama オブジェクトは、マップ オーバーレイ の表示をネイティブでサポートします。通常、オーバーレイは LatLng 位置に固定されて「ストリート レベル」で表示されます(たとえば、マーカーは、その尾の部分がストリート ビューのパノラマ画像内で場所の水平面に固定されて表示されます)。

現在、ストリート ビュー パノラマ画像でサポートされているオーバーレイのタイプは、MarkerInfoWindow、およびカスタム OverlayView に限定されています。マップ上に表示するオーバーレイは、ストリート ビュー パノラマ画像上でも表示できます。これを行うには、パノラマ画像を Map オブジェクトの代替として扱い、setMap() を呼び出して引数にマップの代わりに StreetViewPanorama を渡します。情報ウィンドウも、同様にストリート ビュー パノラマ画像内で開くことができます。これを行うには、open() を呼び出して、マップの代わりに StreetViewPanorama() を渡します。

また、デフォルトの StreetViewPanorama を使用してマップを作成する際に、マップ上で作成されたすべてのマーカーは、マップの関連ストリート ビュー パノラマ画像と自動的に共有されます(パノラマ画像が表示されている場合)。デフォルトのストリート ビュー パノラマ画像を取得するには、Map オブジェクト上で getStreetView() を呼び出します。マップの streetView プロパティを明示的に独自構成の StreetViewPanorama に設定する場合、デフォルトのパノラマ画像をオーバーライドして、自動オーバーレイ共有を無効化することになります。

次の例は、ニューヨーク市アスター プレイス周辺のさまざまな場所を表すマーカーを示しています。表示をストリート ビューに切り替えると、StreetViewPanorama 内に共有マーカーが表示されます。

var panorama;

function initMap() {
  var astorPlace = {lat: 40.729884, lng: -73.990988};

  // Set up the map
  var map = new google.maps.Map(document.getElementById('map'), {
    center: astorPlace,
    zoom: 18,
    streetViewControl: false
  });

  // Set up the markers on the map
  var cafeMarker = new google.maps.Marker({
      position: {lat: 40.730031, lng: -73.991428},
      map: map,
      icon: 'https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00',
      title: 'Cafe'
  });

  var bankMarker = new google.maps.Marker({
      position: {lat: 40.729681, lng: -73.991138},
      map: map,
      icon: 'https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00',
      title: 'Bank'
  });

  var busMarker = new google.maps.Marker({
      position: {lat: 40.729559, lng: -73.990741},
      map: map,
      icon: 'https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00',
      title: 'Bus Stop'
  });

  // We get the map's default panorama and set up some defaults.
  // Note that we don't yet set it visible.
  panorama = map.getStreetView();
  panorama.setPosition(astorPlace);
  panorama.setPov(/** @type {google.maps.StreetViewPov} */({
    heading: 265,
    pitch: 0
  }));
}

function toggleStreetView() {
  var toggle = panorama.getVisible();
  if (toggle == false) {
    panorama.setVisible(true);
  } else {
    panorama.setVisible(false);
  }
}
<div id="floating-panel">
  <input type="button" value="Toggle Street View" onclick="toggleStreetView();"></input>
</div>
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
#floating-panel {
  margin-left: -100px;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
var panorama;

function initMap() {
  var astorPlace = {lat: 40.729884, lng: -73.990988};

  // Set up the map
  var map = new google.maps.Map(document.getElementById('map'), {
    center: astorPlace,
    zoom: 18,
    streetViewControl: false
  });

  // Set up the markers on the map
  var cafeMarker = new google.maps.Marker({
      position: {lat: 40.730031, lng: -73.991428},
      map: map,
      icon: 'https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00',
      title: 'Cafe'
  });

  var bankMarker = new google.maps.Marker({
      position: {lat: 40.729681, lng: -73.991138},
      map: map,
      icon: 'https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00',
      title: 'Bank'
  });

  var busMarker = new google.maps.Marker({
      position: {lat: 40.729559, lng: -73.990741},
      map: map,
      icon: 'https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00',
      title: 'Bus Stop'
  });

  // We get the map's default panorama and set up some defaults.
  // Note that we don't yet set it visible.
  panorama = map.getStreetView();
  panorama.setPosition(astorPlace);
  panorama.setPov(/** @type {google.maps.StreetViewPov} */({
    heading: 265,
    pitch: 0
  }));
}

function toggleStreetView() {
  var toggle = panorama.getVisible();
  if (toggle == false) {
    panorama.setVisible(true);
  } else {
    panorama.setVisible(false);
  }
}

例を見る(streetview-overlays.html)

ストリート ビュー イベント

ストリート ビューの間を移動するとき、または方向を操作するときに、StreetViewPanorama の状態の変化を示すいくつかのイベントの監視が必要となる場合があります。

  • pano_changed は、個別のパノラマ ID が変更されたときに毎回発行されます。このイベントは、イベントがトリガーされたときにパノラマ画像内のいずれかの関連データ(リンクなど)も変更されたことを保証するものではありません。このイベントは、パノラマ ID の変更のみを示します。パノラマ ID(該当パノラマを参照するために使用できる)は、現在のブラウザ セッション内のみで不変です。
  • position_changed は、パノラマ画像の基本(LatLng)位置が変更されたときに毎回発行されます。パノラマ画像を回転しても、このイベントはトリガーされません。関連パノラマ ID を変更しなくても、パノラマ画像の基本位置を変更できます。API が最も近いパノラマ ID をそのパノラマの位置と自動的に関連付けるためです。
  • pov_changed は、ストリート ビューの StreetViewPov が変更されると毎回発行されます。このイベントは、位置とパノラマ ID が変わらない間に発行される場合があります。
  • links_changed は、ストリート ビューのリンクが変更されると毎回発行されます。このイベントは、pano_changed によって示されるパノラマ ID の変更後に非同期に発行される場合があります。
  • visible_changed は、ストリート ビューの可視性が変更されると毎回発行されます。このイベントは、pano_changed によって示されるパノラマ ID の変更後に非同期に発行される場合があります。

次のコードは、これらのイベントを処理して基本となる StreetViewPanorama に関するデータを取集する方法を示しています。

function initPano() {
  var panorama = new google.maps.StreetViewPanorama(
      document.getElementById('pano'), {
        position: {lat: 37.869, lng: -122.255},
        pov: {
          heading: 270,
          pitch: 0
        },
        visible: true
  });

  panorama.addListener('pano_changed', function() {
      var panoCell = document.getElementById('pano-cell');
      panoCell.innerHTML = panorama.getPano();
  });

  panorama.addListener('links_changed', function() {
      var linksTable = document.getElementById('links_table');
      while (linksTable.hasChildNodes()) {
        linksTable.removeChild(linksTable.lastChild);
      }
      var links = panorama.getLinks();
      for (var i in links) {
        var row = document.createElement('tr');
        linksTable.appendChild(row);
        var labelCell = document.createElement('td');
        labelCell.innerHTML = '<b>Link: ' + i + '</b>';
        var valueCell = document.createElement('td');
        valueCell.innerHTML = links[i].description;
        linksTable.appendChild(labelCell);
        linksTable.appendChild(valueCell);
      }
  });

  panorama.addListener('position_changed', function() {
      var positionCell = document.getElementById('position-cell');
      positionCell.firstChild.nodeValue = panorama.getPosition() + '';
  });

  panorama.addListener('pov_changed', function() {
      var headingCell = document.getElementById('heading-cell');
      var pitchCell = document.getElementById('pitch-cell');
      headingCell.firstChild.nodeValue = panorama.getPov().heading + '';
      pitchCell.firstChild.nodeValue = panorama.getPov().pitch + '';
  });
}
<div id="pano"></div>
<div id="floating-panel">
<table>
  <tr>
    <td><b>Position</b></td><td id="position-cell">&nbsp;</td>
  </tr>
  <tr>
    <td><b>POV Heading</b></td><td id="heading-cell">270</td>
  </tr>
  <tr>
    <td><b>POV Pitch</b></td><td id="pitch-cell">0.0</td>
  </tr>
  <tr>
    <td><b>Pano ID</b></td><td id="pano-cell">&nbsp;</td>
  </tr>
  <table id="links_table"></table>
</table>
</div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
#pano {
  width: 50%;
  height: 100%;
  float: left;
}
#floating-panel {
  width: 45%;
  height: 100%;
  float: right;
  text-align: left;
  overflow: auto;
  position: static;
  border: 0px solid #999;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initPano">
</script>
function initPano() {
  var panorama = new google.maps.StreetViewPanorama(
      document.getElementById('pano'), {
        position: {lat: 37.869, lng: -122.255},
        pov: {
          heading: 270,
          pitch: 0
        },
        visible: true
  });

  panorama.addListener('pano_changed', function() {
      var panoCell = document.getElementById('pano-cell');
      panoCell.innerHTML = panorama.getPano();
  });

  panorama.addListener('links_changed', function() {
      var linksTable = document.getElementById('links_table');
      while (linksTable.hasChildNodes()) {
        linksTable.removeChild(linksTable.lastChild);
      }
      var links = panorama.getLinks();
      for (var i in links) {
        var row = document.createElement('tr');
        linksTable.appendChild(row);
        var labelCell = document.createElement('td');
        labelCell.innerHTML = '<b>Link: ' + i + '</b>';
        var valueCell = document.createElement('td');
        valueCell.innerHTML = links[i].description;
        linksTable.appendChild(labelCell);
        linksTable.appendChild(valueCell);
      }
  });

  panorama.addListener('position_changed', function() {
      var positionCell = document.getElementById('position-cell');
      positionCell.firstChild.nodeValue = panorama.getPosition() + '';
  });

  panorama.addListener('pov_changed', function() {
      var headingCell = document.getElementById('heading-cell');
      var pitchCell = document.getElementById('pitch-cell');
      headingCell.firstChild.nodeValue = panorama.getPov().heading + '';
      pitchCell.firstChild.nodeValue = panorama.getPov().pitch + '';
  });
}

例を見る(streetview-events.html)

ストリート ビューのコントロール

StreetViewPanorama を表示するときに、デフォルトでパノラマ画像上にさまざまなコントロールが表示されます。これらのコントロールは、StreetViewPanoramaOptions 内の該当するフィールドを true または false に設定することで、有効化または無効化できます。

  • panControl では、パノラマ画像を回転する手段が提供されます。このコントロールは、デフォルトでコンパスとパンが統合された標準コントロールとして表示されます。コントロールの位置は、panControlOptions フィールド内に PanControlOptions を指定して変更できます。
  • zoomControl では、画像内でズームを行う手段が提供されます。このコントロールは、デフォルトでパノラマ画像の右下に表示されます。コントロールの外観は、zoomControlOptions フィールド内に ZoomControlOptions を指定して変更できます。
  • addressControl では、関連する場所の住所を示すテキスト オーバーレイが提供され、Google マップでその場所を開くためのリンクが提供されます。コントロールの外観は、addressControlOptions フィールド内に StreetViewAddressControlOptions を指定して変更できます。
  • fullScreenControl では、全画面モードでストリート ビューを開くオプションが提供されます。コントロールの外観は、fullscreenControlOptions フィールド内に FullscreenControlOptions を指定して変更できます。
  • motionTrackingControl では、モバイル端末上でモーション トラッキングを有効または無効にするオプションが提供されます。このコントールは、端末画面の向きイベントをサポートする端末でのみ表示されます。このコントロールは、デフォルトでパノラマ画像の右下に表示されます。コントロールの位置は、MotionTrackingControlOptions を指定して変更できます。詳細については、モーション トラッキングのセクションをご覧ください。
  • linksControl では、隣接するパノラマ画像に移動するためのガイド矢印が画面上に提供されます。
  • クローズ コントロールは、ユーザーがストリート ビュー ビューアを閉じることを可能にします。クローズ コントロールは、enableCloseButtontrue または false に設定することで、有効化または無効化できます。

次の例は、関連ストリート ビュー内に表示されるコントロールを変更して、ビューのリンクを削除しています。

この例を全画面で表示します。

function initPano() {
  // Note: constructed panorama objects have visible: true
  // set by default.
  var panorama = new google.maps.StreetViewPanorama(
      document.getElementById('map'), {
        position: {lat: 42.345573, lng: -71.098326},
        addressControlOptions: {
          position: google.maps.ControlPosition.BOTTOM_CENTER
        },
        linksControl: false,
        panControl: false,
        enableCloseButton: false
  });
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initPano">
</script>
function initPano() {
  // Note: constructed panorama objects have visible: true
  // set by default.
  var panorama = new google.maps.StreetViewPanorama(
      document.getElementById('map'), {
        position: {lat: 42.345573, lng: -71.098326},
        addressControlOptions: {
          position: google.maps.ControlPosition.BOTTOM_CENTER
        },
        linksControl: false,
        panControl: false,
        enableCloseButton: false
  });
}

例を見る(streetview-controls.html)

ストリート ビューのデータへの直接アクセス

マップやパノラマ画像を直接操作する必要なく、プログラムを使用してストリート ビュー データの利用可否を判断したり、特定のパノラマ画像に関する情報を返したりすることが必要な場合があります。StreetViewService オブジェクトを使用すると、このような処理が可能になります。このオブジェクトは、Google のストリート ビュー サービスに格納されているデータへのインターフェースを提供します。

ストリート ビュー サービスのリクエスト

ストリート ビュー サービスにアクセスすると、Google Maps API は外部サーバーに対して呼び出しを行うので、処理が非同期になります。そのため、リクエストの完了時に実行されるコールバック メソッドを渡して、このコールバック メソッドで結果を処理する必要があります。

StreetViewService に対して次の 2 つのタイプのリクエストを開始できます。

  • StreetViewPanoRequest を使用したリクエスト: パノラマ画像を一意に識別する参照 ID が指定されるとパノラマ データを返します。これらの参照 ID は、該当パノラマ画像の使用期間のみ不変です。
  • StreetViewLocationRequest を使用したリクエスト: LatLng が渡されると、指定された領域でパノラマ データを検索します。

ストリート ビュー サービスのレスポンス

getPanorama() には、ストリート ビュー サービスからの結果の取得時に実行するコールバック関数が必要です。このコールバック関数は、StreetViewPanoramaData オブジェクト内の一連のパノラマ データと、リクエストのステータスを示す StreetViewStatus コードを、この順序で返します。

StreetViewPanoramaData オブジェクト仕様には、ストリート ビュー パノラマに関するメタデータが次の形式で含まれます。

{
  "location": {
    "latLng": LatLng,
    "description": string,
    "pano": string
  },
  "copyright": string,
  "links": [{
      "heading": number,
      "description": string,
      "pano": string,
      "roadColor": string,
      "roadOpacity": number
    }],
  "tiles": {
    "worldSize": Size,
    "tileSize": Size,
    "centerHeading": number
  }
}

このデータ オブジェクトは、StreetViewPanorama オブジェクト自体ではありません。このデータを使用してストリート ビュー オブジェクトを作成するには、StreetViewPanorama を作成して setPano() を呼び出し、戻された location.pano フィールドで示されている ID を渡す必要があります。

status コードは以下のいずれかの値を返します。

  • OK は、一致するパノラマ画像が見つかったことを示します。
  • ZERO_RESULTS は、渡された基準と一致するパノラマ画像が見つからなかったことを示します。
  • UNKNOWN_ERROR は、ストリート ビュー リクエストを処理できず、正確な理由が不明であること示します。

次のコードは、クリック時にその場所の StreetViewPanorama を表示するマーカーを作成することでマップ上のユーザー クリックに応答する StreetViewService を作成します。このコードは、サービスから返される StreetViewPanoramaData のコンテンツを使用します。

/*
 * Click the map to set a new location for the Street View camera.
 */

var map;
var panorama;

function initMap() {
  var berkeley = {lat: 37.869085, lng: -122.254775};
  var sv = new google.maps.StreetViewService();

  panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'));

  // Set up the map.
  map = new google.maps.Map(document.getElementById('map'), {
    center: berkeley,
    zoom: 16,
    streetViewControl: false
  });

  // Set the initial Street View camera to the center of the map
  sv.getPanorama({location: berkeley, radius: 50}, processSVData);

  // Look for a nearby Street View panorama when the map is clicked.
  // getPanoramaByLocation will return the nearest pano when the
  // given radius is 50 meters or less.
  map.addListener('click', function(event) {
    sv.getPanorama({location: event.latLng, radius: 50}, processSVData);
  });
}

function processSVData(data, status) {
  if (status === 'OK') {
    var marker = new google.maps.Marker({
      position: data.location.latLng,
      map: map,
      title: data.location.description
    });

    panorama.setPano(data.location.pano);
    panorama.setPov({
      heading: 270,
      pitch: 0
    });
    panorama.setVisible(true);

    marker.addListener('click', function() {
      var markerPanoID = data.location.pano;
      // Set the Pano to use the passed panoID.
      panorama.setPano(markerPanoID);
      panorama.setPov({
        heading: 270,
        pitch: 0
      });
      panorama.setVisible(true);
    });
  } else {
    console.error('Street View data not found for this location.');
  }
}
<div id="map" style="width: 45%; height: 100%;float:left"></div>
<div id="pano" style="width: 45%; height: 100%;float:left"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
/*
 * Click the map to set a new location for the Street View camera.
 */

var map;
var panorama;

function initMap() {
  var berkeley = {lat: 37.869085, lng: -122.254775};
  var sv = new google.maps.StreetViewService();

  panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'));

  // Set up the map.
  map = new google.maps.Map(document.getElementById('map'), {
    center: berkeley,
    zoom: 16,
    streetViewControl: false
  });

  // Set the initial Street View camera to the center of the map
  sv.getPanorama({location: berkeley, radius: 50}, processSVData);

  // Look for a nearby Street View panorama when the map is clicked.
  // getPanoramaByLocation will return the nearest pano when the
  // given radius is 50 meters or less.
  map.addListener('click', function(event) {
    sv.getPanorama({location: event.latLng, radius: 50}, processSVData);
  });
}

function processSVData(data, status) {
  if (status === 'OK') {
    var marker = new google.maps.Marker({
      position: data.location.latLng,
      map: map,
      title: data.location.description
    });

    panorama.setPano(data.location.pano);
    panorama.setPov({
      heading: 270,
      pitch: 0
    });
    panorama.setVisible(true);

    marker.addListener('click', function() {
      var markerPanoID = data.location.pano;
      // Set the Pano to use the passed panoID.
      panorama.setPano(markerPanoID);
      panorama.setPov({
        heading: 270,
        pitch: 0
      });
      panorama.setVisible(true);
    });
  } else {
    console.error('Street View data not found for this location.');
  }
}

例を見る(streetview-service.html)

カスタム ストリート ビュー パノラマ画像の指定

Google Maps JavaScript API では、StreetViewPanorama オブジェクト内のカスタム パノラマ画像の表示がサポートされます。カスタム パノラマ画像を使用すると、ビルの内部や風光明媚な場所の景色、その他にも考えられるあらゆる画像を表示できます。これらのカスタム パノラマ画像から Google の既存のストリート ビュー パノラマ画像へのリンクも設定できます。

一連のカスタム パノラマ画像を設定するには、次の手順に従います。

  • 各カスタム パノラマの基本パノラマ画像を作成します。この基本画像はズームイン画像を提供するため、最高解像度の画像である必要があります。
  • (オプション、推奨)基本画像から、異なるズームレベルの一連のパノラマ タイルを作成します。
  • カスタム パノラマ画像間のリンクを作成します。
  • (オプション)Google の既存のストリート ビュー画像から「エントリ」パノラマ画像を指定して、カスタム セットと標準セット間のリンクをカスタマイズします。
  • 各パノラマ画像のメタデータを StreetViewPanoramaData オブジェクト内に定義します。
  • カスタム パノラマのデータと画像を確定するメソッドを実装して、そのメソッドを StreetViewPanorama オブジェクト内でカスタム ハンドラとして指定します。

以降のセクションでこの処理について説明します。

カスタム パノラマを作成する

各ストリート ビューのパノラマ画像は、単一地点からの 360 度ビューを提供する 1 枚の画像または画像のセットです。StreetViewPanorama オブジェクトは、正距円筒図法(Plate Carrée 図法)に準拠した画像を使用します。このような図法では、360 度の水平ビュー(周囲全体)と 180 度の垂直ビュー(真上から真下)が含まれています。このような視野では、アスペクト比が 2:1 の画像となります。全周のパノラマ画像を下に示します。

通常パノラマ画像は、1 か所から複数の写真を撮影して、パノラマ ソフトウェアを使用してそれらをスティッチする(つなぎ合わせる)ことで取得します(詳細については、写真スティッチ アプリケーションの比較のウィキペディア記事をご覧ください)。このような画像は、単一のカメラ地点を共有し、そこから各パノラマ画像が撮影されます。次に、生成された 360 度パノラマ画像は、球体の 2 次元表面に包むことで、球体上の投影を定義できます。

パノラマ画像は、直線座標系を使用した球体への投影として扱うと、画像を直線タイルに分割して、計算されたタイル座標に基づいて画像を提供する際に有利となります。

カスタム パノラマ タイルを作成する

ストリート ビューでは、デフォルト ビューからのズームインおよびズームアウトが可能なズーム コントロールを使用して、さまざまなレベルの細かさの画像に切り替えることができます。通常、ストリート ビューでは所定のパノラマ画像に対して 5 レベルのズーム解像度が提供されます。単一のパノラマ画像を使用してすべてのズームレベルを提供しようとすると、このような画像は必然的に大きなものになりアプリケーションを著しく低速化するか、高ズームレベルで非常に粗い解像度となりピクセル化された見劣りする画像を提供することになります。しかし、幸いにも Google のマップ タイルを異なるズームレベルで提供する場合と同様なデザイン パターンを使用して、各ズームレベルのパノラマに適切な解像度の画像を提供できます。

StreetViewPanorama が最初にロードされるときに、デフォルトでズームレベル 1 のパノラマ画像の 25% にあたる幅(90 度の弧)の画像が表示されます。このビューは、標準的な人間の視野とほぼ同じです。このデフォルト ビューからズームアウトすると、本質的により広い弧が提供され、ズームインすると、視野が小さな弧に狭まります。StreetViewPanorama は、選択されたズームレベルに適切な視野を自動的に計算して、水平方向の視界の範囲にほぼ一致するタイルセットを選択することでその解像度に最適な画像を選択します。次に視界とストリート ビューのズームレベルの対応を示します。

ストリート ビューのズームレベル 視界(度)
0 180
1(デフォルト) 90
2 45
3 22.5
4 11.25

ストリート ビュー内に表示される画像のサイズは、ストリート ビュー コンテナの画面サイズ(幅)に完全に依存します。より広いコンテナを表示しても指定のズームレベルの同じ視界が提供されますが、その解像度により適したタイルが代わって選択される場合があります。

各パノラマ画像は正距円筒図法で構成されているため、パノラマ タイルの作成は比較的簡単です。この図法ではアスペクト比が 2:1 の画像が提供されるため、2:1 の比率のタイルは使い勝手が良いですが、正方形のタイルが正方形のマップでより高いパフォーマンスを発揮する場合があります(視界が正方形であるため)。

2:1 タイルでは、パノラマ全体に渡る単一の画像が、ズームレベル 0 でパノラマ「世界」全体(基本画像)を表します。ズームレベルが増加するごとに 4zoomLevel 枚のタイルが提供されます(たとえば、ズームレベル 2 ではパノラマ全体が 16 枚のタイルで構成されます)。注: タイルを使用したストリート ビューでのズームレベルは、ストリート ビュー コントロールを使用して指定されたズームレベルとは直接一致しません。ストリート ビュー コントロールのズームレベルにより、視界(FoV)が選択され、その視界から適切なタイルが選択されます。

通常、画像タイルの名前は、プログラムを使用して選択されるように付与する必要があります。このような命名スキームは、下記のカスタム パノラマ リクエストの処理で説明します。

カスタム パノラマ リクエストの処理

カスタムパノラマ画像の使用を示すには、StreetViewPanoramaOptions panoProvider フィールド内でカスタム パノラマ メソッドを登録するか、StreetViewPanorama.registerPanoProvider() を明示的に呼び出します。パノラマ プロバイダ メソッドは StreetViewPanoramaData オブジェクトを返す関数であり、次のシグネチャを持ちます。

Function(pano,zoom,tileX,tileY):StreetViewPanoramaData

StreetViewPanoramaData は、次の形式のオブジェクトです。

{
  copyright: string,
  location: {
    description: string,
    latLng: google.maps.LatLng,
    pano: string
  },
  tiles: {
    tileSize: google.maps.Size,
    worldSize: google.maps.Size,
    heading: number,
    getTileUrl: Function
  },
  links: [
    description: string,
    heading: number,
    pano: string,
    roadColor: string,
    roadOpacity: number
  ]
}

カスタム パノラマを表示するには、StreetViewPanoramapano プロパティをカスタム値に設定して、panoProvider を設定し、次にそのカスタム pano 値をカスタム パノラマ プロバイダ メソッド内で処理し、StreetViewPanoramaData オブジェクトを構成してそれを返すだけです。

注: カスタム パノラマ画像を表示する場合、StreetViewPanorama 上で position を直接設定しないでください。この場合、position は、ストリート ビュー サービスにその場所に近いデフォルトのストリート ビュー画像をリクエストするように指示します。その代り、この位置をカスタム StreetViewPanoramaDatalocation.latLng フィールド内で設定します。

次の例は、Google シドニー オフィスのカスタム パノラマ画像を表示します。マップ(つまりデフォルトのストリート ビュー画像)を使用していない点に注意してください。

function initPano() {
  // Set up Street View and initially set it visible. Register the
  // custom panorama provider function. Set the StreetView to display
  // the custom panorama 'reception' which we check for below.
  var panorama = new google.maps.StreetViewPanorama(
    document.getElementById('map'), {
      pano: 'reception',
      visible: true,
      panoProvider: getCustomPanorama
  });
}

// Return a pano image given the panoID.
function getCustomPanoramaTileUrl(pano, zoom, tileX, tileY) {
  // Note: robust custom panorama methods would require tiled pano data.
  // Here we're just using a single tile, set to the tile size and equal
  // to the pano "world" size.
  return 'https://developers.google.com/maps/documentation/javascript/examples/full/images/panoReception1024-0.jpg';
}

// Construct the appropriate StreetViewPanoramaData given
// the passed pano IDs.
function getCustomPanorama(pano, zoom, tileX, tileY) {
  if (pano === 'reception') {
    return {
      location: {
        pano: 'reception',
        description: 'Google Sydney - Reception'
      },
      links: [],
      // The text for the copyright control.
      copyright: 'Imagery (c) 2010 Google',
      // The definition of the tiles for this panorama.
      tiles: {
        tileSize: new google.maps.Size(1024, 512),
        worldSize: new google.maps.Size(1024, 512),
        // The heading in degrees at the origin of the panorama
        // tile set.
        centerHeading: 105,
        getTileUrl: getCustomPanoramaTileUrl
      }
    };
  }
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initPano">
</script>
function initPano() {
  // Set up Street View and initially set it visible. Register the
  // custom panorama provider function. Set the StreetView to display
  // the custom panorama 'reception' which we check for below.
  var panorama = new google.maps.StreetViewPanorama(
    document.getElementById('map'), {
      pano: 'reception',
      visible: true,
      panoProvider: getCustomPanorama
  });
}

// Return a pano image given the panoID.
function getCustomPanoramaTileUrl(pano, zoom, tileX, tileY) {
  // Note: robust custom panorama methods would require tiled pano data.
  // Here we're just using a single tile, set to the tile size and equal
  // to the pano "world" size.
  return 'https://developers.google.com/maps/documentation/javascript/examples/full/images/panoReception1024-0.jpg';
}

// Construct the appropriate StreetViewPanoramaData given
// the passed pano IDs.
function getCustomPanorama(pano, zoom, tileX, tileY) {
  if (pano === 'reception') {
    return {
      location: {
        pano: 'reception',
        description: 'Google Sydney - Reception'
      },
      links: [],
      // The text for the copyright control.
      copyright: 'Imagery (c) 2010 Google',
      // The definition of the tiles for this panorama.
      tiles: {
        tileSize: new google.maps.Size(1024, 512),
        worldSize: new google.maps.Size(1024, 512),
        // The heading in degrees at the origin of the panorama
        // tile set.
        centerHeading: 105,
        getTileUrl: getCustomPanoramaTileUrl
      }
    };
  }
}

例を見る(streetview-custom-simple.html)

上の例では、1 つの画像のみが返され、この画像を使用したズームインでは、解像度が低くなります。代わりに、タイル画像を作成して、パノラマ ID、ズームレベル、およびパノラマ タイル座標が渡されたら適切なタイルを返すように panoProvider を変更することで、タイルセットを提供できます。

画像の選択はこれらの渡される値に依存するため、これらの渡される値を使って pano_zoom_tileX_tileY.png などの名前を画像に付けると、プログラムで選択するときに便利です。

次の例は、2 つのレベルのズームが含まれるように若干増補されています。また、デフォルトのストリート ビューのナビゲーション矢印の他に、Google シドニー オフィスを指す別の矢印とカスタム画像へのリンクを画像に追加しています。

var panorama;

// StreetViewPanoramaData of a panorama just outside the Google Sydney office.
var outsideGoogle;

// StreetViewPanoramaData for a custom panorama: the Google Sydney reception.
function getReceptionPanoramaData() {
  return {
    location: {
      pano: 'reception',  // The ID for this custom panorama.
      description: 'Google Sydney - Reception',
      latLng: new google.maps.LatLng(-33.86684, 151.19583)
    },
    links: [{
      heading: 195,
      description: 'Exit',
      pano: outsideGoogle.location.pano
    }],
    copyright: 'Imagery (c) 2010 Google',
    tiles: {
      tileSize: new google.maps.Size(1024, 512),
      worldSize: new google.maps.Size(2048, 1024),
      centerHeading: 105,
      getTileUrl: function(pano, zoom, tileX, tileY) {
        return 'https://developers.google.com/maps/documentation/javascript/examples/full/images/' +
            'panoReception1024-' + zoom + '-' + tileX + '-' + tileY + '.jpg';
      }
    }
  };
}

function initPanorama() {
  panorama = new google.maps.StreetViewPanorama(
      document.getElementById('street-view'),
      {
        pano: outsideGoogle.location.pano,
        // Register a provider for our custom panorama.
        panoProvider: function(pano) {
          if (pano === 'reception') {
            return getReceptionPanoramaData();
          }
        }
      });

  // Add a link to our custom panorama from outside the Google Sydney office.
  panorama.addListener('links_changed', function() {
    if (panorama.getPano() === outsideGoogle.location.pano) {
      panorama.getLinks().push({
        description: 'Google Sydney',
        heading: 25,
        pano: 'reception'
      });
    }
  });
}

function initialize() {
  // Use the Street View service to find a pano ID on Pirrama Rd, outside the
  // Google office.
  var streetviewService = new google.maps.StreetViewService;
  streetviewService.getPanorama(
      {location: {lat: -33.867386, lng: 151.195767}},
      function(result, status) {
        if (status === 'OK') {
          outsideGoogle = result;
          initPanorama();
        }
      });
}
<div id="street-view"></div>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#street-view {
  height: 100%;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize">
</script>
var panorama;

// StreetViewPanoramaData of a panorama just outside the Google Sydney office.
var outsideGoogle;

// StreetViewPanoramaData for a custom panorama: the Google Sydney reception.
function getReceptionPanoramaData() {
  return {
    location: {
      pano: 'reception',  // The ID for this custom panorama.
      description: 'Google Sydney - Reception',
      latLng: new google.maps.LatLng(-33.86684, 151.19583)
    },
    links: [{
      heading: 195,
      description: 'Exit',
      pano: outsideGoogle.location.pano
    }],
    copyright: 'Imagery (c) 2010 Google',
    tiles: {
      tileSize: new google.maps.Size(1024, 512),
      worldSize: new google.maps.Size(2048, 1024),
      centerHeading: 105,
      getTileUrl: function(pano, zoom, tileX, tileY) {
        return 'https://developers.google.com/maps/documentation/javascript/examples/full/images/' +
            'panoReception1024-' + zoom + '-' + tileX + '-' + tileY + '.jpg';
      }
    }
  };
}

function initPanorama() {
  panorama = new google.maps.StreetViewPanorama(
      document.getElementById('street-view'),
      {
        pano: outsideGoogle.location.pano,
        // Register a provider for our custom panorama.
        panoProvider: function(pano) {
          if (pano === 'reception') {
            return getReceptionPanoramaData();
          }
        }
      });

  // Add a link to our custom panorama from outside the Google Sydney office.
  panorama.addListener('links_changed', function() {
    if (panorama.getPano() === outsideGoogle.location.pano) {
      panorama.getLinks().push({
        description: 'Google Sydney',
        heading: 25,
        pano: 'reception'
      });
    }
  });
}

function initialize() {
  // Use the Street View service to find a pano ID on Pirrama Rd, outside the
  // Google office.
  var streetviewService = new google.maps.StreetViewService;
  streetviewService.getPanorama(
      {location: {lat: -33.867386, lng: 151.195767}},
      function(result, status) {
        if (status === 'OK') {
          outsideGoogle = result;
          initPanorama();
        }
      });
}

例を見る(streetview-custom-tiles.html)

フィードバックを送信...

Google Maps JavaScript API
Google Maps JavaScript API
ご不明な点がありましたら、Google のサポートページをご覧ください。