こんにちは、きゃぷてんです。
ブログを運営していると、イベント等の話題を扱うことがあると思います。
その際に、会場の情報として住所のみを記載しているサイトをよく見ますが、ユーザー目線で考えるとアクセスのイメージを沸かせるためにも、会場の場所を地図で見たいわけです。
そんな時は、今回ご紹介する「Simple Map」というプラグインを利用すると、住所情報だけで簡単にGoogleマップの地図を記事内に埋め込むことができますので、ぜひ導入して見てください。
ユーザーの利便性が向上する他にも、記事内に地図が埋め込まれていると、Web知ってます感が出てなんだかかっこいいので（笑）
<目次>お好きなところからどうぞ
Simple Mapとはどんなプラグインなの？
まずは、Simple Mapとはどんなプラグインなのかを説明します。
ひとことで言うとすれば、住所情報だけで記事内にGoogleマップの地図を埋め込むことができるプラグインと説明することができますね。
百聞は一見にしかずと言うことで、さっそく「Simple Map」の実力を見て見ましょう！
上の地図では「東京スカイツリー」の場所を表示してみました。
記事内にこのような地図が埋め込まれていると、訪問者は場所のイメージがつきやすくなるので非常にありがたい情報と言えます。（ユーザビリティの向上）
また、こちらは僕の自己満足ですが、記事内に地図が埋め込んであるとWeb知ってます感を演出できて記事作成の意欲が向上します（笑）
使い方はとても簡単で、Simple Mapを導入するとショートコード（自分はプログラミンをしなくてもWordPressが勝手にプログラミングをしてくれる機能）が使えるようになります。
そのため、僕がやったことは「ショートコードの貼り付け」と「住所の入力」の2つだけです。
とても簡単ですよね、ちなみに使ったショートコードがこちらです。
これを記事内に入力するだけで、上記のような地図を埋め込んでくれるので非常にありがたいです。
また、Simple Mapには他にも以下のような機能が実装されていますので、これらを使いこなすことができれば、あなたのブログは1つ格上のブログへと成長することでしょう。
- 地図サイズの変更
- 地図のレスポンシブ対応
- 地図の画像化
- 地図倍率（縮尺）の変更
- 地図上にメモ書きを追加
こんな感じで地図表示のための便利な機能が揃っているプラグインというわけです。（それぞの機能の使い方については後述しますね）
Simple Mapを導入するメリット
Simple Mapを導入するメリットは以下になります。
- 住所情報だけで簡単に記事内に地図を埋め込める
- 地図のサイズや倍率などカスタマイズが簡単
- スマホ表示の場合、自動で地図を画像化する
プラグインが使いやすいとか、カスタマイズが簡単だとかありきたりなものもありますが、僕が注目しているのは「スマホ表示の場合、自動で地図を画像化する」という部分です。
スマホで調べものをしていた時に「ページをスクロールしようとしたら地図だけ動いてイライラした」という経験があると思います。
ただ、地図が画像であればそんなイライラを感じさせることはありませんし、それを自動でやってくれるので非常に便利なプラグインです。
Simple Mapをインストール
プラグインのインストール方法については下の記事で紹介していますので、参考にしてください。
なお、検索ワードは「Simple Map」と入力し、下図を目印にしてくださいね。
インストールが完了したら「有効化」をクリックしてください。
Simple Mapの設定と使い方
Simple Mapを有効化にしたら、設定を行なっていきましょう。
設定では「GoogleMap APIを取得」と「ショートコードの調整」の2を実施しますが、それぞれ非常に簡単な操作なので安心してくださいね。
GoogleMap APIを取得
WordPressの管理画面を開いたら、「設定」→「Simple Map」の順に操作して、Simple Mapの設定画面を表示させます。
Simple Mapの設定画面を表示させたら、「APIキー取得方法」という項目の「Google Maps APIs for Web page.」をクリックし、GoogleマップのAPI取得ページへ移動します。
API取得ページに移動したら「キーの取得」→「My Project」→「NEXT」の順に操作しましょう。
しばらくするとAPIが表示されるので、表示されているAPIをコピーします。
APIをコピーしたら、Simple Mapの設定画面に戻り「Set API Key」の部分に、先ほどコピーしたAPIを貼り付けます。
APIを貼り付けたら「変更を保存」をクリックして設定を反映させましょう。
以上で、GoogleMap APIの取得が完了しました。
ショートコードの調整
実は、この時点でGoogleマップの地図を埋め込むことは可能なのですが、今後なんども地図を埋め込むことを考えた場合、ショートコードの雛形を作っておくと便利です。
例えば、下のような文字列をメモ帳に入力してデスクトップ画面に置いておいても良いですし、AddQuicktag等のプラグインを使って、一発入力できるようにしてくと作業効率が向上しますのでおすすめです。
任意のショートコードやHTMLタグを、一発入力できるようにする便利なプラグインである「AddQuicktag」の使い方については、下の記事を参考にしてください。
以上で、設定が完了したのでいつでも地図を表示できるようになりました。
地図を表示する
それでは、記事内に地図を表示させましょう。
WordPressの記事作成画面で「テキストモード」を選択し、以下のショートコードを貼り付けてみてください。
すると、この記事の冒頭にあったような「スカイツリー周辺の地図」を記事内に表示することができました。
Simple Mapで表示する地図のサイズは、デフォルトで横100%、縦200pxとなっています。
記事作成中、自分が指定したサイズとは違い、デフォルトサイズの地図が表示されてしまう場合がごくたまにありますが、その時は、記事内のショートコードを削除し、もう一度ショートコードを入力すると、指定したサイズの地図が表示されるようになります。
地図の倍率（縮尺）を変更する
地図の倍率（縮尺）を変更することができます。
上の地図のように倍率（縮尺）を変更する場合は、以下の雛形を使ってください。
ちなみに、上の地図ではzoomの部分に「14」と入力しています。（デフォルトの倍率は「16」に設定されています）
地図上にメモ書きを追加する
地図上のポイントの部分にメモ書きを追加することができます。
下の地図のポイント部分（赤いピン）をクリックすると「スカイツリーの高さは634mだよ！」と表示されるのでクリックしてみてください。
上記のように、地図上にメモ書きを追加したい場合は、以下のようなショートコードを記述してください。住所やメッセージ部分をお好みのもに変更してくださいね。
まとめ
以上がSimple Mapの設定と使い方です。
地図を扱う機会は結構ありますので、今後重宝するプラグインだと思います。
最初はちょっと面倒ですが、一度設定してしまえば次回から地図の挿入がとても楽にできますので、ぜひSimple Mapを導入してみてください。
最近のコメント