こんなに簡単なんだ!!記事中にGoogleマップを表示させる2つの方法|WordPress

gf01a201502161000

おすすめの観光スポットやグルメ情報を紹介する際、記事中にGoogleマップが表示されていると、見る側は新たにGoogleマップを開いて場所を調べる必要がないので、便利です。

今回は、記事中にGoogleマップを表示させる方法にトライしてみました!!

やり方は次の2つ、

  • プラグインを使用せず、直接Googleマップからコードを取得し、記事に埋め込む方法
  • プラグインを使用し、挿入したいときに記事にショートコードを入力する方法

どちらも簡単なので、好きな方を選んでトライしてみてください(*^o^*)

スポンサーリンク
トップページ 広告W336×280

Googleマップのコードを埋め込む方法

まず、Google mapを開きます。

サイト

Googleマップ

そこに、自分の挿入したい住所を入力します。

(ここでは例として、東京ディズニーランドを検索しました)

スクリーンショット_2016-05-16_19_52_49

検索結果が出たら、左側にある三本線「メニュー」をクリックしましょう。

スクリーンショット_2016-05-16_19_56_10

メニューが表示されたら、「地図を共有または埋め込む」をクリックしましょう。

スクリーンショット 2016-05-16 20.08.56

このように表示されます。

今回はサイトに埋め込みたいので、右側の「地図を埋め込む」をクリックしましょう。

スクリーンショット 2016-05-16 20.04.42

再度コードが表示されますので、それをコピーして、地図を表示させたい記事に貼り付ければOKです。

スクリーンショット 2016-05-16 20.10.37

ポイント1

このとき、「中」と書いてあるところをクリックすると、表示サイズが選択できます。

スクリーンショット 2016-05-16 20.13.21

カスタムサイズをクリックすると、好きなサイズを入力出来るので便利です。

スクリーンショット 2016-05-16 20.16.43

ポイント2

WordPressの投稿画面にコードを貼り付けるときは、「ビジュアル」ではなく「テキスト」モードに貼り付けましょう。

そうしないと、きちんと表示されません。

ポイント3

こちらが、実際にコードを貼り付けて表示させた地図です。

(大きさは「中」の設定です)

地図を表示させたら、きちんと動くか確認しましょう。

きちんと表示出来ていれば、1つ目の方法は完了です♪

簡単ですよね(*^o^*)

プラグインによる表示方法

「ダッシュボード」→「プラグイン」→「新規追加」で「Simple-map」と検索すると、こちらのプラグインが出てきますので、インストールして有効化しましょう。

スクリーンショット 2016-05-16 20.28.34

そのあとは、特に設定は必要ありません。

地図を表示させたい場所に、こちらのコードをコピペすれば良いだけです。

ここでは例として、住所を東京ディズニーランドの住所「千葉県浦安市舞浜1−1」、

サイズを「横600・縦450」と入力したコードで表示させた地図がコチラです。

”千葉県浦安市舞浜1−1”

先ほどと同様、きちんと動くか確認しましょう。

ポイント1

住所は、郵便番号は入れなくても表示されます。

サイズは、widthで横幅、heightで縦幅を設定することが出来ます。

ポイント2

こちらも、コードを貼り付ける際は「テキスト」モードじゃないと表示されないので注意しましょう。

まとめ

以上2つの方法で、記事中にGoogleマップを表示出来るようになります。

本当に簡単であっという間なので、是非トライしてみてください♪

この記事を読んでいただき、どうもありがとうございました!!

またお会いしましょう。

こんなに簡単なんだ!!記事中にGoogleマップを表示させる2つの方法|WordPress
この記事をお届けした
ポントピの最新ニュース情報を、
いいねしてチェックしよう!
スポンサーリンク
トップページ 広告W336×280
トップページ 広告W336×280

役に立ったらからシェア♪

気になるからフォロー♪

トップへ戻る