[レスポンシブ対応]GoogleMapsストリートビューを埋め込もう！

 

賃貸・売買サイトではとにかく情報を分かりやすく、詳しく、問い合わせしやすいようにすることが大切です。

そのためには物件画像は最低10枚以上必要ですし、今からは紹介動画も物件ごとに用意する必要があります。

そんな中、GoogleMapsのストリートビューの導入は非常に重要です。不動産屋に合う前にサイトで周辺環境・物件の中身を確認できて、あとは現地にいってちょっと確認するだけ、ってことになったら素晴らしいじゃないですか。

実体験として、私は事務所を借りるときに10件近く物件を見まわりました。サイトで詳しく載ってたら行かなかったのに！というところが半分くらいあって、サイトの充実というのは訪問者にとってものすごく重要だと感じています。

 

今回紹介するのはストリートビューのレスポンシブサイト導入方法です。

GoogleMapsのコードを取得する

H27.4.24に確認したところ以下の方法でコードが取得できます。

レスポンシブサイトの場合、横幅をwidth:100%;にすることが多いのでコードはそのままコピーします。

貼り付けの際には

<div class="ggmap">iframeのコピーしたコード</div>

レスポンシブにするためのCSSコード

以前書いた記事　【コピペOK】GoogleMapの地図をレスポンシブサイトに埋め込む方法　にも書いています。

.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.ggmap iframe,
.ggmapr object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.post iframeなどで指定してもいいと思います。そうするといちいち.ggmapで囲まなくても適用されますからね。

【コピペOK】GoogleMapの地図をレスポンシブサイトに埋め込む方法