WordPressのブログ記事にGoogleマップを埋め込む方法【プラグインなし】

ブログでお店やお出かけスポットを紹介する時Googleマップで場所を表示したいことってありますよね。

例えば以下の記事でお出かけスポットの地図を表示しています。

Googleマップをブログ内に直接表示したほうが公式サイトのアクセス情報にリンクしたり画像の地図を載せるよりもユーザーにとって便利です。

Googleマップをブログに埋め込む方法はいくつかありますが、今回は一番簡単なプラグインを使わない方法をご紹介します。

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

GoogleマップをWordPressのブログ記事内に埋め込むには以下の3ステップで簡単にできます。

Step1：Googleマップで埋め込みたい場所や経路を検索する

初めにGoogleマップにアクセスしてブログ記事に埋め込みたい場所や経路を検索します。

左上の検索ボックスで表示したい場所を検索してください。
ここでは東京駅で検索してみます。

目的地の経路を表示することもできます。

品川駅から東京駅までの経路を検索してみます。
「ルート・乗換」をクリックしてください。

出発地と目的地、移動手段を選択します。

するとルートが表示されます。

Step2：埋め込むGoogleマップのサイズをカスタマイズする

埋め込みたい地図を表示出来たら次に埋め込むGoogleマップのサイズを調整します。

「共有｝＞「地図を埋め込む」の順にクリックします。

表示されたマップに問題がないことを確認してください。

サイズのカスタマイズを行います。

サイズは小、中、大と自分でサイズを自由に決められるカスタマイズの4つです。

実際の表示は以下のようになります。

小サイズ

中サイズ

大サイズ

お好みのサイズを選んでください。

Step3:Googleマップのコードを記事に貼り付けて配置を調整する

サイズが決まったらいよいよブログの記事にGoogleマップを埋め込みます。

「HTMLをコピー」をクリックしてコードをコピーします。

コピーしたコードを記事内に貼り付けます。
挿入したい場所を右クリックして「貼り付け」か「CTRL」＋「V」キーでできます。

段落ブロックにそのまま貼り付けても問題ないですが、うまく表示されない場合は「カスタムHTML」ブロックに変更して貼り付けてみてください。

ただこのまま張り付けただけでは左寄せで表示されてしまいます。

次はGoogleマップを中央揃えで表示する方法を解説します。

中央揃えにするにはHTMLの修正が必要です。
下の画像の矢印の部分にcenterタグを追加します。

「プレビュー」をクリックして表示を確認してください。

これでGoogleマップの埋め込みを完了です。

Googleマップをブログ記事内に埋め込む方法まとめ

記事内に地図があるだけでユーザの利便性が高まります。

Googleマップの埋め込みはとても簡単ですので是非試してみてください。

Googleマップ以外にもWordPressでは簡単にいろいろなサービスと連携ができます。

ブログにツイッターを埋め込ん方法はこちらの記事で紹介しています。

ランキング参加中！応援お願いします
にほんブログ村