DIST.7 「オリジナルデザインのGoogleマップを作ろう！」
2 likes1,252 views
「オリジナルデザインのGoogleマップを作ろう！」 アクセスマップなどで使う機会も多いGoogleマップ。実は、Google Maps APIという仕組みを使うと、細かいカラーリングや表示要素のコントロールができることをご存じですか？ Webページのデザインに合わせて、Googleマップもオリジナルデザインにカスタマイズする方法をデザイナー向けにご紹介します。 * デザイナー向けGoogle Maps APIの使い方 * カラーリングのポイント * 便利なWebサービスの紹介 ---------------------------------------------------- 株式会社スパイラルエッジ http://spiraledge.jp/ WEBデザイナー / WEBプログラマー 渡辺 知規（WATANABE Tomonori）
![[ 1 ] デザイナー向け Google Maps API の使い方
[ 2 ] カラーリングのポイント
[ 3 ] 便利な Web サービスの紹介
本日ご紹介させていただくのは･･･
Google Maps API](https://image.slidesharecdn.com/dist-googlemapsdesign150612-150615043524-lva1-app6891/85/DIST-7-Google-3-320.jpg)
![Google Maps API を使ったデザインカスタマイズ方法【1】
var style =
[
{
"featureType" : "water",
"elementType" : "all",
"stylers" : [
{"hue" : "#7fc8ed"},
{"saturation" : 55},
{"lightness" : -6},
{"visibility" : "on"}
]
},
～](https://image.slidesharecdn.com/dist-googlemapsdesign150612-150615043524-lva1-app6891/85/DIST-7-Google-6-320.jpg)
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. ありがとうございました。