介護付き有料老人ホーム 青藍の郷 様のウェブサイトにグーグルマップ（360度パノラマ写真）を埋め込ませて頂きました。
いつもお世話になっております 医療法人 介護付き有料老人ホーム 「青藍の郷」様からのご依頼です。
もくじ
ご相談内容
以前、施設概要ページに「パノラマ写真」へのリンクが合ったのですが、何らかの際に表示が消えてしまっています。
というご相談を頂きました。
弊社でバックアップは取らせて頂いておりましたが、せっかくの機会ですので直接埋め込むご提案をさせて頂きました。
パノラマ写真とは？
館内を360度撮影した写真をつなぎ合わせたもの。
実際の画像がこちら
その場所に行かなくても確認ができる物です。
（ストリートビューと似ていますが、こちらは自身で準備または依頼する必要があります）
実際のページ
施設概要
https://seiran-sato.com/about
１階と２階フロアの２点を埋め込みさせて頂きました。
もちろん、スマートフォン対応（レスポンシブ）となっております。
料金について
保守範囲内ですので無料。
通常料金
5,000円（税別）
介護付き有料老人ホーム 青藍の郷 様のご案内
- 〒639-1136
- 奈良県大和郡山市本庄町312-1
- TEL：0743-56-8003（9:00~17:00）
- ホームページ：https://seiran-sato.com
ご挨拶
ご相談頂きありがとうございました。
気に入って頂けまして幸いです。またいつでもご連絡下さいませ。
今後ともどうぞ宜しくお願い致します。
360度パノラマ写真の埋め込み方法
スポンサーリンク
手順１ 建物や住所から埋め込みたい画像を表示させる
手順２ メニューから「画像を共有または埋め込む」を選択
手順３ 「地図を埋め込む」を選択
手順４ 「カスタムサイズ」から任意のサイズを入力
手順５ 出来上がった html コードをコピー
実際のコードがこちら
<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:～ の追記は不要です。
参考になれば幸いです。
スポンサーリンク