not good but great

プログラミング、アート、映画・本の感想について書きます。

Googleマップのデザインを変更して、線路のないGoogleマップを作ってみた

Google Mapのデザインは変えられる

世界中のデザイナーがGoogle Mapのデザインを投稿するサイトを見ました。

Snazzy Maps - Free Styles for Google Maps

とてもかっこよかったです。自分も作ってみることにしました。

デモ


東京の地図から線路と道路を消してみました。シンプルにしたほうがいいか迷いましたが、地名は表示することにしました。

スタイルの変え方

APIのドキュメント

Google Map APIのドキュメントが公開されているので、それを参考にします。

Cloud based maps styling  |  Maps Customization Guide  |  Google Developers
Google Maps JavaScript API V3 Reference  |  Google Developers

基本的なコンセプトは2つ

2つのことを定義することによってスタイルを変更することができます。それは対象物とスタイラです。

以下ドキュメントからの抜粋です。

地図上の対象物: 地図上でターゲットとなる地理的要素を示します。これには、道路、公園、水域などと、それらのラベルも含まれます。
スタイラ: 地図上の対象物に適用される色と表示プロパティを示します。色相、彩度、明度、ガンマ値の組み合わせで表示色を定義します。

対象物を決める

featureType

対象物にはadministrative(行政機関?)、road(道路)、landscape(名所)などが用意されています。

{
  featureType: "road"
}

上のように書けば良いです。

またドットを打つことによって、範囲を狭めた対象物を指定できます。例えば「landscape.man_made=人口の名所」となります。
・参考
Google Maps JavaScript API V3 Reference  |  Google Developers

elementType

「elementType」で対象物の要素を決めることが出来ます。要素は道路を例にすると、幾何的な道路の形や道路の名前にあたります。

{
  featureType: "road.local",
  elementType: "geometry.stroke"
}

上のようなコードだと、現地の道路の線を選択することが出来ます。

スタイラを決める

これは基本色や表示、非表示を決めることが出来ます。

stylers: [
  { visibility: "off" }
]

上のコードは対象物を非表示にするコードです。

実際に書いたコード

名所と行政機関を非表示

{
 "featureType":"all",
 "elementType":"labels",
  "stylers":[{
  "visibility":"off"
 }]
},

まず名所、行政機関のラベルがごちゃごちゃしていたので、すべて非表示にします。

{
    featureType:"administrative",
    elementType:"labels",
    stylers:[
        {visibility:"on"}
    ]
},

何もないとわからないので、「新宿区」などの地名だけ表示にしました。

線路と道路を非表示

{
    featureType:"road",
    elementType:"all",
    stylers:[
        {visibility:"off"}
    ]
},
{
    featureType:"transit",//電車、バス、飛行機を含む交通機関
    elementType:"all",
    stylers:[
        {visibility:"off"}
    ]
}

elementTypeをallにして、線もラベルもすべて非表示にしました。

水の色を設定

{
    "featureType":"water",//水
    "stylers":[{
        "color":"#effefd"
    }]
},

川や海の色を変更できるので、薄い水色にしました。

Google Map APIキーを取得する

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=false"></script>

実際にコードを実行するには上記のコードを貼る必要があります。

APIキーを使うとアプリケーションの使用状況を見ることができるみたいです。取得方法は下記のページを見てください。

概要  |  Maps JavaScript API  |  Google Developers



作った感想

説明を端折った部分もあるので、これだけだとわからないかもしれません。日本語のドキュメントが用意されているので、やりやすいと思いました。

線路を非表示するだけで、東京のごちゃごちゃ感がなくなったのは不思議な感じがしました。大昔の東京の地図を見ている気分になりました。