介護付き有料老人ホーム 青藍の郷 様のウェブサイトにグーグルマップ(360度パノラマ写真)を埋め込ませて頂きました。

2019-06-13備忘録, サポート

いつもお世話になっております 医療法人 介護付き有料老人ホーム 「青藍の郷」様からのご依頼です。

ご相談内容

以前、施設概要ページに「パノラマ写真」へのリンクが合ったのですが、何らかの際に表示が消えてしまっています。

というご相談を頂きました。

弊社でバックアップは取らせて頂いておりましたが、せっかくの機会ですので直接埋め込むご提案をさせて頂きました。

パノラマ写真とは?

館内を360度撮影した写真をつなぎ合わせたもの。

実際の画像がこちら

その場所に行かなくても確認ができる物です。
(ストリートビューと似ていますが、こちらは自身で準備または依頼する必要があります)

実際のページ

施設概要
https://seiran-sato.com/about

1階と2階フロアの2点を埋め込みさせて頂きました。

もちろん、スマートフォン対応(レスポンシブ)となっております。

料金について

保守範囲内ですので無料。

通常料金

5,000円(税別)

介護付き有料老人ホーム 青藍の郷 様のご案内

青藍の郷 トップ画像

  • 〒639-1136
  • 奈良県大和郡山市本庄町312-1
  • TEL:0743-56-8003(9:00~17:00)
  • ホームページ:https://seiran-sato.com

ご挨拶

ご相談頂きありがとうございました。

sato-mail.2019.6.13

気に入って頂けまして幸いです。またいつでもご連絡下さいませ。

今後ともどうぞ宜しくお願い致します。

360度パノラマ写真の埋め込み方法

スポンサーリンク

手順1 建物や住所から埋め込みたい画像を表示させる

seiran-map1

手順2 メニューから「画像を共有または埋め込む」を選択

グーグルマップ埋め込み手順2

手順3 「地図を埋め込む」を選択

グーグルマップ埋め込み手順3

手順4 「カスタムサイズ」から任意のサイズを入力

グーグルマップ埋め込み手順5

グーグルマップ埋め込み手順6

手順5 出来上がった html コードをコピー

グーグルマップ埋め込み手順6

実際のコードがこちら

<iframe src="https://www.google.com/maps/embed?pb=!4v1560413129428!6m8!1m7!1sCAoSLEFGMVFpcE1hMGtaUGluYXZ1UnBPZWZ1eUZIVTg2amF1U0liSy0yUmoySHVq!2m2!1d34.63745899156496!2d135.7867889999384!3f80!4f0!5f0.7820865974627469" width="800" height="400" frameborder="0" style="border:0" allowfullscreen></iframe>
このままだとスマートフォンに対応していない(はみ出る)ので書き換えます。
<iframe src="https://www.google.com/maps/embed?pb=!4v1560413129428!6m8!1m7!1sCAoSLEFGMVFpcE1hMGtaUGluYXZ1UnBPZWZ1eUZIVTg2amF1U0liSy0yUmoySHVq!2m2!1d34.63745899156496!2d135.7867889999384!3f80!4f0!5f0.7820865974627469" width="100%" height="400" frameborder="0" style="border:0;max-width:1000px;" allowfullscreen></iframe>
width=”800″ → width=”100%”

これで、端末問わずにぴったり収まります。

さらに、style に

max-width:1000px;

最大サイズを指定してあげることで、1000pxを超える画面サイズ(PC表示)では、指定のサイズで表示されます。

PCサイズでも画面幅いっぱいに表示したい場合は、max-width:~ の追記は不要です。

参考になれば幸いです。

スポンサーリンク