WordPress(ワードプレス)の記事にGoogle Maps (マップ) の地図を埋め込む方法

スクリーンショット 2016-01-18 10.33.40

こんにちは。

今日雪がやばいですね。滑って転ばないようにご注意ください。

Webサイトやブログで、地図(Google Maps)を貼り付けてる記事を最近よく見かけますが、どうやってやるのかわかんなかったので、調べてみました。

今回は、WordPress(ワードプレス)の記事にGoogle Maps(マップ)の記事を埋め込む方法です。

 

Google Maps(マップ)とは?

 

IT用語辞典さんによると以下のように説明されてました。

Google Mapsとは、Google社が提供するオンライン地図情報サービスマウスドラッグすることでスクロールでき、指定した地域のショップやレストラン、サービスなどを検索したり、目的場所の地図やその付近の様子を確認することができる。 通常の地図表示のほか、衛星写真を表示する写真表示や、地図と写真を複合的に表示することもできる。

Webページ動的に変化させられるAjax技術を全面的に採用しており、マウスのドラッグで地図をスライドさせたり、ホイールで拡大縮小したりといった操作をブラウザ上で直感的に行うことができる。また、ユーザ登録してログインすると最近検索した場所がリスト表示されるため、何度も検索する場所を見るのに便利になっている。

ようは、Google の提供する位置情報表示サービスです。

 

 1. Google Maps(マップ)で記事に埋め込む地図を探し、「共有」から埋め込みコードを取得する

まずは、記事に埋め込む場所をGoogle Mapsで開きます。

今回は、先日記事を書かせていただいた、camp express(キャンプエクスプレス)を例として使用します。

載せたい地図を開いたら、「共有」のボタンをクリックします。

スクリーンショット_2016-01-18_10_17_03

 

↓のようなポップアップが表示されるので、「地図を埋め込む」を選択すると、その下に埋め込み用のコードが表示されるので、こちらをコピーしておきます。

スクリーンショット_2016-01-18_10_17_32

これで地図コードの取得は完了です。

 

2. WordPress(ワードプレス)の記事に地図コードを埋め込む

 

地図コードの取得ができたら、次に記事に取得した地図コードを埋め込みます。WordPressの記事作成の画面から、右上の「テキスト」を選択して、

スクリーンショット_2016-01-15_18_35_01

 

地図を表示したい箇所に、Google マップで取得した埋め込み用コードを貼り付けます。

スクリーンショット_2016-01-18_10_18_42

 

これで地図の埋め込みは完了です。

 

3.地図がちゃんと表示されるかプレビューモードで確認する

 

地図コードの埋め込みが終わったら、「ビジュアル」に戻して、

記事の指定位置に地図がちゃんと設置できたか確認します。

 

スクリーンショット_2016-01-15_18_35_33

右側の「プレビュー」ボタンを押すと、作成途中の記事が、サイトで公開した時にどうゆう感じで見えるかを確認できます。

 

スクリーンショット_2016-01-15_18_35_52

 

プレビューモードで地図が表示できることを確認したら完成です!

 

スクリーンショット 2016-01-18 10.19.51

 

完成

 

今回紹介した手順で記事に埋め込んだ地図が以下です↓

 

今回は以上です。

お疲れ様でしたー。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

主に芸能ニュース・エンタメ・WordPress・iOS・Android・ゲームについて書いてます。 楽しいこと、面白いことが大好き。本業はシステムエンジニア。芸能ニュース、アフィリエイト、スマホゲーム、アプリ開発についての記事を書いていきます。