クリックすると画像やテキストを見ることが出来るピンを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を繰り返すと、1つの地図に複数箇所のピンを立てることが出来る。その場合は立てたいピンを全て立ててから「Save the Map」をクリックする。
※最後に
記事中の[Awesome_map]の部分は実際に使うときには「A」を小文字にしてください。(小文字表記にするとAwesome Mapが記事中に埋め込まれてしまうので大文字表記としました)
【参考】
Awesome Map WP – Fully Customizable Markers Map
AwesomeMapDocumentation(Awesome Map WPパッケージに同梱されている公式ドキュメント)
「ピンを立てたGoogleMapをサイトに埋め込めるプラグイン「Awesome Map WP」の使用方法」への2件の返信
地図埋め込めるといろいろ捗っていいよね。
地図ラブ。
しかしマップ上に紐付けたい写真がいまはないな……