THE THOR(ザ・トール) 記事にGoogleマップを埋め込む

THE THOR 記事一覧

THE THOR にGoogleマップを載せたのですが、素直に載せることができなかったので防備録的にTHE THORでGoogleマップを埋め込む手順を記事にします。

先日の記事 >> コワーキングスペース コトコト 千葉 おっさんの初体験

THE THOR でGoogleマップを記事に埋め込む手順

THE THOR Googleマップ 埋め込み

  1. Googleマップを開き、目的地を表示(ここでは東京タワー)
  2. 共有ボタンクリック
  3. 共有ウインドウで「地図を埋め込む」を選択
  4. HTMLをコピーしてサイトの任意の場所に貼り付け

 

Googleマップで出来上がったコード(サンプル東京タワー)
<iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.7479754683695!2d139.74324421524605!3d35.65858048019958!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1541993607255″ width=”600″ height=”450″ frameborder=”0″ style=”border:0″ allowfullscreen></iframe>

通常であればこれで完了です。

しかしスマホで閲覧すると横幅が大きくなってしまいました。

 

スマホで見るGoogleマップの横幅を改善する

サンプルで作った東京タワーのコードを見ると横幅と縦幅が指定されていますので変更します。

width=”600″ height=”450″ ⇒ width=”100%” height=”400″

 

横幅は100%、縦幅は好みで。

 

これでスマホ閲覧時にもはみ出ることなくGoogleマップが表示されるようになりました。

 

あとがき

HTMLを少しいじるだけなので問題はないと思いますが作業は自己責任でお願いします。

height を省略すると最小の縦幅で表示されるようです。

とりあえず地図があることをグラフィック的に表示して詳細はクリックしてもらおう、という場合は省略しても良いかと思います。

THE THOR 記事一覧