WordPressに地図を追加してみた。

ラーメン屋紹介ブログに地図を追加

いままで7回ほどラーメン屋についてブログの記事を書きましたが、ラーメン屋の名前は分かっても、実際どこにあるのかは文章だけでは示せませんでした。
そこで、WordPressのプラグインを用いて、ブログの中に地図を入れてみようと試みました。

WP Google Map Plugin

WordPressのプラグイン検索で、地図に関するものはたくさんありましたが、なぜか私のブログでは動作しなかったり、レスポンシブ対応でなかったり、タブで位置を数値で指定しないといけない面倒なものであったり、なかなかしっくりくるプラグインはありませんでした。
レスポンシブ対応で、WordPress管理画面から地図を作ることができ、私のブログでも動作するものを見つけました。それがWP Google Map Pluginです。

位置を登録しよう

地図を作る前に、まず位置情報を登録する必要があります。WP Google Mapメニューの「Add Location」から、位置を登録します。

Location Titleに登録する位置の名前を(日本語でも可)、Location Addressに場所を入力します。Location Addressは途中まで入力すればテキストボックスに候補が現れることがあり、それを選択すればピンが目的地に打ち込まれます。そして「Save Location」をクリックすれば登録完了です。
それができなくても、Location Addressに近所の地名を入力して画面の地図にピンを仮置きし、ピンを目的地に移動してから「Save Location」をクリックすることでも登録できます。

地図を作ろう

WP Google Mapメニューから、「Add Map」をクリックして、地図の作成画面に行きます。
そこでマップの名称「Map Title」、横幅「Map Width」、縦幅「Map Height」、拡大率「Zoom Level」を入力していきます。

その下の「Choose Location」から、地図の上にピンを置きたい位置を、登録した位置から選択してチェックマークを入れます。複数の選択が可能です。

そして、地図上に表示される部品(ズームレバーや地図のタイプをコントロールするボタンなど)の可視不可視を選択し、ブログに表示される位置を決めます。

最後にSave Mapをクリックして地図ができあがります。

ブログに地図を配置しよう

WP Google Mapメニューの「Manage Map」をクリックすると、作成した地図の一覧と、ショートコードが表示されます。

ショートコードをコピーして、ブログ編集画面に行き、地図を入れたい場所にペーストします。

ブログを公開すれば完成です。


こんな感じで、ラーメン屋の位置を明確に説明することができました。


コメント

送信フォーム

入力エリアすべてが必須項目です。

内容をご確認の上、送信してください。

※メールアドレスは公開されません