こんにちは！やさしいワードプレスの田中です。

あなたはワードプレスでこんなお困りごとはありませんか？？

Googleマップ（地図）はどうやって記事に埋め込んだらいいの…

この記事ではGoogleマップを使った「ワードプレスに地図を埋め込む方法」を初心者にもできるように解説します。

地図を埋め込むことでサイトに信頼性が出るので、ぜひ参考にされてくださいね。

Googleマップ（地図）を埋め込む方法

Googleマップ（地図）を埋め込む作業は以下の３ステップです。

【１】Googleマップで住所入力
【２】コードを取得
【３】Googleマップを記事に埋め込む

特に難しい作業はなく簡単に設定できるので、初心者の方も挑戦してみてくださいね。

（１）Googleマップで住所入力

まずは「Googleマップ」を開き、住所・名所を入力します。

住所・名所を下記の赤枠の中へ入力し、虫眼鏡のマークをクリックすると、その住所の地図が表示されます。

（２）コードを取得

次に記事に埋め込む「コードを取得」します。

先ほど入力した名所・住所から下記の赤枠の「共有」をクリックします。

「共有」をクリックすると下記のような画面が出てくるので、「地図を埋め込む」に切り替えます。

「地図を埋め込む」に切り替えると下記の画面が表示されます。

赤枠の「大・中・小」で埋め込む地図のサイズを選択できます。

埋め込む地図のサイズ
【大】４００ × ３００
【中】６００ × ４５０
【小】８００ × ６００

基本的に記事に埋め込むのであれば「中 ６００ × ４５０」で問題ありません。

サイズを選択すると下記の赤枠の箇所にコードが表示されます。

こちらを記事に埋め込むとGoogleマップ（地図）が表示されるようになります。

実際のコードをコピペしてもいいですが、右側の「HTMLをコピー」を押すとワンクリックでコピーが可能なので、ぜひそちらを活用されてくださいね。

（３）Googleマップを記事に埋め込む

では、実際にGoogleマップを記事に埋め込んでいきます。

埋め込む方法は、

【１】クラシックエディッター
【２】グーテンベルク

２通りの方法があるので、それぞれ解説していきます。

クラシックエディッターの埋め込み方法

ワードプレスの地図を埋め込む記事を開き、下記の赤枠をクリックし「テキストモード」にします。

Googleマップで「HTMLをコピー」をそのまま添付しすれば完了です。

実際に表示されているか「ビジュアルモード」に戻し、確認してみましょう！

グーデンベルグでの埋め込み方法

次はグーデンベルグでの埋め込み方法です。

埋め込む記事を開き「ブロック→カスタムHTML」を選択します。

」

「カスタムHTML」を選択すると下記の画面が表示されます。

そこにGoogleマップで取得したコードを添付すれば完成です！

実際に設置されているか確認してみましょう。

確認方法は「プレビュー」に切り替えるとできるので必ず確認されてくださいね。

スマホ表示での「Googleマップ」サイズ対策

Googleマップですが「スマホ表示」だと横幅がはみ出して表示される可能性があります。

なので、スマホ画面の枠にしっかりと表示されるように設定しましょう！

ではどうやって設定するのか？？先ほど添付したコードを修正していきます。

添付したコード（iframeタグ内）にある「width=”600″」を「width=”100％”」に変更すればOKです。

まとめ

「【ワードプレス】Googleマップ（地図）の埋め込む方法」はいかがだったでしょうか？？

Googleマップ（地図）を埋め込む作業は、こちらの３ステップです。

【１】Googleマップで住所入力
【２】コードを取得
【３】Googleマップを記事に埋め込む

Googleマップを埋め込むことで、しっかりと場所が特定できるのでサイトの信頼が向上します。

初心者でも簡単にできるので、ぜひやってみてくださいね。

この記事がワードプレスを活用する上で、何かお役に立つことができれば幸いです。

最後まで読んでいただきありがとうございます。