サポートに戻る コンテンツとメディア ブロック 埋め込みブロック Google マップから埋め込む

Google マップから埋め込む

Google マップは地図や道順を表示できる人気の無料ツールです。このガイドでは、WordPress.com サイトに Google マップを埋め込む (表示する) 方法について説明します。

Google マップを埋め込む

次の手順に従って、WordPress.com サイトの任意のページに Google マップを埋め込むことができます。

ステップ1: マップの埋め込みコードを取得する

  1. Google マップにアクセスします。
  2. 任意の住所または地理的位置を検索し、「共有」ボタンをクリックします。
Google マップのリストにある「共有」ボタンを指す矢印。
  1. 表示されるポップアップで「マップを埋め込む」タブを選択します。
  2. 「HTML をコピー」ボタンをクリックしてボックスから HTML コード全体をコンピューターのクリップボードにコピーします。コードは <iframe で始まります。
「HTML をコピー」ボタンを指している矢印。

ステップ2: サイトに埋め込みコードを追加する

  1. サイトのページを WordPress エディターで開きます。
  2. カスタム HTML ブロックを追加するには「ブロック挿入アイコン」をクリックします。
  3. 完全な埋め込みコードをブロックに貼り付けます。
  4. 「公開」「更新」、または「保存」のボタンをクリックしてサイトにマップを表示します。

次にページまたは投稿を編集する際に、埋め込みコードがショートコードに変換されています。

Google マップのショートコードが表示されます。

コードが機能しない場合は物理アドレスを使用してみてください。物理的な住所ではなく、経度と緯度の座標で作成された住所では、実用的なコードが提供されない場合があります。

埋め込まれた Google マップの例

以下は埋め込みマップの例です。

カスタムマップを埋め込む

Google マップには、ピン、複数の場所、パーソナライズされたアイコンなどを使用して、独自のカスタムマップを作成する機能が用意されています。以下の手順でカスタムマップをサイトに埋め込むことができます。

  1. マイマップにアクセスします。
  2. 作成済みのマップを選択するか、新しいマップを作成します。
  3. 「共有」オプションを使用してマップを公開します。
  4. マップ名の横にある省略記号 (3つの点) をクリックすると、追加オプションが表示されます。以下に示すように、ウィンドウが表示されます。
  5. そのリストから「参加サイトに埋め込む」を選択します。これにより埋め込みコードが表示されたウィンドウが開きます。コード全体をコピーします。
    embed-this-map
  6. 通常のマップの場合は同じ手順に従ってサイトに埋め込みコードを追加します。
Copied to clipboard!