地図の作成
MapPress利用方法
「MapPress」というプラグインを設置している場合、記事内やページ内にgoogle mapを簡単に挿入することができます。
※以下の説明に出てくる画像はMapPress Version:2.43.4です。
バージョンアップによって表示が変わる可能性がございます。予めご了承ください。
1. 記事作成ボックスのすぐ下が、MapPress用の設定ボックスです。
サンプル画面では赤枠で囲んである場所です。「MapPress」のタイトルだけが表示され、枠内右端の▴マークが表示されている場合は、折りたたまれている状態なので▾をクリックします。
指先マークのポインタを使って「新規マップ」ボタンをクリックします。
2.左図のような表示になるので各箇所に必要事項を入力
①マップタイトル
作成するマップに適当な名前をつける。
②サイズ
スマホ対応ページの場合、幅320px以内にすると、見やすい表示になります。
サンプルでは300pxの正方形を設定しています。
③場所を指定します。
表示したい場所の所在地を入力。
入力後、虫眼鏡ボタンを押すと、入力した住所を中心点した状態の地図が表示されます。
④マップにピンマークPOIが追加されます。
微妙に位置が違う場合は、ドラッグして調整できます。
⑤吹き出しの中身を設定します。
地図左側「日本」と書かれたピンマークをクリックするとその地点の詳細内容を編集することができます。
ユーザーがマップ上のピンにマウスを載せた時、吹き出しが出て、住所や電話番号などの詳細が表示される部分です。
マップ上のピンマーク(④)をクリックしても同様の事ができますが、誤ってピンをずらしてしまう可能性があるので(⑤)をクリックして、指定しましょう。
⑥吹き出し(POI)内容の設定
下図の編集画面が表示されるので、地図のタイトルと住所などの必要事項を入力します。
編集用ツールを利用して、画像を挿入したり、書式を変更できます。
4.保存が完了すると、サンプル図のような表示に変わります。
タイトルの下にマウスをポイントすると、3つある選択肢が表示されるます。
⑦記事中の地図を表示したい場所にカーソルを置き、中央の“記事へ挿入”のリンクをクリック。
⑧作成記事の文中に
[mappress mapid="2"]
のようなショートコードが表示されれば、設定完了です。
(サンプルでは青い丸枠の場所にコードが挿入されています。もしもご自身でタイピングされる場合は、角括弧からスペースまで含め、全て「半角英数」で入力してください。)
プレビューで、地図の表示を確認しましょう。
※「”2”」と表示されている部分はMapPressで作成した地図のIDになります。地図の作成IDによって、任意の数字が表示されます。
※地図は複数作成できます。複数地点にある支店や事業所などの登録が可能です。そのため記事内で呼び出す時は、IDで識別管理しています。
※ワンポイントアドバイス
スマホでも対応できる地図にする場合、ひと工夫が必要です。
「[mappress mapid=”~”]」の表記に地図の幅を指定するためのコードを追加入力します。
例)[mappress mapid=”2″ width=”96%”]
何も指定しない時は、自動的に100%として表示されます。
スマホで100%表示が指定されると、画面をはみ出してしまう恐れがあるため、若干小さく(サンプルでは4%マイナス)設定すると、具合良くおさまりました。