カテゴリー
コンテンツ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

 

※最後に

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

 

 

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

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

作成者: kagamin

千里高校44期OBにして、現在は京都の大学で臨床心理学を勉強している元報道部長。これからはサポートに徹しようと思っていますがコメントはします。
某笑顔動画で自己満足「歌い手」をやったこともあったなぁ。

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

地図埋め込めるといろいろ捗っていいよね。
地図ラブ。

しかしマップ上に紐付けたい写真がいまはないな……

コメントは受け付けていません。