Download - DIST.7 「オリジナルデザインのGoogleマップを作ろう!」
![Page 1: DIST.7 「オリジナルデザインのGoogleマップを作ろう!」](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55c04cf8bb61eb1f1e8b46b2/html5/thumbnails/1.jpg)
DIST.7 一歩差がつくデザインテクニック
「 オリジナルデザインのGoogleマップを作ろう!」
![Page 2: DIST.7 「オリジナルデザインのGoogleマップを作ろう!」](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55c04cf8bb61eb1f1e8b46b2/html5/thumbnails/2.jpg)
渡辺 知規(ワタナベ トモノリ)・WEBデザイナー / WEBプログラマー・株式会社スパイラルエッジ 代表取締役
池袋の小さなWEB 制作会社で、WEBを中心としたクリエイティブワークに従事
自己紹介
![Page 3: DIST.7 「オリジナルデザインのGoogleマップを作ろう!」](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55c04cf8bb61eb1f1e8b46b2/html5/thumbnails/3.jpg)
[ 1 ] デザイナー向け Google Maps API の使い方
[ 2 ] カラーリングのポイント
[ 3 ] 便利なWeb サービスの紹介
本日ご紹介させていただくのは・・・
Google Maps API
![Page 4: DIST.7 「オリジナルデザインのGoogleマップを作ろう!」](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55c04cf8bb61eb1f1e8b46b2/html5/thumbnails/4.jpg)
デザイナー向け Google Maps API の使い方
![Page 5: DIST.7 「オリジナルデザインのGoogleマップを作ろう!」](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55c04cf8bb61eb1f1e8b46b2/html5/thumbnails/5.jpg)
・まずは API キーを取得
・Google Maps API を使って基本的な地図を表示させる
まずは準備として・・・
![Page 6: DIST.7 「オリジナルデザインのGoogleマップを作ろう!」](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55c04cf8bb61eb1f1e8b46b2/html5/thumbnails/6.jpg)
Google Maps API を使ったデザインカスタマイズ方法【1】
var style =[ { "featureType" : "water", "elementType" : "all", "stylers" : [ {"hue" : "#7fc8ed"}, {"saturation" : 55}, {"lightness" : -6}, {"visibility" : "on"} ] },
~
![Page 7: DIST.7 「オリジナルデザインのGoogleマップを作ろう!」](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55c04cf8bb61eb1f1e8b46b2/html5/thumbnails/7.jpg)
Google Maps API を使ったデザインカスタマイズ方法【2】
… スタイルを変更する箇所 (道路・路線・河川・名所など)
featureType
… 「featureType」で指定した箇所の、 具体的な変更部分を指定
→ Geometry : 線 → Labels : テキスト
elementType
![Page 8: DIST.7 「オリジナルデザインのGoogleマップを作ろう!」](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55c04cf8bb61eb1f1e8b46b2/html5/thumbnails/8.jpg)
Google Maps API を使ったデザインカスタマイズ方法【3】
… 具体的な見た目を指定stylers
【主なプロパティ】
→ color : カラーコードによる色の指定(単体で指定)→ hue : カラーコードによる色の指定 (saturation や lightness などと併用)→ saturation : 彩度(-100 ~ 100)→ lightness : 明度(-100 ~ 100)→ visibility : 表示 or 非表示 (on, off, or simplified) ... など
![Page 9: DIST.7 「オリジナルデザインのGoogleマップを作ろう!」](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55c04cf8bb61eb1f1e8b46b2/html5/thumbnails/9.jpg)
// スタイルオプションの設定 var styleOptions = { name: ' 公園 ' } var styleType = new google.maps.StyledMapType(style, styleOptions);
// 地図にスタイルを設定 map.mapTypes.set('park', styleType); map.setMapTypeId('park');
Google Maps API を使ったデザインカスタマイズ方法【4】
【設定したスタイルを地図に反映させる為には】
![Page 10: DIST.7 「オリジナルデザインのGoogleマップを作ろう!」](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55c04cf8bb61eb1f1e8b46b2/html5/thumbnails/10.jpg)
カラーリングのポイント
![Page 11: DIST.7 「オリジナルデザインのGoogleマップを作ろう!」](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55c04cf8bb61eb1f1e8b46b2/html5/thumbnails/11.jpg)
・サイトのテーマカラーに合わせた配色
・あまり色は使い過ぎない
・できるだけシンプルな配色にする
・地図としての機能性を維持するため、ラベルなどは、 はっきりとした色にする
カラーリングのポイント
![Page 12: DIST.7 「オリジナルデザインのGoogleマップを作ろう!」](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55c04cf8bb61eb1f1e8b46b2/html5/thumbnails/12.jpg)
便利なWebサービスのご紹介
![Page 13: DIST.7 「オリジナルデザインのGoogleマップを作ろう!」](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55c04cf8bb61eb1f1e8b46b2/html5/thumbnails/13.jpg)
【スタイルを作成する為のWeb サービス(Google 公式)】Styled Maps Wizardhttp://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
【スタイルテンプレート集】SNAZZY MAPShttps://snazzymaps.com/
便利なWebサービスの紹介
![Page 14: DIST.7 「オリジナルデザインのGoogleマップを作ろう!」](https://reader031.vdocuments.pub/reader031/viewer/2022020208/55c04cf8bb61eb1f1e8b46b2/html5/thumbnails/14.jpg)
ありがとうございました。