WordPressでGoogleマップを埋め込む際に、PC画面では左側に寄った状態で表示されます。
またスマートフォンの画面ではサイズがおかしくなった状態で表示されてしまいます。

ワードプレスでグーグルマップの良いプラグインを探していました。

しかしプラグインなしで表示できる方法を発見。

GoogleMapをプラグインなしでレスポンシブに表示する、またPC画面で画面に合わせて表示する方法・手順を解説します。

Googleマップ iframeの取得方法

グーグルマップのiframeを取得します。

Googleマップを開きます。
表示したい住所を打ち込み、左側の「地図を共有/埋め込む」をクリック。

埋め込みを選択しコピー

ワードプレスの記事に埋め込みます。
埋め込む際はテキストにして埋め込みます。

GoogleMapをレスポンシブサイトに対応させる手順

GoogleMapをレスポンシブサイトに埋め込む方法

レスポンシブに適用させるためにはレスポンシブ用のCSSを使用します。

以下のコードでiframeを囲みます。

※＜＞の部分について、表示の関係のため＜＞で表示しています。
<>に直してください。

これだけではきちんと表示されません。

WordPressの外観→テーマの編集からCSS.styleに以下のコードを挿入。

以上でPC画面はこんな感じ。
スマートフォンではこんな感じに表示されるようになります。

まとめ

私自身、今まで多くの記事でGoogleマップを埋め込み際に、＜iframe＞を直接埋め込んでいました。

スマートフォン（iPhone）で自分の記事をチェックして見てください。

表示が崩れている際にわざわざワードプレスのプラグインを使用しなくても簡単に変更できますよ。