Google Maps ストリートビュー

Google Maps のストリートビュー を表示する組み込みJSです。

この組み込みJSを活用することで、  Google Maps JavaScript API を活用し、 Google Maps のストリートビューを表示することができます。

使い方

Google Maps のストリートビュー を表示したい要素の class 属性に js-street-view を設定します。

さらに、data 属性を指定することで経度、緯度、zoom値などを指定できます。

<div 
  class="js-street-view"
  data-lazy="true"
  data-lat="37.869260"
  data-lng="-122.254811"
  data-pitch="0"
  data-zoom="10"
  data-heading="165"
  style="width: 100%; height: 500px;"
></div>

表示領域（viewport）に入るまで、組み込みJSの実行を遅延させる

Google Maps のストリートビューが画面の下部に存在する場合、組み込みJSの実行を、表示領域（viewport）に入るまで遅延させることで、パフォーマンスを向上させることが可能です。

data-lazy 属性の値に true を指定することで、組み込みJSの実行を遅延させることができます。

<div 
  class="js-street-view"
  data-lazy="true"
  data-lat="37.869260"
  data-lng="-122.254811"
  data-pitch="0"
  data-zoom="10"
  data-heading="165"
  style="width: 100%; height: 500px;"
></div>

設定

この機能の設定は、/js/config.js で設定されています。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて：設定を編集する」を参照してください。