目次
WordPressにGoogleMapを埋め込む方法を解説します
WordPress（ワードプレス）でサイト運営をしていると、ページ内に地図を表示させたくなるケースもありますよね。
そのような場合には、下記の例のように広く普及しているGoogleMap（グーグルマップ）をWordPressに埋め込んで、地図を表示させる方法が便利です。
今回は、WordPressを利用してサイト運営している方が、サイト内にGoogleマップを埋め込む方法について詳しく解説していきます。
記事内では、初心者の方にもわかりやすいように、画像付きでご紹介していきますので、ぜひ参考にしてみてくださいね。
WordPressへのGoogleMap（グーグルマップ）埋め込み方法とは
ここからは、実際にWordPressへGoogleマップを埋め込む方法を解説していきます。
まずは、Googleマップ（https://www.google.co.jp/maps/）にアクセスします。
Googleマップを開いたら、画面右上にある検索窓に、埋め込みたい地点の名称や住所などを入力しましょう。
今回は、例として「東京駅」を検索してみます。
「東京駅」と入力すると、いくつかの候補が検索窓の下に表示されるので、該当のものをクリックすると、下記のように、その地点の詳細ページが表示されます。
続いて、WordPressに埋め込むためには、詳細ページの「共有」ボタンをクリックします。
すると、共有メニューが表示されるので、「リンクを送信する」ではなく、「地図を埋め込む」をクリックしましょう。
下記のように、地図が表示されている画面に遷移するので、挿入する地図の大きさを選択するために画面左端にある「▼」マークをクリックして、「小・中・大・カスタムサイズ」の中から希望のサイズを選択しましょう。
「小・中・大・カスタムサイズ」それぞれのサイズは、下記の通りです。
- 「小」
400px × 300px - 「中」
600px × 450px - 「大」
800px × 600px - 「カスタムサイズ」
お好みのサイズを自分で入力
ちなみに、「カスタムサイズ」を選択した場合には、下記のような画面でお好みのサイズを入力すれば、希望のサイズで表示することができます。
「小・中・大・カスタムサイズ」いずれかのサイズを選択できたら、画面右端にある「HTMLをコピー」をクリックしましょう。
（※「カスタムサイズ」を選択した場合は、サイズ調整画面にある「HTMLをコピー」をクリックしてください。）
続いて、WordPress管理画面にアクセスし、地図を挿入したいページの編集画面を開きましょう。
編集画面では「ビジュアルモード」ではなく、「テキストモード」を選択して、地図を挿入したい箇所に先ほどコピーしたHTMLのコードを貼り付けてください。
「更新」ボタン（もしくは「公開」ボタン）をクリックして、プレビュー表示を確認すると、正常に地図が表示されるでしょう。
これにて、Googleマップの埋め込み作業は完了です。
WordPressにGoogleマップを埋め込みたいのに、住所検索すると実際の場所と異なる地点が表示される時の対処法
WordPressにGoogle Mapを埋め込みたいのに、Google Map上で検索しても、実際の場所とは異なる、少しズレた地点が表示されるケースがあります。
実際に、新しくできた住所などは、Google Map上で正しい住所を入力して検索したとしても、ズレた地点が表示されることも多いです。
そのような場合には、下記のような座標を用いた対処法を試してみてください。
座標を用いた対処法
まずは、Googleマップ（https://www.google.co.jp/maps/）にアクセスし、地図上でWordPressに埋め込みたい正しい地点をクリックします。（※今回は、東京駅付近の任意の地点を例にご説明していきます。）
該当の地点をクリックすると、下記のように「グレー色のピン」が、地図上に表示されます。
そして、画面下部には、その地点の座標（緯度・経度）がグレー色で表示されているので、座標をクリックしましょう。
すると、下記のように、該当の座標で検索した地点が表示されます。
ここからは、前項でご紹介した通り、「共有」ボタンから地図埋め込みのHTMLをコピーして、WordPressに埋め込んでください。
ホームページ運営でお悩みの場合は、弊社にご相談ください
今回は、WordPressにGoogleマップを埋め込む方法についてご紹介しました。
ホームページを運営しているけど、「よくわからないことが多いから相談したい」「専門的で難しいから、作業を代行してほしい」などの場合には、弊社にお問い合わせください。
弊社にお問い合わせいただく70％は、専門知識を持たれていない読者様からです。
わかりやすい言葉でご説明させていただくように心がけておりますので、お気軽にご相談くださいね。
下記の画像をクリックしていただくと、無料診断フォームに遷移します。
関連記事
