【初心者でも簡単】WordPressサイトにGoogle マップを埋め込む方法

【初心者でも簡単】WordPressサイトにGoogle マップを埋め込む方法

店舗や企業などのホームページでは、所在地の地図を載せるのはほぼ必須だと思います。ワードプレスでホームページを自作して、どうしたらいいのだろう?という方のために、ご自身のサイトにGoogleマップを埋め込む方法をご紹介させていただきます。

Contents

Googleマップとは

Googleマップは、グーグルが提供している地図情報サービスで、ほぼ全世界の地図データ、航空写真が取り込まれています。

これらの地図情報は、個人・企業に関わらず無償で公開・提供されているので、だれでも無料で活用することができます。

Googleマップを埋め込む流れ

  1. Googleマップにアクセスして場所を検索
  2. 地図のHTMLコードを生成、コピーする
  3. 自分のサイトにHTMLコードを貼り付ける

流れとしてはこれだけですので、非常に簡単です。

1.Googleマップにアクセスして場所を検索

こちらのURLにアクセスして、右上の検索欄に住所または施設名を入力します。

Googleマップ:https://www.google.co.jp/maps/

2.地図のHTMLコードを生成、コピーする

検索した住所の地図が表示されたら、「共有」をクリックします。

「地図を埋め込む」をクリック。

「HTMLをコピー」をクリックすると<iframe …のHTMLコードがコピーされます。

3.自分のサイトにHTMLコードを貼り付ける

今度は、ご自分のWordPressサイトの貼り付けたいページの編集画面に行って、コピーしたHTMLコードを貼り付けます。

固定ページか投稿ページの編集画面で、ブロックの追加をクリックし、「カスタムHTML」をクリックします。

そこに先ほどのHTMLコードを貼り付ければ完成です。

実際にホームページを表示してみて、正常に地図が表示されていれば完成です。

まとめ&サイズの調整方法

Googleマップの埋め込みは、やり方はとても簡単ですのでお勧めです。

ちなみに地図のサイズを変えたい場合は、下の赤枠で囲った、width=”横幅px”、height=”高さpx”、の数値を変えればOKです。

地図の表示をコンテンツ幅いっぱいにしたい場合は、width=”100%”にしてください。

関連記事 Related Articles