登山やキャンプや日々のこと

趣味の登山やキャンプの体験記や日々の雑記

TIPS Googleマップで複数のマーカー(ピン)を表示して、ブログサイトに埋め込む方法

f:id:hashimo123:20180414135559j:plain

自分のブログサイトに複数のマーカーをつけた地図を表示したいときってありませんか。通常のGoogleマップ検索では、一つのマーカーを表示してくれるのですが、
別のマーカーを追加しようと検索すると前のマーカーが消えてしまいます。

 

複数のマーカーを表示するには、Googleマップ
マイマップ
を利用します。

 

僕も一枚の地図に複数のキャンプ場を載せたくて、マイプレイスを利用しています。今回は、Googleマップで複数のマーカーを表示して、ブログサイトに埋め込む方法を紹介します。

 

大きな流れは以下の4ステップです。

①マイマップに表示したい地点を登録する
②共有設定を変更する
③埋め込み用のソースコードを取得する
④自サイトにソースコードを埋め込む


以下で具体的に補足します。


①マイマップに表示したい地点を登録する

googleマップの左上のメニューからマイプレイスをクリックします。

f:id:hashimo123:20180414134111p:plain

f:id:hashimo123:20180414134159p:plain

 

 

マイマップのタグを選択して、地図を作成をクリックします。

f:id:hashimo123:20180414140507p:plain

 

 

無題の地図が表示されますので、検索窓にマーカーをつけたい場所を入力して検索します。

f:id:hashimo123:20180414134336p:plain

 

 

場所が検索されるので、「地図に追加」をクリックします。

f:id:hashimo123:20180414134438p:plain

 

 

追加すると、マークが黄色から青色に変わります。ペイントマークをクリックすれば、色やロゴを変更できます。今回はキャンプ場なので、キャンプマークにしました。

f:id:hashimo123:20180414134506p:plain

 


鉛筆マークをクリックすれば、マーカーの名前を変更することもできます。

f:id:hashimo123:20180414134528p:plain

 

 

同様の方法で、マーカー登録したい地点を検索し、地図に登録していきます。

f:id:hashimo123:20180414134605p:plain

 

 

②共有設定を変更する

すべて登録が終わったら、共有の設定を変更していきます。

f:id:hashimo123:20180414134627p:plain

 

 

初期設定では、「非公開」の状態なのでこれを変更します。

f:id:hashimo123:20180414134642p:plain

 

 

ブログなど、公開先を限定しない場合は、一番上の「ウェブ上で一般公開」を選択して保存します。

f:id:hashimo123:20180414134659p:plain

 

 

「非公開」だった設定が変更されました。

f:id:hashimo123:20180414134717p:plain

 

 

マイマップの名前が「無題の地図」だと味気ないため変更します。

f:id:hashimo123:20180414134743p:plain

 

 

今回は「兵庫県のオートキャンプ場」にしました。

f:id:hashimo123:20180414134753p:plain

 

 

③埋め込み用のソースコードを取得する

マイマップの名前の横をクリックし、「自分のサイトに埋め込む」を選択します。

f:id:hashimo123:20180414134841p:plain

f:id:hashimo123:20180414134849p:plain

 


ソースコードが表示されるのでこれをコピーします。

f:id:hashimo123:20180414134910p:plain

 

 

④自サイトにソースコードを埋め込む

自分のブログサイトに埋めこんで公開すれば完成です。

f:id:hashimo123:20180414135014p:plain

 

 

以上、今回はGoogleマップへの複数マーカー登録とブログへの埋め込み方法の紹介でした。