会社や店舗等の所在地を表示するのにGoogleマップを埋め込んでいるWebサイトって多いですよね。実はこれらのマップは無料かつ簡単にサイト上に表示できます。

当記事では、下記のようなGoogleマップをWordPressサイトに埋め込む方法について解説します。

Googleマップを埋め込む手順

通常のGoogleマップをサイト上に表示するだけなら下記の手順で埋め込めます。

  1. Googleマップで目的地を検索
  2. 埋め込みコードを取得
  3. 埋め込みコードを貼り付け

Googleマップで住所検索

下記よりGoogleマップを開き、画面左上の検索フォームから表示したいマップの住所を検索してください。今回は大阪駅の住所を例に解説します。

Googleマップで住所検索

Google

目的地の埋め込みコードを取得

目的地の住所を探せたら共有ボタンを押します。

目的地を探して共有

次に「地図を埋め込む」を選択します。

地図を埋め込むを選択

HTMLコードが生成されるので、「HTMLをコピー」を押して埋め込みコードを取得します。この時、「中」と書かれたボタンを押すとマップのサイズを選択することができます。

HTMLコードを取得

埋め込みコードの貼り付け

先程取得したHTMLコードをWordPressの各エディタに貼り付けるとマップが表示されるようになります。

  • クラシック
  • ブロック

クラシックエディタの場合は、テキストエディタに取得したHTMLコードを入力してください。

ブロックエディタの場合は、カスタムHTMLブロックを追加してHTMLコードを入力してください。

まとめ

Googleマップは意外と簡単に埋め込めますよね。しかし、地図の配色の変更やマーカーのカスタマイズを行う場合は、Google Maps JavaScript APIの利用が必要になります。TCDテーマには、これらのAPIを使って下記のようなマップを表示できます。TCDユーザーの方はぜひご活用ください。(例:CURE

TCDテーマのGoogleマップ

なお、これらのAPIを使用するには、Google Maps Platformに登録してAPIキーを取得する必要があります。詳細な設定方法は下記に記載しておりますので、ぜひご覧ください。