WordPressでGoogleMapをプラグイン無しで使おう

WordPressブログにsimple mapプラグインを使用してGoogle Mapを表示している方は非常に多いと思います。

ですが、私の他のブログでsimple mapの更新後サイト自体が消えてしまうという現象が起きました。

サイト自体はsimple mapプラグインを削除することですぐに復旧させましたが、サイト内の記事ページにsimple mapのコードだけが掲載されている状況はいただけません。

PHP関係のエラーだと思うのですが、いくら調べても情報が得られず、そのままにしておくわけにもいかないのでプラグインに頼ることを止め、Google Mapを直接埋め込む作業に入りました。

今回は、その時の覚え書きとして、Google Mapをプラグイン無しでWordpressに埋め込む方法を記載します。

下の地図がサンプルとしてGoogle Mapの東京スカイツリーをカスタムサイズで縦300px×横300pxで表示した例です。

Googleが無料で提供しているGoogle Mapの埋め込み機能なので無料ですし、プラグインも不要なのでAPIキーの取得も必要ありません。（現在プラグインでの使用にはAPIキーの取得が必要で、基準値以上の表示がされた場合は有料です。）

そして、プラグイン無しというと難しいと思いがちですが、埋め込み操作はとても簡単です。

Google Mapの埋め込み

Google MapをWordpressブログに埋め込む手順を解説します。

とても簡単なので、今回は「東京スカイツリー」を例として試してみて下さい。

1. Google Mapサイトにアクセス
2. マップの検索フォームに表示したい場所を入力
3. ナビゲーションバーにある「共有」をクリック
4. 「地図を埋め込む」を選択
5. 地図の表示サイズを4択から選ぶ
6. 生成されたコードをコピー
7. WordPressの投稿エディター画面で地図を埋め込む場所をクリック
8. 「動画を挿入」から「埋め込む」を選択しコピーしたコードを貼り付け

以上で終了です！簡単ですよね。

1.Google Mapサイトにアクセス

Google Mapのサイトを表示します。

地図のページが表示されましたよね。

2.マップの検索フォームに表示したい場所を入力

表示場所の入力は、

建物や場所の名前で検索

「東京スカイツリー」のように有名な場所はほぼGoogle Mapに登録されているので名前で大丈夫です。

建物や場所の住所で検索

表示したい場所の住所を入力して検索できます。

この方法では、入力した住所の範囲が表示されます。

そして、Google Mapに名前が載っているものは登録されている場所なのでそこをポイントして表示させられますが、名前の無い場所の場合、右クリックし、「この場所に付いて」から住所をクリックすると検索フォームに張り付けられその場所がポイントされるのですが、されずに飛ばされてしまう場合は経度、緯度を指定することになります。

私の場合は、確認が面倒なので有名どころ以外は確認無しで緯度、経度で指定してしまいます。

緯度、経度を指定

緯度、経度での場所の特定は、一番正確な表示方法となります。

山の中の特定の場所等の場合は、住所で検索し、でたマップのポイントしたい場所を右クリックし、「この場所について」を選択、出てきた小窓の住所の下の数字が緯度と経度です。

緯度と経度をクリックすると検索フォームに貼り付けられ、その場所にポイントマーク付きで表示されます。

河原の花火打ち上げ場所にポイントマークさせて表示したい場合などに便利なので覚えておきましょう。

例えば、東京スカイツリーの場合「35.710063, 139.810701」という感じの数字が緯度,経度です。（ポイントマーク上でクリックしても微妙に数字は異なります。）

3.ナビゲーションバーにある「共有」をクリック

Google Mapの検索フォームに住所等を入力し検索するとフォームの下に検索した住所等の部分、その下に「保存」や「共有」等のボタンが現れます。

その共有ボタンをクリックします。

4.「地図を埋め込む」を選択

共有ボタンを押して現れる小窓の「リンクを共有」と「地図を埋め込む」のタブの「地図を埋め込む」タブを選択します。

サイズ選択のプルダウンメニュー、地図表示コード、表示される地図のレビューのある窓がでます。

5.地図の表示サイズを4択から選ぶ

小・中・大・カスタムサイズのプルダウンメニューで地図の大きさを選びます。

サイズは小400×300px、中は600×450px、大は800×600pxです。

カスタムサイズを選択すると、任意の大きさを指定できます。

カスタムサイズを選択し、自分の好みの大きさで表示させましょう。

上のサンプルのMapではモバイルでの表示を考慮して縦300×横300pxを指定しました。

サイズを変えたい場合はコピーした地図表示コードの後半部分の「” width=”300″ height=”300″」のと横の数字を変えてやるだけです。

6.生成されたコードをコピー

サイズを指定したら、地図のコードをコピーします。

Google Mapでの作業はこれで終わり、Wordpressの作業に移ります。

7.Wordpressの投稿エディター画面で地図を埋め込む場所をクリック

ここからの説明は当然「TinyMCE Advanced」プラグインが入っていると想定しています。

いれていない人はいないと思いますが、一応最後にプラグイン無しの場合も説明しておきます。

8.「動画を挿入」から「埋め込む」を選択しコピーしたコードを貼り付け

1. 投稿記事内の地図を埋め込みたい場所をクリック
2. 動画を挿入ボタンをクリック
3. 「埋め込む」タブを選択
4. コピーした地図表示コードを貼り付け

以上です！もうエディター内に地図が表示されていますよね。

TinyMCE Advancedを入れてない場合

こちらも簡単なので安心して下さい。

新規プラグイン検索で「TinyMCE Advanced」と入力して検索しインストールするだけです。

なんてことは言いませんよ！

エディターをビジュアルモードからテキストモードに変更し、コードをそのまま張り付けるだけなので簡単ですよ。

モバイルでご覧の方へ

全てのコンテンツと、カテゴリー内の記事をタイトル一覧表示としたメニューを作りました。PCの方にも便利です。

●モバイル用メニュー

●人気記事ランキング