WordPressのテーマ THE THOR を使用して記事に Google マップ を掲載したい。スマホの画面に収まるようレスポンシブにしたい。
そんな要望にお応えします。
THE THOR についてザ・トール レビュー
サンプル記事コワーキングスペース コトコト千葉
目次
THE THOR Google マップ を記事に埋め込む手順
- Googleマップを開き、目的地を表示（サンプルは東京タワー）
- 共有ボタンクリック
- 共有ウインドウで「地図を埋め込む」を選択
- 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″
横幅(width)は100%、縦幅(height)は好みで。
これでスマホ閲覧時にもはみ出ることなくGoogleマップが表示されるようになりました。
あとがき
HTMLを少しいじるだけなので問題はないと思いますが作業は自己責任でお願いします。
ちなみに height を省略すると最小の縦幅で表示されるようです。
とりあえず地図があることをグラフィック的に表示して詳細はクリックしてもらおう、という場合は省略しても良いかと思います。
コメント