コーディング /

GoogleMapをかっこ良くする!カスタマイズ方法

地図などを表示するページを作る際に、GoogleMapを読み込むといった事はよくやると思います。
サイトの雰囲気と違っていても、「仕方がない・・・」と妥協した、といった経験も少なからずあるはず。

実はGoogleMapはスタイル(装飾)を定義する事ができるのでデモとして、
今回はデフォルトの色合いを変更して、灰色をベースにしたシックな感じのマップを作ってみました。
まずは、完成形のデモをご覧ください。

色合いを変更した完成形デモ

では、今回用意したデモの内容で説明をいたします。

まずは全体のJSのソースが下記となります。
それでは、順を追ってみてみましょう。

HTMLソース CSSソース ※横幅・高さは必ず指定する。  

GoogleMapAPIの基本設定

上のソース以外にも上記のGoogleMapAPIのJSを読み込みが必要となります。
このソースをまずは、HTMLのhead部に読み込んで下さい。

それではまず、①ではGooleMapの初期設定を行っています。その箇所をクローズアップすると以下の通りになります。

実は上記だけでもgoogleMapは生成されます。

①で地球のどこの場所を出すかの座標を指定しています。

こちらは緯度経度となりますので、緯度経度で入力する必要があります。
緯度経度情報に関しては、小数点で書きますが小数点以下の桁が多いほど精度が高くなります。

ちなみに今回指定してる場所は、東京タワー派なので東京タワーを指定しています。

②でマップの初期設定値を設定します。今回は最小設定となりますが、zoom値とcenterは必ず指定しましょう。
今回は最初に決めた場所を地図の中心としました。

③これでGoogleMapが#mapCanvasに格納されて表示される。

 

スタイルの設定

 

今回のデモにあるスタイルの記述の全貌が上記となります。
項目がちょっと呪文見たいになっているので、ひとつ抜き出してみると

上記のようになります。

{}で囲んだところに、

featureTypeが対象物(何に対して)となり

elementTypeの箇所が要素(何を)となります。

stylersの箇所に色合いを指定します。

Stylersに関しては、hue(基本色)、saturation(彩度)、lightness(明度)、gamma(ガンマ値)が指定できます。

基本色、彩度、明度の3つのものを単一で指定するためにcolorを使う事も可能です。

 

さて、上の例でいうと、対象物を指定するfeatureTypeは”road.arterial”が指定しています。
’road.arterial’とは、「幹線道路」を指す名称となります。

地図上のすべてに変更を加える場合は’allと’なります。

 

次にelementTypeに関しては’geometry’となっております。

elementTypeに関しては、プロパティが文字色やその物体を囲む線の色など細かく指定する事ができます。
CSSで例えると、colorとか、font-weightや、border-colorといったプロパティにあたります。
そして、「geometry」の意味は「その対象物」自体にという意味になるようです。

上のソースに置き換えると、「幹線道路(全体)に」となります。

さて、最後のstyletsに関しては、色合いの指定となります。
また、stylersには色合いだけではなくて、その要素を表示/非表示といったプロパティも存在します。
それが、visibilityというプロパティです。

”visibility”のプロパティの値を’off’’にすると「幹線道路につくラベル」を消す事ができます。

elementTypeとfeatureTypeに関しては、設置できる値に関しては下にまとめてるので参考にしてください。

 

オリジナルマーカーを設置する。

折角、色合いも変更できるようになったので、折角なのでマーカーも変更してみようと思います。

このコードそのまま利用する場合、#1と#2は、環境によって変更する必要があります。

  完成デモ

とりあえず、GoogleMapがちょっとかっこよくなりました!!
指定できる値などは下にまとめてますので、色々と試してみてください。

1点注意点として、スタイルをたくさん設定しすぎると、動作が重くなるのでそこだけ気をつけて下さい。

   設定できる項目一覧

上記で、設定の仕方や意味をお伝えしましたが、設定できる要素をまとめました。

指定の仕方、

例:一般道路に赤色の色を指定する場合   [featureType]で設定できる設定値
種類 説明 記述文 区分
行政領域 国境・県境などの線や図形、国名・市町村名など administrative.country
administrative.land_parcel 区画
administrative.locality 地区・市区
administrative.neighborhood 周辺地域
administrative.province 州・県
風景 建物・山などの線や図形、建物・島・山・川・峠・湖など landscape.man_made 人造物
landscape.natural 自然物
ランドマーク 学校・病院・駅・公園・工場・遊園地・商業施設・ビルなど poi.attraction 観光地
poi.business ビジネス
poi.goverment 政府機関
poi.medical 緊急サービス
poi.park 公園
poi.place_of_worship 宗教関連施設
poi.school 学校
poi.sports_complex スポーツ施設
道路 高速道路・国道・県道・市道などの線や図形、それらの名称や国道標識・県道標識・信号機アイコンを含みます。 road.arterial 幹線道路
road.highway 高速道路
road.local 地方道
交通機関 線路・航路・空路・空港などの線や図形、線路名・駅名・空港名や駅・バス停留所アイコンを含みます。 transit.line 路線
transit.station
transit.station.airport 空港
transit.station.bus バス停
transit.station.rail 鉄道駅
水域 海・川・湖・プールなど水のある場所の線や図形、海・洋・湾の名称を含みます。 water 水域
  [elementType]で設定できる設定値
記述文 対象
all(デフォルト) その対象物のすべての要素を選択。
geometry その対象物のすべての幾何学要素を選択
geometry.fill 対象物の塗りつぶしのみ
geometry.stroke 対象物のストロークのみ
labels その対象物に関連付けられたテキスト ラベル
labels.icon 対象物のラベル内に表示されるアイコン
labels.text ラベルのテキスト
labels.text.fill ラベルの塗りつぶし
labels.text.stroke ラベルのテキストのストローク
solecolor-design

この記事を書いた人

solecolor-design

PAGE TOP