ウェブのあれこれ
ウェブを活用したいひとのためのブログ
GoogleMapsAPIでオリジナルスタイルのマップをWEBサイトに埋め込む方法
2016/03/22 Google

GoogleMapsAPIでオリジナルスタイルのマップをWEBサイトに埋め込む方法

WEBサイトに地図を埋め込む際よく利用されるGoogleMapsAPI。標準では通常のGoogleMapのスタイルが適用されますが、このデザインをカスタマイズすることができます。

【参考】GoogleMapsAPIの使い方シリーズ

・Google Maps JavaScript API V3の使い方

StyledMapWizardを利用してスタイルを変更

スタイルを変更するためには、StyledMapWizardというツールが公開されているのでそれを利用してスタイル定義を生成する方法がとても便利です。

「Selectors」とかかれたウインドウの「Feature type」欄からスタイルを変更したい要素を選択し、「Element type」でさらに適用箇所を選択します。
あとは「Stylers」欄で各種スタイルを設定して行きます。

違う箇所のスタイルを更に設定する場合には「Map Stype」ウインドウの「Add」ボタンを押せばスタイルを追加していくことができます。

埋め込みマップにスタイルを適用するには

StyledMapWizardでマップスタイルを編集したあと、「Map Stype」ウインドウの「Show JSON」ボタンを押してみましょう。変更したスタイルのJSONが出力されます。出力されたJSONを下記のように設定することでオリジナルスタイルのマップを表示することができます。
var map = new google.maps.Map($("#map").get(0));
map.setOptions({styles:[ここに上記で取得したJSON]});

スタイル変更の対象箇所

「Feature type」の欄でスタイル変更の対象箇所を指定するのですが、以下のような対象箇所があり、それぞれに個別のスタイルを適用することができます。ざっくり言うと、「Feature type」で指定した箇所の「Element type」で指定した要素に対して「Stylers」で指定したスタイルを適用するという感じです。

Feature type

All すべての箇所
Administrative 行政区画





Country 
Province  都道府県・州
Locality  市区町村
Neighborhood  周辺地域
Land parcel  区画
Landspace 風景・土地


Mam made  人工物
Natural  自然
 Point of Interrest    ランドマーク
          Attraction   観光地
 Business   ビジネス
 Government   政府機関
 Medical   緊急サービス・病院・警察など
 Park   公園
 Place of worship   宗教関連施設
 School   学校
 Sports complex   スポーツ施設
 Road    道路
      Highway   高速道路
   Controlled access  有料道路
 Arterila   基幹道路
 Local   地方道路
 Transit    交通機関
       Line   路線
 Station   駅
   Airport  空港
   Bus  バス停
   Rail  鉄道
 Water    海・湖・川など

Element type

All すべての要素









Geometry 地図描画


Fill 塗りつぶし
Stroke
Labels 文字・アイコン





Text 文字


Fill 塗りつぶし
Stroke 縁取り
Icon アイコン

Stylers

Visibility 表示方法 On,Off,Simplified
Color RGB(16進)
Gamma 明るさ 0.00~9.99
Invert lightness 明度の反転 true,false
Weight 枠線の太さ 0.1~8.0
Saturation 彩度 -100~100
Hue 色相 RGB(16進)
Lightness 明度 -100~100

簡単にスタイルを変更するには

これだけ設定項目が多いと、スタイルの変更といってもどうやって調整したら・・・。となるかもしれませんが、簡単にスタイルを変更しようと思ったら、「Hue」と「Gamma」を調整するだけでそれなりに変更されます。

「Hue」は全体の色調を指定値に変更するような役割があるので、「Hue」と「Gamma」を指定すれば全体的にバランスの取れた色変更ができるはずです。
Provided by Revolme inc.
revolme.co.jp