はじめに
実務案件でWebサイトに埋め込んでいるGooglemapに指定した場所の全てにピンをつけて欲しいというご依頼がありました。通常のGooglemapの埋め込みで複数の箇所にピンをつけることはできないですし、指定された場所が検索しても表示されないこともありました。
マイマップを使用すれば複数の箇所にピンをつけ、検索で表示されなくても好きな箇所にピンをつけて名前をつけることも可能なので今回はマイマップを使用する方法をご紹介しようと思います。
好きな場所にピンをつけたマイマップを作成しWebサイトに埋め込むことができる
地図検索で表示されない場所に名前をつけたマイマップを作成しWebサイトに埋め込むことができる
Googleマイマップにアクセスする
下記にアクセスしてください。
https://www.google.com/maps/d/
他のサイトではGoogle mapにアクセスしてからサイドバーに「マイプレイス」という項目からマイマップを作成する。という紹介が多いのですが、自分のGoogle mapをPCで確認したときにサイドメニュー内に「マイプレイス」が存在しないため、同じように存在しない方は上記リンクからアクセスしてください。
サイドメニューにマイプレイスが存在しない
googleアカウントにログインしていない場合はログイン画面になるのでログインしてください。
スマホでのログインだとアプリがインストールされているとアプリの地図に遷移します。右上の自分のアカウントのアイコンをクリックすると「マイプレイス」があるのでそこからマイマップを作成できます。
マイマップを作成する
PCでログインすると「+ 新しい地図を作成」とあるのでクリックしてください。
地図が開くのでピンを落としたい箇所を検索してください。
例として下記3駅にピンを落としたマイマップを作成します。
「東京駅」「大阪駅」「名古屋駅」
まずは「東京駅」を検索します。
「+地図を追加」をクリックするとマイマップに東京駅が追加されます。
同様に「大阪駅」「名古屋駅」も追加します。
「無題のレイヤ」の名前は赤丸部分の「レイヤ オプション」で変更できるので適宜変更してください。
上の画像では「マイマップ」に名前を変更しています。
また「無題の地図」の名前の変更も、その部分をクリックすれば変更できます。
好きな場所にピンをつけて名前をつける
下記写真の赤丸部分をクリックするとマーカー（ピン）を追加することができます。
そのまま好きな場所をクリックするとピンをつけることができるので、好きな場所をマイマップに追加することができます。
名前は 「好きな場所」にしました。
自分のサイトにマイマップを埋め込む
マップ左上の「共有」をクリックし、選択肢にチェックを1つ以上入れてください。チェックを入れないと自分のサイトにマイマップを埋め込むことができません。チェックを入れた後、下記画像の赤丸をクリックして「自分のサイトに埋め込む」をクリックするとマイマップ表示のソースコードが表示されるのでサイトに埋め込んでください。
