この世界旅行雑記帳では色々な場所を説明するにあたりグーグルマップの埋め込み機能を利用しています。
これによりグーグルマップを記事内で利用することができ、非常に便利です。
これまでは埋め込みをそのままコードをコピーして貼り付けていたのですが、それだとスマートフォンで表示する場合グーグルマップがはみ出してしまうので今回はそれを修正したという内容です。
簡単グーグルマップの埋め込み
このサイトでは場所を説明するのにグーグルマップを頻繁に利用しています。グーグルマップのワードプレスへの埋め込みは非常に簡単です。
・まずは表示させたい場所をグーグルマップで表示
例ではローマのコロッセオにしています。
画面左に表示されている「共有」をクリックします。
すると画面の中央に別のウィンドが開きます。
画面が切り替わり「HTMLをコピー」という青文字が表示されるのでそれをクリックします。
・HTMLコードをワードプレス内に貼り付け
これで地図の埋め込みに必要なHTMLがクリップボードにコピーされているので、これをブログ内の表示したい場所の貼り付けます。
<iframe style=”border: 0;” tabindex=”0″ src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11880.492295235941!2d12.48347616819324!3d41.890210179221214!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x132f61b6532013ad%3A0x28f1c82e908503c4!2z44Kz44Ot44OD44K744Kq!5e0!3m2!1sja!2sit!4v1591474047600!5m2!1sja!2sit” width=”600″ height=”450″ frameborder=”0″ allowfullscreen=”allowfullscreen” aria-hidden=”false”></iframe>
コロッセオの場合は上のHTMLコードが地図を表示させるコードです。ビジュアル編集している方は必ずテキスト編集の画面に貼り付けしてください。
表示されたものが下の地図です。
以上の方法でグーグルマップを表示させることができます。
しかしこの方法ではコンピューターでは上記の様に表示されますが、スマートフォンでは一部が画面に収まり切れない状態で表示されています。
スマートフォンでも画面に収まるように設定
実際にスマートフォンで表示させた場合下の画面となります。
コロッセオのマークが画面右端で切れています。これを画面内に収まるように修正します。
先ほどのワードプレスに地図を埋め込むコードの一部を変更します。
HTMLのコードの中に「width=”600″」という表記があります。これはwidth幅が600という設定なのですが、これを「width=”100%”」に書き換えます。
これを書き換えて保存し、表示すると地図はきちんと画面の中に納まって表示されます。
サイト内のグーグルマップを一気に変換
今までサイト内で埋め込み地図を多く使っていた場合、この方法で一つ一つの記事を訂正していくのは手間と時間がかかります。
そういった場合はプラグイン「Search Regex」を利用すると一瞬ですべてを修正できます。
ワードプレスの場合は「プラグイン」→「新規追加」→プラグインの検索で「Search Regex」を検索→インストール→有効化
次は「ツール」の項目から→「Search Regex」で下の画面が表示されます。
検索欄に→「width=”600″」を記入し
置換欄に→「width=”100%”」を記入して
「全て置換」のボタンをクリックします。するとサイト内の「width=”600″」がすべて「width=”100%”」に置き換わります。
グーグルマップの埋め込み以外で「width=”600″」を使っている方は気を付けてください、そちらも置換されしまいます。
これでサイト内のグーグルマップはすべて変換されたことになります。
今回は以上です。
＜関連リンク＞
撮影した写真からGPS情報を知り、地図に表示させる方法。googleフォト利用
【イタリア旅行、お得20】グーグルマップを活用するとお得
イタリア旅行に持っていくと便利なグッズ
