ブログ記事にGoogleマップを埋め込む方法【WordPress】

ブログ記事を書いていると、おすすめ場所の説明や店舗の位置情報を紹介したくなる場面は必ずやってきます。

ゴリぞう

そんな時に、Googleマップは欠かせないサービスだよな。

にっちょめ

WordPressのブロックエディタ『Gutenberg』なら、簡単にGoogleマップを埋め込むことが出来ます。

Googleマップは使い慣れている方も多いツール。活用することで、ユーザーにもわかりやすくブログクオリティ向上にも繋がります。

ということで今回は、

WordPressを使用した『ブログ』、『Webサイト』に、Googleマップを埋め込む方法を解説していきます。

Contents

Googleマップをブログに貼り付ける手順

Googleマップをブログ記事に埋め込む手順は3つ。

  • Googleマップで建物や場所を検索する
  • 埋め込みコードをコピーする
  • 埋め込みコードを貼り付ける

Googleマップを埋め込むことが出来るのは、『PCブラウザ版』からのみとなっています。

スマホのGoogleマップからは出来ないので注意しましょう。

Googleマップで目的地を検索

今回は大阪城を例に解説していきます。

PCブラウザ版のGoogleマップを開き、表示させたい目的地を検索。

Googleマップのコードを取得

次に、「埋め込みリンク」のコードを生成します。

目的地があっているのを確認したら「共有」をクリック。

共有ページで「地図を埋め込む」を選択します。

ブログに埋め込む「地図のサイズ」を変更したい場合は、「中」のプルダウンからサイズを変更できます。

自分のブログや、ウェブサイトの幅を確認しながら設定しましょう。

各サイズ感はこんな感じになっています。

小サイズ 400×300

Contents
閉じる