TsuyoshiKusakaの日々思うこと その2

(株)クエステトラに所属、ITエンジニア、テニス好き、地域のお手伝いをいろいろ、@tsuyoshikusaka

Google マップで地域の安全マップを作成した

意外に苦労をしたので手順をまとめておく。

  • マイマップの作成

これは比較的にカンタンで、以下のページが参考になる。

www.appps.jp

 

  • (マイマップではなく普通の)マップの色の変更

マップをロードしてそこにスタイルを適用した。Google Map の API の利用が必要で、以下のページが参考になる。

lopan.jp

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 ファイルの公開および反映は以下のページが参考になる。

qiita.com

 

結果としては以下のような感じ。

▼色を変更する前

f:id:tk_4dd:20170429183052j:plain

▼色を変更した後

f:id:tk_4dd:20170429183112j:plain

 

※2017/5/18加筆

アイコンの位置が全部少し上(北)にズレていることが判明。Web で調べてみると、測地系の違いの話が出てきたが、今回は Web 公開が目的ではなく最終的に画像だけが必要だったのと、時間がなかったのとで、アイコンをずらすことで対応。今後を考えるとあまりいい対応方法ではないが・・・