近隣の駐車場をまとめて表示したい場合や、行きたい観光地などをまとめて表示したい場合など、地図上にいくつもピン(マーカー)を立てたいときってありませんか?
今回は、Googleマップに複数ピンを立てた上でサイトに埋め込む方法について、Googleマップのマイマップから設定する方法と、WordPressのプラグイン「MapPress Easy GoogleMaps」(以下、MapPress)を使う方法をご紹介します。
関連記事
WordPressサイトにGoogleマップを簡単に埋め込む方法
グーグルマップのマイマップから複数ピンを設定
ちょっと手間がかかりますが、下記の手順通りにやればできますので、やってみてください。
マイマップの設定
① Googleマップを開いて、検索窓の横にあるメニューをクリックし、マイプレイスを開いててください。
② 「マイマップ」タブを選択し、下の方にある「地図を作成」をクリックしてください。
③ 検索窓で住所あるいは目的地の名称を入力してください。
今回は、名古屋駅近くの「ミッドランドスクエア」と検索してみました。
すると、ミッドランドスクエアの場所に黄緑色のピンが立ちました。この時点ではまだ地図に追加されていない状態です。
④ 「+地図に追加」ボタンをクリックしてください。黄緑色のピンから青色のピンに変わりました。これで地図に追加されたことになります。
⑤ 他にピン表示したい場所を検索します。
今回は、「名古屋ルーセントタワー」を検索してみます。先ほどと同じように、「+地図に追加」をクリックしてください。
⑥ 黄緑色のピンが青色に変わり、地図に追加されました。
⑦ 表示させたいピンの数分だけ同じ作業を繰り返します。今回はもう一つ、大名古屋ビルヂングを追加して3つの高層ビルを表示してみたいと思います。
⑧ ピンの色が見にくかったら変更することができます。
青いマークが他にもあり多少見にくいので、ピンの色を赤に変えてみます。
⑨ 地図のタイトルを分かりやすいものに変更します。「無題の地図」をクリックしてください。
⑩ 地図のタイトルと簡単な説明文を入力します。
⑪ マイマップに戻ってください。「名古屋駅前高層ビル」が追加されています。そこをクリックすると、3つのビルにピンが立った地図が表示されます。
「マイマップで開く」をクリックしてください。
ここまでで、地図上に複数ピンを表示させることができました。
ピンを複数表示したグーグルマップの共有
複数のピン表示ができたものの、まだこの段階では自分だけしか見られない状態です。
以下で誰でも見られるような設定にしていきます。
① 一般公開する設定を行います。下の図のように「共有」をクリックしてください。
② 下の図のように、「変更」をクリックしてください。
③ 下の図のように、「オン-ウェブ上で一般公開」にチェックを入れ、「保存」をクリックしてください。
ここまでで、先ほど作成した名古屋駅前高層ビルの地図が誰でも見られるようになりました。(共有化)
自分のサイトに埋め込む
ウェブサイトへの埋め込みコードを入手します。
① 地図の画面に戻り、下の図のように、「名古屋駅前高層ビル」のメニューを開きます。そして、「自分のサイトに埋め込む」をクリックしてください。
② 埋め込み用のHTMLコードが表示されるので、コピーしておきましょう。
③ WordPressのテキストモードで、上でコピーしたHTMLコードを貼り付けます。
④ ちゃんと複数ピンが表示された地図が表示されるか確認してみましょう。(プレビュー)
ちゃんと3つピンが表示されていますね。
スマホでもうまく表示されるか確認しておいてください。
グーグルマップのマイマップを使ってピンを複数表示させる方法は以上で終了です。
グーグルドライブへの自動保存(おまけ)
マイマップは、Googleにログインしている状態であれば、Googleドライブに自動的に保存されます。
マイマップを完全に削除したい場合、Googleドライブにてゴミ箱からも削除してください。
プラグイン「MapPress」で設定
プラグイン「MapPress」を使えば、とても簡単に複数ピン表示が可能となります。
インストールと設定が完了していることを前提に説明しますので、MapPressの導入がまだの場合は、インストールや設定方法などをまとめた記事をご覧ください。
① WordPress投稿画面下のMapPressで「新規マップ」を作成します。
② マップタイトルを入力し、目的地の住所または名称を検索してください。
③ 目的地がピン表示されています。(赤色)
④ 目的地を他のところに変えて検索してみましょう。
⑤ 表示させたいピンの数分だけ同じ作業を繰り返します。すべて終わったら、「保存」をクリックしてください。
⑥ 下の図のように、「記事に挿入する」をクリックしてください。
↓
⑦ プレビューで確認してみましょう。
ちゃんと3つのピンが表示されていますね。
プラグイン「MapPress」を使って、ピンを複数表示させる方法は以上で終了です。
関連記事
まとめ
プラグインを使う方が非常に簡単にできますが、プラグインをなるべく入れたくないという方は、Googleマップのマイマップからでも慣れてしまえば簡単にできます。
便利な機能なので、是非試してみてください。
それでは。