dist.7 「オリジナルデザインのgoogleマップを作ろう！」

DIST.7 一歩差がつくデザインテクニック

「 オリジナルデザインのGoogleマップを作ろう！」

渡辺 知規（ワタナベ トモノリ）・WEBデザイナー / WEBプログラマー・株式会社スパイラルエッジ　代表取締役

池袋の小さなWEB 制作会社で、WEBを中心としたクリエイティブワークに従事

自己紹介

[ 1 ] デザイナー向け Google Maps API の使い方

[ 2 ] カラーリングのポイント

[ 3 ] 便利なWeb サービスの紹介

本日ご紹介させていただくのは･･･

Google Maps API

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

・まずは API キーを取得

・Google Maps API を使って基本的な地図を表示させる

まずは準備として･･･

Google Maps API を使ったデザインカスタマイズ方法【1】

var style =[ { "featureType" : "water", "elementType" : "all", "stylers" : [ {"hue" : "#7fc8ed"}, {"saturation" : 55}, {"lightness" : -6}, {"visibility" : "on"} ] },

～

Google Maps API を使ったデザインカスタマイズ方法【2】

…　スタイルを変更する箇所　　（道路・路線・河川・名所など）

featureType

…　「featureType」で指定した箇所の、　　具体的な変更部分を指定

　　→　Geometry ： 線　　→　Labels 　 ： テキスト

elementType

Google Maps API を使ったデザインカスタマイズ方法【3】

…　具体的な見た目を指定stylers

【主なプロパティ】

→　color ：　カラーコードによる色の指定（単体で指定）→　hue ：　カラーコードによる色の指定　　　　　　　 　（saturation や lightness などと併用）→　saturation ：　彩度（-100 ～ 100）→　lightness ：　明度（-100 ～ 100）→　visibility ：　表示 or 非表示 (on, off, or simplified) ... など

// スタイルオプションの設定 var styleOptions = { name: ' 公園 ' } var styleType = new google.maps.StyledMapType(style, styleOptions);

// 地図にスタイルを設定 map.mapTypes.set('park', styleType); map.setMapTypeId('park');

Google Maps API を使ったデザインカスタマイズ方法【4】

【設定したスタイルを地図に反映させる為には】

カラーリングのポイント

・サイトのテーマカラーに合わせた配色

・あまり色は使い過ぎない

・できるだけシンプルな配色にする

・地図としての機能性を維持するため、ラベルなどは、　はっきりとした色にする

カラーリングのポイント

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

【スタイルを作成する為のWeb サービス（Google 公式）】Styled Maps Wizardhttp://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

【スタイルテンプレート集】SNAZZY MAPShttps://snazzymaps.com/

便利なWebサービスの紹介

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