意外に苦労をしたので手順をまとめておく。
- マイマップの作成
これは比較的にカンタンで、以下のページが参考になる。
- (マイマップではなく普通の)マップの色の変更
マップをロードしてそこにスタイルを適用した。Google Map の API の利用が必要で、以下のページが参考になる。
html・Javascript を使う必要があったので、ローカルの Web サーバ上で試した。
自分がやりたかったのは道を目立たせる(道と建物の色の差をつけて道を見やすくする)ということだったが、「gamma」というパラメータで反映できることがわかるまでに結構時間がかかった。
スタイルのパラメータの調査は、Google が提供する Styled Maps Wizard の仕様が以前とは変わっていたため、以下のページの方がやりやすかった。
Google Maps API Styled Map Wizard
後から見つけたのだが、以下にスタイルのパラメータの説明がある。ただこの説明で「gamma」で自分のやりたいことができるとは判断しにくい・・・
スタイル リファレンス | Google Maps JavaScript API | Google Developers
- マイマップの色の変更
結論から言うと、マイマップ自体の色を変更できるかどうかはわからなかった・・・
ということで、今回やりたかったことは以下のように実現した。
・マップの色を変更する
・そこにマイマップのピン等の情報を反映する
マイマップのピン等の情報の反映については、マイマップから KML ファイルを取得。
その KML ファイルを Web 公開(すぐに使える Web サーバを持ってないので Github を利用して raw ファイルを参照する形で)して参照させる。
KML ファイルの公開および反映は以下のページが参考になる。
結果としては以下のような感じ。
▼色を変更する前
▼色を変更した後
※2017/5/18加筆
アイコンの位置が全部少し上(北)にズレていることが判明。Web で調べてみると、測地系の違いの話が出てきたが、今回は Web 公開が目的ではなく最終的に画像だけが必要だったのと、時間がなかったのとで、アイコンをずらすことで対応。今後を考えるとあまりいい対応方法ではないが・・・