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ブログに埋め込む手順を解説します。

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

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

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

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

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

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

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

表示場所の入力は、

建物や場所の名前で検索

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

建物や場所の住所で検索

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

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

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

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

緯度、経度を指定

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

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

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

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

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