塩焼きブログ

塩焼きに関しての研究内容を公開しています

Google Maps JavaScript API v3によるストリートビューの設置

一般的なストリートビューの設置にはStreet View containersを使う

まずindex.htmlというファイルを作成し、必要なライブラリを読み込んだ後、ストリートビューの描画エリアを定義する。

# index.html
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="street-view.js"></script>
<div id="map-canvas" style="width: 400px; height: 400px;"></div>

google.maps.LatLng()で座標を指定し、panoramaOptionsでパノラマビューの角度や向きを設定できる。

# map-canvas.js
function initialize() {
  var bryantPark = new google.maps.LatLng(37.869260, -122.254811);
  var panoramaOptions = {
    position: bryantPark,
    pov: {
      heading: 165,
      pitch: 0
    },
    zoom: 1
  };
  var myPano = new google.maps.StreetViewPanorama(
      document.getElementById('map-canvas'),
      panoramaOptions);
  myPano.setVisible(true);
}

Street View eventsではリアルタイムでストリートビューの数値を取得する例が紹介されている。

Google Street View Image APIJavaScriptを使用せず、ストリートビューを画像で出力する。単なる画像のためユーザーによるコントロールはできないが、JavaScriptを使用できない環境でもストリートビューの資源を活用できる。