佐賀のホームページ制作なら株式会社イン・ザ・コム

H27.4.24更新[レスポンシブ対応]GoogleMapsストリートビューを埋め込もう!

不動産管理サイトを作りたい!

そうここ1年ほど思っていました。佐賀の不動産屋さんから何件かサイト作成依頼を受けましたが、結局流れていました。

理由は不動産業界っていうのはSUUMO・アットホームなど強すぎる上場企業サイトがあるので、普通のサイトを作っても売れないサイトになってしまうんです。

この度、運良く若くて意識を共有できる不動産管理会社の経営者さんと仕事が出来るようになったので、本当に良かったです。

 

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

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

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

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

 

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

GoogleMapsのコードを取得する(H27.4.24更新)

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

GoogleMapの埋込コード取得方法(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で囲まなくても適用されますからね。

この記事が気に入ったら
いいね!しよう

Twitter で

関連する記事

Copyright © IN THE COM .inc All rights recerved.