「オリジナルデザインのGoogleマップを作ろう！」 アクセスマップなどで使う機会も多いGoogleマップ。実は、Google Maps APIという仕組みを使うと、細かいカラーリングや表示要素のコントロールができることをご存じですか？　Webページのデザインに合わせて、Googleマップもオリジナルデザインにカスタマイズする方法をデザイナー向けにご紹介します。 * デザイナー向けGoogle Maps APIの使い方 * カラーリングのポイント * 便利なWebサービスの紹介 ---------------------------------------------------- 株式会社スパイラルエッジ http://spiraledge.jp/ WEBデザイナー / WEBプログラマー 渡辺 知規（WATANABE Tomonori）

1. DIST.7 一歩差がつくデザインテクニック
「 オリジナルデザインのGoogleマップを作ろう！ 」

2. 渡辺 知規（ワタナベ トモノリ）
・WEB デザイナー / WEBプログラマー
・株式会社スパイラルエッジ 代表取締役
池袋の小さな WEB 制作会社で、
WEB を中心としたクリエイティブワークに従事
自己紹介

3. [ 1 ] デザイナー向け Google Maps API の使い方
[ 2 ] カラーリングのポイント
[ 3 ] 便利な Web サービスの紹介
本日ご紹介させていただくのは･･･
Google Maps API

4. デザイナー向け Google Maps API の使い方

5. ・まずは API キーを取得
・Google Maps API を使って基本的な地図を表示させる
まずは準備として･･･

6. Google Maps API を使ったデザインカスタマイズ方法【1】
var style =
[
{
"featureType" : "water",
"elementType" : "all",
"stylers" : [
{"hue" : "#7fc8ed"},
{"saturation" : 55},
{"lightness" : -6},
{"visibility" : "on"}
]
},
～

7. Google Maps API を使ったデザインカスタマイズ方法【2】
… スタイルを変更する箇所
（道路・路線・河川・名所など）
featureType
… 「featureType」で指定した箇所の、
具体的な変更部分を指定
→ Geometry ： 線
→ Labels ： テキスト
elementType

8. Google Maps API を使ったデザインカスタマイズ方法【3】
… 具体的な見た目を指定stylers
【主なプロパティ】
→ color ： カラーコードによる色の指定（単体で指定）
→ hue ： カラーコードによる色の指定
（saturation や lightness などと併用）
→ saturation ： 彩度（-100 ∼ 100）
→ lightness ： 明度（-100 ∼ 100）
→ visibility ： 表示 or 非表示 (on, off, or simplified) ... など

9. // スタイルオプションの設定
var styleOptions = {
name: ' 公園 '
}
var styleType = new google.maps.StyledMapType(style, styleOptions);
// 地図にスタイルを設定
map.mapTypes.set('park', styleType);
map.setMapTypeId('park');
Google Maps API を使ったデザインカスタマイズ方法【4】
【設定したスタイルを地図に反映させる為には】

10. カラーリングのポイント

11. ・サイトのテーマカラーに合わせた配色
・あまり色は使い過ぎない
・できるだけシンプルな配色にする
・地図としての機能性を維持するため、ラベルなどは、
はっきりとした色にする
カラーリングのポイント

12. 便利なWebサービスのご紹介

13. 【スタイルを作成する為の Web サービス（Google 公式）】
Styled Maps Wizard
http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
【スタイルテンプレート集】
SNAZZY MAPS
https://snazzymaps.com/
便利なWebサービスの紹介

14. ありがとうございました。