ワードプレスのブログ記事にGoogleマップを埋め込む2ステップ

スポンサードリンク

「ブログ記事の中にGoogleマップを埋め込みたいなぁ・・・。」

何かの建物の場所や住所などを示すのに、こう思うことってありますよね。

一件難しそうに思いますが、ブログ記事の中へのGoogleマップの埋め込みは、

  • 埋め込みコードを取得すること
  • コードを記事に貼り付けること

というたった2つだけで出来てしまうのです。

ぜひこの記事をご覧いただき、マップの埋め込みをマスターしてくださいね!

グーグルマップの埋め込みコードを取得する方法

まずは記事にGoogleマップを埋め込むためのコードを取得します。

まずは自分が記事の中で紹介したい建物の場所を地図内で指定します。

Googleマップはこちら

マップを開いたら、左上の検索窓に建造物名もしくは、住所を入力します。

マップの使い方

次に「共有」をクリックします。

共有をクリック

「地図を埋め込む」をクリックし、「中」と書いてあるタブをクリックします。

ここでは埋め込む地図のサイズを選ぶことができます。

  • 小=400 x 300
  • 中=600 x 450
  • 大=800 x 600

になります。

埋め込みコードそ設定

また、「カスタムサイズ」では、任意の地図のサイズを選ぶことができます。

カスタムサイズ

サイズが決定したら、埋め込みコードをコピーしておきましょう。

埋め込みコードの取得

ここまでで、埋め込みコード取得は完了となります。

取得したコードをブログ記事に埋め込む方法

次に取得した埋め込みコードを記事に埋め込んでいきます。

ブログ記事のエディタを開いてください。

「テキスト」をクリックし、先ほどのコードを貼り付けます。

コードを貼り付けている

「ビジュアル」に戻って、正しく地図が表示されているか確認してください。

地図の確認

正しく表示されていればOKです。

スポンサードリンク

ショートコードを使ってGoogleマップを埋め込む方法

実は埋め込みコードを使う以外にもGoogleマップを埋め込む方法があります。

ショートコードを使うやり方です。

ショートコードとは、ワードプレスプラグインShortcodes Ultimateのことです。

まずは記事エディタで、「ショートコード」をクリックします。

ショートコードをクリック

次に「Googleマップ」をクリックします。

Googleマップ

次に記事に埋め込みたい地図のサイズを決めます。

スマホで見たときの見栄えがいいように、「レスポンシブ」「はい」にしておきましょう。

サイズ決定

次に「マーカー」の欄に、「博多駅」「福岡市博多区◯◯-◯」などの住所を入力します。

マーカーを追加

そして、「ショートコードを挿入」をクリックします。

ビジュアルエディタを確認するとこんな感じです。

ショートコードで入力したグーグルマップ

たったこれだけで完了となります。

プレビューを確認するときちんと表示されています。

プレビュー

かなり簡単にマップを表示することができました。

※ショートコードを使ってマップを埋め込む時には、Googleマップで検索した時に検索結果が表示される住所や建物でないと、正しく表示されないようです。
架空の建物や一般名称でない建物などは表示されないので気をつけてください。

スポンサードリンク

まとめ

以上がGoogleマップの埋め込み方法となります。

埋め込みコードを取得するやり方をメインでお伝えしましたが、プラグインさえインストールしていれば、簡単にショートコードは使えるのでぜひそちらも活用してみてください。

以下の記事では地図の埋め込み以外にも、ブログ記事に装飾する方法をお伝えしています、ぜひご覧ください!

スポンサードリンク