ピンを立てたGoogleMapをサイトに埋め込めるプラグイン「Awesome Map WP」の使用方法

クリックすると画像やテキストを見ることが出来るピンをGoogleMap上に立てて、その地図を自分のサイトに埋め込むことの出来るWordPressプラグイン「Awesome Map WP」はとても便利なのですが、日本語の使用方法がない･･････というわけで使用方法をまとめてみました。

【基本的な使用手順】
1,サイドバーにある「設定」から「Awesome Map」をクリック。

2,次に右上の検索バー（「Enter the location where…」と書いてある部分）をクリックする。

※検索バーが表示されていない場合は、右側にある「Map Config」の「Show the autocomplete search bar on the map」にチェックを入れると表示される。

3,アルファベットで場所の名称を入力すると候補が出るので、選びたい場所をクリック。
※画像では「yamadaeki」と入力し、「山田駅　大阪府山田駅」をクリックしている。

4,「Create a pin here」と出てくる。

5,左上の「＋」などをクリックして地図をズームしてから 、ピンをそのまま置きたい場所へドラッグ＆ドロップする。
※検索バーを使わずに、直接ピンをドラッグ＆ドロップしても良い。

6,ピンを置く場所が決まったら「create a pin here」と書いてあるボタンをクリック。

7,あとはタイトルを決めて、記事を書く。ここに撮影した写真などを貼り付けておく。

8,「Add your Own Image」を選択してから「Select/Upload Image」をクリックすれば写真が追加できる。

9,写真が追加できたら「Go to Step 2」をクリックする。

10,次はアイコンの選択、「icon」の右端をクリック。

11,ふさわしいアイコンを選んでクリック。

12,次に、「Color」をクリックして色を選択。

13,「Marker」から形状を選ぶと、下の「Result」に結果がプレビューで表示される。

14,「Create this Pin!」をクリック

15,「Save the Map」をクリック

16,埋め込みたい記事に移動し、「テキスト」タブをクリックしてから[Awesome_map]とコピペして、「更新」を押して保存する。

【番外編】
○サイズ調整
手順16で「テキスト」タブをクリックした際、[Awesome_map]だけではなく、任意の高さ、幅を指定するとそのサイズで埋め込むことが出来る。
たとえば、高さ500ピクセル、幅700ピクセルのサイズで埋め込みたい場合は、[Awesome_map height=”500″ width=”700″]とコピペして、「更新」を押して保存する。

また、高さのみ、幅のみを指定して埋め込むことも出来る。
・高さを300ピクセルに指定する場合、[Awesome_map height=”300″]とコピペして「更新」を押して保存。

・幅を600ピクセルに指定する場合、[Awesome_map width=”600″]とコピペして「更新」を押して保存。

○1つの地図に複数箇所のピンを立てる
手順14が終わってから再び手順2～14を繰り返すと、１つの地図に複数箇所のピンを立てることが出来る。その場合は立てたいピンを全て立ててから「Save the Map」をクリックする。

 

 

※最後に

記事中の[Awesome_map]の部分は実際に使うときには「A」を小文字にしてください。（小文字表記にするとAwesome Mapが記事中に埋め込まれてしまうので大文字表記としました）

 

 

【参考】
Awesome Map WP – Fully Customizable Markers Map

AwesomeMapDocumentation（Awesome Map WPパッケージに同梱されている公式ドキュメント）