Google マイマップでオリジナル地図を作成し埋め込んでみる

Google Mapの埋め込みと、Google Map APIを使ったカスタマイズ

Google MAPで埋め込みたい地点からiframeで埋め込む方法（このページでは普通の方法と呼びます）と、それもいいけど、ピンを変更したり色調整したりしたい！ そんなときはGoogle Map APIを使って埋め込む方法の備忘録です。APIを使用せず普通にiframeで埋め込む方法まずは普通にiframeでGoogle MAPを埋め込んでみます。iframeデフォルトごくごく普通の配置方法です（ダミーで岩手大学です）。Demo埋め込みたい場所をGoogle MAPで開き（ピンがあるならそのピンを選択して表示させた状態で）、「共有」>「地図を埋め込む」タブからサ...

Google マイマップ サービスページ

Google マイマップについての紹介ページはこちら。

概要 - Google マップ

Google マップで世界の旅へ。ストリートビュー、3D 表示、詳細なルート検索やナビ、構内の徒歩経路検索など、便利で楽しい機能が盛りだくさん。パソコンでも携帯端末でもご利用いただけます。

利用を開始はこちらのページから。Googleアカウントが必要です。

ログイン - Google アカウント

団体・会社の場合はGoogleアカウントは共有のものを作っておこう

ままあるんですが、団体・会社のWEBサイトにGoogleマイマップなりGoogleアナリティクスといったサービスを使う場合、作業担当者のGoogleアカウントでログインし設定するのは長期的に見てNGです。
その担当者がいなくなってアカウントのログイン情報を誰も管理できてない状態になったり、そもそものアカウントが消えてしまい困ることになります。
Googleのサービスも数年単位で仕様変更があることが多いので、設定の変更が必要になる場合もあるため、団体・会社の共有Googleアカウントを作成し、ログイン情報や何のサービスに紐づけているか管理するのをお勧めします。

Google マイマップ カスタマイズの流れ

とても操作が簡単なので、ざーっと流れをまとめます。

「+新しい地図を作成」をクリック。

左上のパネルから、地図のタイトルと説明を記入。

ピンは検索して地点を選ぶか、検索窓下のピンアイコンを選択した状態で地図上のお好きな場所をクリックでピンが設置されます。

ピンは色もアイコンも変更できます（画像をアップロードすることでオリジナルのアイコンも設置できます）。

ルートは自分でポチポチ線を引っ張ってくこともできますし、A地点からB地点までの地点をそれぞれ検索して設定することもできます。

ざっとこんな感じ（テストなのでピンの位置はあまり正確ではないです）。

左のパネルの下にある「基本地図」から地図のテイストを６種類の中から選べます。今回は荒ぶる自然の北海道らしいテイストにしてみました。

地図タイトル横のメニュー（縦に・が3つあるアイコン）を開き、「自分のサイトに埋め込む」を選択。

お馴染みiframeのソースが吐き出されました。

公開範囲はデフォルトでは自分のみなので、「ウェブ上での一般公開」に変更します。基本的に編集権限は管理者のみでいいと思います。

Google マイマップ 埋め込み結果

埋め込んだ結果が以下のとおり（後からこっそり知床のアイコンをオリジナル画像に差し替えてみました）。

以前は経度緯度を調べてscript内に一箇所一箇所記述していった記憶があるんですが、いつの間にこんな簡単便利なサービスが始まってたんでしょう……。日々勉強し続けないとダメですね。

APIでの実装ほど細かいカスタマイズはできないようですが、簡単にstyleを当ててみた結果以下の程度には変えられました（今はIEの存在を無視します）。
ここではborder-radius: 10px; filter: grayscale(1); border: none;を当てています。