Googleマップに複数ピンを表示!マイマップ派?MapPress派?

近隣の駐車場をまとめて表示したい場合や、行きたい観光地などをまとめて表示したい場合など、地図上にいくつもピン(マーカー)を立てたいときってありませんか?

WordPressサイトにGoogleマップを簡単に埋め込む方法(HTMLコードのコピペあるいはプラグイン「MapPress Easy GoogleMaps」)はこちら

今回は、Googleマップに複数ピンを立てた上でサイトに埋め込む方法について、Googleマップのマイマップから設定する方法と、WordPressのプラグイン「MapPress Easy GoogleMaps」(以下、MapPress)を使う方法をご紹介します。

スポンサーリンク

1.Googleマップのマイマップから設定

ちょっと手間がかかりますが、下記の手順通りにやればできますので、やってみてください。

1-1.マイマップの設定

① Googleマップを開いて、検索窓の横にあるメニューをクリックし、マイプレイスを開いててください。

Googleマップメニュー

マイプレイス

② 「マイマップ」タブを選択し、下の方にある「地図を作成」をクリックしてください。

マイマップ

③ 検索窓で住所あるいは目的地の名称を入力してください。今回は、「ミッドランドスクエア」と検索してみました。すると、ミッドランドスクエアの場所に黄緑色のピンが立ちました。この時点ではまだ地図に追加されていない状態です。

目的地の検索

④ 「+地図に追加」ボタンをクリックしてください。黄緑色のピンから青色のピンに変わりました。これで地図に追加されたことになります。

ミッドランドスクエア

⑤ 他にピン表示したい場所を検索します。今回は、「名古屋ルーセントタワー」を検索してみます。先ほどと同じように、「+地図に追加」をクリックしてください。

ルーセントタワー

⑥ 黄緑色のピンが青色に変わり、地図に追加されました。

ルーセントタワー地図に追加

⑦ 表示させたいピンの数分だけ同じ作業を繰り返します。今回はもう一つ、大名古屋ビルヂングを追加して3つの高層ビルを表示してみたいと思います。

3つの高層ビル

⑧ ピンの色が見にくかったら変更することができます。青いマークが他にもあり多少見にくいので、ピンの色を赤に変えてみます。

ピンの色変更  色の種類

⑨ 地図のタイトルを分かりやすいものに変更します。「無題の地図」をクリックしてください。

地図のタイトル変更

⑩ 地図のタイトルと簡単な説明文を入力します。

タイトル、説明文入力 

⑪ マイマップに戻ってください。「名古屋駅前高層ビル」が追加されています。そこをクリックすると、3つのビルにピンが立った地図が表示されます。

マイマップに追加

「マイマップで開く」をクリックしてください。

3つのピン表示

ここまでで、地図上に複数ピンを表示させることができました。

1-2.地図の共有

複数のピン表示ができたものの、まだこの段階では自分だけしか見られない状態です。以下で誰でも見られるような設定にしていきます。

① 一般公開する設定を行います。下の図のように「共有」をクリックしてください。

共有クリック

② 下の図のように、「変更」をクリックしてください。

変更

③ 下の図のように、「オン-ウェブ上で一般公開」にチェックを入れ、「保存」をクリックしてください。

一般公開

ここまでで、先ほど作成した名古屋駅前高層ビルの地図が誰でも見られるようになりました。(共有化)

1-3.自分のサイトに埋め込む

ウェブサイトへの埋め込みコードを入手します。

① 地図の画面に戻り、下の図のように、「名古屋駅前高層ビル」のメニューを開きます。そして、「自分のサイトに埋め込む」をクリックしてください。

メニュー

    自分のサイトに埋め込む

② 埋め込み用のHTMLコードが表示されるので、コピーしておきましょう。

埋め込みコード

③ WordPressのテキストモードで、上でコピーしたHTMLコードを埋め込みます。

④ ちゃんと複数ピンが表示された地図が表示されるか確認してみましょう。(プレビュー)

ちゃんと3つピンが表示されていますね。

スマホでもうまく表示されるか確認しておいてください。

Googleマップのマイマップを使って複数ピン表示させる方法は以上で終了です。

1-4.Googleドライブへの自動保存(おまけ)

マイマップは、Googleにログインしている状態であれば、Googleドライブに自動的に保存されます。

マイマップを完全に削除したい場合、Googleドライブにてゴミ箱からも削除してください。

2.プラグイン「MapPress」で設定

プラグイン「MapPress」を使えば、とても簡単に複数ピン表示が可能となります。

インストールと設定が完了していることを前提に説明しますので、MapPressの導入がまだの場合は、インストールや設定方法などをまとめたこちらをご覧ください。

① WordPress投稿画面下のMapPressで「新規マップ」を作成します。

新しいマップ作成

② マップタイトルを入力し、目的地の住所または名称を検索してください。

目的地検索

③ 目的地がピン表示されています。(赤色)

ピン表示(1個)

④ 目的地を他のところに変えて検索してみましょう。

目的地(2つ)

⑤ 表示させたいピンの数分だけ同じ作業を繰り返します。すべて終わったら、「保存」をクリックしてください。

目的地(3つ)

⑥ 下の図のように、「記事に挿入する」をクリックしてください。

記事へ挿入

テキストエディタ

⑦ プレビューで確認してみましょう。

ちゃんと3つのピンが表示されていますね。

プラグイン「MapPress」を使って、複数ピン表示させる方法は以上で終了です。

まとめ

プラグインを使う方が非常に簡単にできますが、プラグインをなるべく入れたくないという方は、Googleマップのマイマップからでも慣れてしまえば簡単にできます。

便利な機能なので、是非試してみてください。

それでは。