記事の詳細

降雪の翌日に、駐輪場の自転車が泥だらけになっていて憂鬱な気持ちになった網干です。
どうやら、家の屋根の雪が滑り落ちた際に泥が跳ねて自転車が犠牲になったようです…。
駐輪場に屋根はあるのですが、こればかりはどうやっても回避できません…(´・_・`)

というわけで、今回はWordPressのGoogleMap作成プラグイン「Maps Builder」を使って、複数のピンを立てた地図をサクッと作る方法をご紹介致します。

今回の記事を読むことで、下図のようなGoogleマップが作成できます!
Maps

無料でお手軽なGoogleMap作成プラグイン「Maps Builder」をWordPressにインストールする

まずはじめに、WordPressに「Maps Builder」をインストールします。

WordPressの管理画面から[プラグイン]→[新規追加]で、右上のキーワードに「Maps Builder」と入力してください。
Maps Builder検索

「Maps Builder」を入力すると「Maps Builder – Google Maps Plugin」というプラグインが表示されます。
プラグインの右上の「今すぐインストール」を押してください。
Maps Builderインストール

インストールが終わると「有効化」ボタンが出現しますので、有効化を押してください。
プラグイン有効化

有効化を押すと、先ほどまでサイドバーになかった「Google Maps」という項目が追加されます。
サイドバーに追加

これで、「Maps Builder」のインストールは完了になります。

GoogleMapの基本設定を行うために「Maps Builder」の初期設定を行う

サイドバーの[Google Maps]を押して下さい。
Maps Builder初期設定

[All Maps]の項目に移動しますが、まだ何も登録してないのでアイテムが存在しません。
アイテムを追加する前に設定を行いましょう。

[Setting]の項目を押して下さい。
Maps Builderの設定

[Setting]の項目を押すと設定画面に移動します。
ここでは[Google Maps API Key]と[Default Location]に関して入力を行います。
Maps Builderの設定欄

[Google Maps API Key]の設定

[Google Maps API Key]の項目にはGoogle Mapで使用するAPIキーを入力してください。
APIキーはGoogleのアカウントを取得しているユーザーに提供されますので、必ずGoogleのアカウントを取得してください。

APIキーの取得方法に関しては、下記のURLを参考にしてください。
Google Maps の APIキー を簡単に取得する

上記の方法で取得したAPIキーを[Google Maps API Key]の項目に入力してください。
API Key入力箇所

[Default Location]の設定

[Default Location]はGoogleMapを表示した際の中心地点を設定する項目になります。
※ここでの設定はグーグルマップを作る際のプレビュー画面の中心地点の設定になります
Latitude(緯度)とLongitude(経度)を設定して、どの地点を中心にして地図を表示するか決定します。

LatitudeとLongitudeの数値はGoogleMapを使って出します。
GoogleMapで中心地点の場所を検索すると、URLに下記のような数値がついています。
「!3d」から「!4d」までの数値がLatitudeの値、「!4d」から末尾までの数値がLongitudeの値となっています。
緯度と経度の取得

今回は弊社事務所の位置を中心に設定します。
中心位置の設定

[Google Maps API Key]と[Default Location]の入力が完了したら、画面の下部にある[Save Settings]ボタンを押して「Maps Builder」の初期設定は完了になります。
設定保存

GoogleMapにピンを立てる

[Google Maps]→[Add New]の項目を押して下記の画面を開きます。
新規作成

すると、[Default Location]で設定した位置を中心にしたGoogleMapのプレビュー画面が表示されます。

まずはじめに、「ここにタイトルを入力」の箇所に今回作成するマップのタイトルを設定します。
今回は弊社の周辺の施設紹介マップを作成したいので「Incloop周辺施設の紹介」とします。
マップのタイトル設定

次に、マップにピンを立てていきます。
プレビュー画面の下の方へスクロールすると[Map Markers]の項目があります。
マップへのピン立ては[Map Markers]の[Create Marker]の項目で行います。
ピンの位置検索欄

では早速、実際にピンを立てていきましょう。

ピンの一つ目は弊社事務所のある「相模原商工会議所」にピンを立ててみます。
[Create Marker]に「相模原商工会議所」を入力すると検索候補が出現します。
ピンの位置検索

検索候補の一番上の場所で設定したいので、上の項目をクリックします。
すると、プレビュー画面に緑のマーカーが設定されます。
仮のピンを設定

まだこの時点ではマーカーが確定していないため、仮のピンが立っている状態になります。
緑のマーカーをクリックすると住所が表示されますので、正しい位置であることを確認します。
ピンの情報表示

ピンを立てたい場合は[Add to Map]のボタンを押して下さい。
ピンを追加

すると、ピンが確定してマーカーが赤色のおなじみのマークになります。
ピンの設定

さて、ここからがこのプラグインの凄いところです!
ピンを立てた場所に、情報を追加するテキストフィールドが表示されていることにお気づきでしょうか!
テキストフィールド表示

このテキストフィールドには、付加情報を追加することができるのです!

画面上で「相模原商工会議所」となっている箇所にはピンのタイトルが入りますので、弊社の名前「Incloop株式会社」に変更します。
下のテキストフィールドは追加の情報入力項目になりますので、弊社の情報を記載します。
ピンに情報を追加

しかし、このままではスマホで見た際にホームページも電話番号もワンタッチで操作できないのが不便…。
と、思いきや!
なんと、この項目はHTMLタグに対応しているため、こんな書き方ができてしまうのです!
HTML形式でピンに情報を追加

この状態で[Save]ボタンを押してピンを確定します。
ピンの保存

これでピンの設定は完了になります。
ちなみに、設定したマーカーは下記の箇所をクリックすることでマーカーの設定が表示されますので、変更することもできます。
ピンの再設定

では、同じ方法でどんどん周辺のピンを追加していきます。
ピンの設定後

これで、ピンの追加は終わりました。
次に、マップを表示する際の中心座標を設定します。
右側のサイドバーの[Display Options]をクリックしてメニューを表示します。
サイドバーの[Latitude]と[Longitude]に中心にしたい座標を設定します。
ここでは弊社の位置を中心に設定します。
※値を設定してもマップのプレビュー画面が移動しない場合は[Longitude]の下部に[Update]等のボタンがありますので、ボタンを押して下さい。
中心位置設定

以上で、マップの設定が完了になります。
サイドバーの[公開]または[更新]ボタンを押してマップを確定します。
マップの設定完了

これで、ピン付きのマップの作成が完了しました!

複数のピンを設定したGoogleMapを記事に表示する

[Google Maps]→[All Maps]をクリックすると、作成したマップが表示されます。
マップにはショートコードが割り振られていますので、ショートコードをコピーしておきます。
ショートコードコピー

投稿記事の編集画面に移動して、ショートコードをペーストします。
ショートコードペースト

[更新]ボタンをおしてページをみると…
マップの表示

表示されました!
ピンをクリックすると詳細のリンクもしっかりと設定されています!

これで、HTMLタグを埋め込んだ複数のピンを立てたGoogleMapを作成することができました。

いかがでしたか?

WordPressのプラグインは数が非常に多いため、好みのプラグインを探すのはなかなか大変なんですよね…。
ですが、プラグインが見つかれば作業時間を大幅に減らすことができるので、WordPressで何かをする際には必ずプラグインを探すことから始めるのが良いかもしれませんね。

ではまた!

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。


ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

相模原のお店やサービスをどんどん紹介!

行ってみよう相模原 相模原市のお店限定

飲食店

ページ上部へ戻る