WordPress - Googleマップの地図を埋め込む

WordPress の投稿ページや固定ページに、 Googleマップの地図を埋め込む方法を紹介します。

どこかの場所を示すのに地図が表示されていると、 より親切でわかりやすいWebページになります。

Googleマップを埋め込む

表示したい場所を、Googleマップで開く

まずはGoogleマップを開いて、地図を表示させます。

今回は例として羽田空港周辺のマップを表示しています。

地図を表示させる

メニューをクリック

Googleマップの左上にあるメニュー(三本線)をクリックします。

メニューをクリック

地図を共有または埋め込むをクリック

メニュー一覧の真ん中より下にある「地図を共有または埋め込む」をクリック。

地図を共有または埋め込む

地図を埋め込むを選択

「共有」画面が表示されますので、「地図を埋め込む」をクリック。

地図を埋め込むを選択

サイズを選択

左上に地図のサイズを選択するボックスがあるのでクリック。

サイズを選択

表示サイズを選択

WordPressのページに表示したいサイズを選択します。

今回は「中」を選択しました。

「カスタムサイズ」を選択すると自分で好きなサイズに設定できます。

表示サイズを選択

HTMLをコピー

右上の「HTMLをコピー」をクリックすると、 クリップボードにHTMLコードがコピーされます。

HTMLをコピー

HTMLを貼り付ける

先程コピーしたHTMLコードをWordPressのエディタに貼り付けます。

この時、「テキスト」タブを選択した状態でHTMLコードを貼り付けるようにしてください。

HTMLを貼り付ける

地図を確認

「ビジュアル」タブをクリックすると、地図が表示されます。

正しく表示されているか確認してください。

「プレビュー」ボタンでもOKです。

地図を確認

残りの情報を入力

後は、地図以外の情報を入力して保存します。

これでGoogleマップを埋め込むことができます。

まとめ

このように、

  • 地図を表示
  • HTMLコードをコピー
  • HTMLコードを貼り付け

という簡単な作業で地図を埋め込むことができます。

ぜひGoogleマップの地図を有効活用して、ユーザーに役立つページを作ってください。

スポンサードサーチ

シェアする

  • このエントリーをはてなブックマークに追加

フォローする