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

WordPress記事にGoogleマップを挿入する方法

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

location-162102_640

スポンサーリンク
Sponsords Link

WordPressの記事にマップを挿入したい

こんにちは。Ushioです。

記事を書くときに、お店の紹介などMAPを挿入する方法を書こうと思う。どうやって挿入するんだろう?と思った時、Google側でそういう機能持ってないわけないよな。と見てみて一発。みんな知ってるかもしれないが一応。

1.ブラウザよりGoogleマップへアクセス

お使いのブラウザでGoogleマップへアクセス

スクリーンショット (34)

2.記事に表示させる場所を検索

今回は東京タワーの例。店舗名で検索できなければ住所で。

スクリーンショット (35)

3.検索結果画面で「共有」をクリック

共有ボタンをクリック。バージョンによって表示が異なる可能性があるが、どこかに「共有」があるはず。

スクリーンショット (40)

4.ポップアップウィンドウの「地図を埋め込む」タブをクリック

共有ボタンをクリックすると、ウィンドウがポップアップする。「リンクを共有」タブと「地図を埋め込む」タブがあるので、後者をクリックすると下記画面となる。

スクリーンショット (36)

5.記事に埋め込むマップのサイズを大、中、小、カスタムサイズから選ぶ

好きなサイズを下記プルダウンボタンから選ぼう。カスタムサイズで、好きなサイズにも変更できる。

スクリーンショット (37)

スクリーンショット (39)

6.サイズを決めたらURLをコピー

好きなサイズを選び、サイズ選択ボックスの右に表示されるコードを全てコピー。クリックすると自動で全選択になるのでそのまま「Ctrl+c」でよいだろう。

スクリーンショット (41)

7.WordPress記事の挿入したい箇所へ貼り付け

まずは、WordPressの記事投稿画面の選択タブ「ビジュアル」「テキスト」のテキストを選択する。コードを見慣れない方もうわっと思わず。地図を挿入したい箇所に行き、先ほどGoogleマップよりコピーしたコードをペースト。

スクリーンショット (44)

すると、ビジュアル画面は下記のように地図表示箇所に枠が示される。これでOK!

スクリーンショット (45)

参考.それぞれのサイズ感

まずは「小」

つづいて「中」

つづいて「大」

つづいてカスタムサイズ400×200の例

いかがでしたでしょうか。

簡単でしょ?プラグインもあるみたいですが、普通に地図を貼る分にはプラグインは不要と感じますね。

スポンサーリンク
Sponsords Link
  • このエントリーをはてなブックマークに追加

ZacoDesign

スポンサーリンク
Sponsords Link