Google ストリートビューパノラマを埋め込む

不動産サイトの制作案件で、
Googleのストリートビューパノラマを埋め込む機会がありました。

Googleのストリートビューパノラマを使うと、
そのサイトで紹介する物件の住所を使って、物件の外観を見てもらうことができます。
物件を探している人たちにとって、外観のイメージができれば、
問い合わせにも繋がりやすくなるため、重要な要素といえるでしょう。

ここでは、そのストリートビューパノラマをサイトに埋め込む方法を
共有したいと思います。

APIキーを取得する

まずはGoogleマップを使うために、APIキーを取得します。
取得方法は他のサイトでいくらでも紹介されているので、ここでは省略します。

Googleマップのコールバック関数

GoogleマップのJavascriptを読み込んだ時の、コールバック関数を書きます。
地図ではなく、ストリートビューを表示する時は、
「google.maps.StreetViewPanorama」を呼び出します。

また、設定については、ここでは「scrollwheel」の値をfalseにしています。
これはマップをいじくり回した時に、予期せずマップを拡大したり、
移動したりしないための設定です。
PCから利用する人にとっては結構なストレスになると思いますので、
無効にしています。

そして、「fullscreenControl」の値をtrueにして、
フルスクリーンでの閲覧も有効にしています。
不動産サイトでは物件の外観及び周辺を見れるというのは、
物件選びで大切なことなので、
あえてフルスクリーンで見れるようにしています。
※ iOSでは2019年6月時点で全画面表示に対応していないようです。

レスポンシブデザイン

Googleマップのサイズなどは、別途設定する必要があるため、
最後にレスポンシブデザインに対応するためのCSSを書きます。

サンプルとコード

Example

ABOUTこの記事をかいた人

フリーランスとして働く、フルスタックエンジニア 初崎 匠のサイト。仕事のことから趣味のアニメーション制作、英語学習など、様々なことを通じて、少しでも多くの人が幸せになれるような価値を提供できるよう挑戦し続けます。