不動産サイトの制作案件で、
Googleのストリートビューパノラマを埋め込む機会がありました。
Googleのストリートビューパノラマを使うと、
そのサイトで紹介する物件の住所を使って、物件の外観を見てもらうことができます。
物件を探している人たちにとって、外観のイメージができれば、
問い合わせにも繋がりやすくなるため、重要な要素といえるでしょう。
ここでは、そのストリートビューパノラマをサイトに埋め込む方法を
共有したいと思います。
APIキーを取得する
まずはGoogleマップを使うために、APIキーを取得します。
取得方法は他のサイトでいくらでも紹介されているので、ここでは省略します。
Googleマップのコールバック関数
GoogleマップのJavascriptを読み込んだ時の、コールバック関数を書きます。
地図ではなく、ストリートビューを表示する時は、
「google.maps.StreetViewPanorama」を呼び出します。
また、設定については、ここでは「scrollwheel」の値をfalseにしています。
これはマップをいじくり回した時に、予期せずマップを拡大したり、
移動したりしないための設定です。
PCから利用する人にとっては結構なストレスになると思いますので、
無効にしています。
そして、「fullscreenControl」の値をtrueにして、
フルスクリーンでの閲覧も有効にしています。
不動産サイトでは物件の外観及び周辺を見れるというのは、
物件選びで大切なことなので、
あえてフルスクリーンで見れるようにしています。
※ iOSでは2019年6月時点で全画面表示に対応していないようです。
レスポンシブデザイン
Googleマップのサイズなどは、別途設定する必要があるため、
最後にレスポンシブデザインに対応するためのCSSを書きます。
