WordPress たった1行で Google マップを埋め込む方法

WordPress たった 1 行で Google マップを埋め込む方法

地図を載せればアクセス数も Up !

今回は WordPress 初心者でもすぐに
Google マップを使える方法をご紹介します。

ウェブサイトやブログで紹介記事を書いたら、
その場所の地図くらいは載せておきたいもの。
自分のお店なら、絶対に必要な情報です。

バリ島地図.jp のブログにある紹介記事でも
必ずその場所の地図を載せるようにしていますが、
WordPress なら簡単に Google マップが使えます。

以下、あっという間に Google マップが使える
その方法を、とっても簡単 3 ステップで解説します。

ステップ1. プラグイン WP Flexible Map を追加

まずプラグイン名で WP Flexible Map を検索し、
今すぐインストールをクリックしてください。

私がこのプラグインを選んだ理由については、
追って説明していきますので、ご安心を !

ちなみに、もちろん無料です。
そして Pro version などもありません。

プラグイン検索結果から WP Flexible Map を追加
プラグイン検索結果から WP Flexible Map を追加

WP Flexible Map がインストールができたら、
忘れずにそのまま有効化してください。

ステップ2. Google マップで緯度と経緯を確認

自分のお店でもかなり珍しいと思いますが、
もうすでに緯度と経緯が頭に入っているという人は
このステップを飛ばしてください。

それ以外の人は Google マップ を開き、
地図に表示したい場所を拡大していきましょう。

Google マップで表示したい場所を拡大し右クリック
Google マップで表示したい場所を拡大し右クリック

正確な位置がクリックできるまで拡大したら、
その場所でマウスを右クリックします。

そしてメニューから「この場所について」を選ぶと
緯度と経度が表示されるので、コピーします。

表示された緯度と経度を Ctrl+c でコピー
表示された緯度と経度を Ctrl+c でコピー

ステップ3. 地図を埋め込みたい場所に以下を記述

[flexiblemap center="-8.744476,115.163727" width="100%"]

埋め込む場所は、記事の中でも良いですし、
もちろんウィジェットの中でも大丈夫です。

「先ほどコピーした緯度と経度」を貼り付ける際、
カンマの後の半角スペースは取り除いてください。

このプラグインの何よりも良いところは
たった 1 行で Google マップを埋め込めること。

 

また表示をカスタマイズするのにも柔軟性が高く、
初心者でも簡単にできるところが嬉しいです。

地図のタイプや大きさはもちろんのこと、
インフォメーションに表示する内容も思いのまま。

[flexiblemap center="-8.744476,115.163727" title="バリ島旅行の出発帰着点" html="2013年のリニューアル前からある<br>旧ロータリー。手軽に使えるコンビニ、<br>カフェ、軽食どころなどは新空港より<br>充実しており、駐車場が近いことから<br>タクシー運転手との交渉もしやすい。" zoomstyle="large" width="100%"]

 

画像を入れたり、タイトルをリンクにしたり、
マーカーをオリジナルのアイコンにすることもできます。

画像の入れ方
例: html=”<img src=’http://example.com/images.jpg’ />” を追加
タイトルをリンクにする
例: link=”http://example.com” を追加
マーカーをオリジナルのアイコンにする
例: icon=”http://example.com/original-icon.png” を追加

また、すでに 2 つの地図を見ていただいたように
1 ページに複数の地図を埋め込むのも OK です。

コレだけおすすめする理由

WP Flexible Map はプロジェクトが活発

「WordPress Googleマップ プラグイン」で探すと
WordPress で Google マップが使えるプラグインは
この WP Flexible Map の他にもたくさんあります。

ですが、よく紹介されているプラグインの中には
1 年以上更新されていないものも結構あります。

私が WP Flexible Map を選んだ 1 つの理由は、
2014年4月にバグ修正のアップデートがされていて
きちんとプロジェクトが継続されているから。

WP Flexible Map のアップデート履歴
WP Flexible Map のアップデート履歴

Google マップ側の仕様も更新されているので、
更新が少ないプラグインは避けましょう。

WP Flexible Map は初心者にフレンドリー

このプラグインは有効化したらすぐに使えます。

ややこしい Google Maps API の設定をしたり、
地図の管理画面などを開いたりする必要がなく、
たった 1 行の中に記述を追加するだけ。

[flexiblemap center="緯度,経度" title="タイトル" description="説明" width="100%" ... ]

一方、php や KML ファイルでの地図表示も可能。
チュートリアルも本家サイトで豊富に用意されています。

URL: Getting started | Flexible Map

とてもシンプルなプラグインではありますが、
大体のニーズに合う地図は表示できるでしょう。

まとめ

WordPress たった1行で Google マップを埋め込む方法、
簡単 3 ステップ + おすすめポイント 2 点について、
バババッと説明をしました。

レストランやお店を紹介する記事の質を高めるためにも
簡単なので、ぜひ取り入れてみてください。

WordPress たった1行で Google マップを埋め込む方法
バリ島地図.jp を運営しています !

バリ島在住 28 歳フリーランス Web デザイナー、翻訳の仕事もしています。2013 年のバリ島への移住をキッカケに、インターネットを活用した「海外ノマド生活」のブログを開設、バリ島の観光客向けに「バリ島の日本語地図」を紹介しはじめました。2014 年 6 月には バリ島地図.jp としてサイトをリニューアルし、運営を続けています。