Google Maps APIを使って、自分好みの地図を作ろう先生：川村健一

COPYRIGHT © OPT INC. ALL RIGHTS RESERVED.
Google Maps APIを使って、
自分好みの地図を作ろう
2014.05.16
川村健一 (OPT, Inc.)
手軽にできる、「デザイン」と「機能」のカスタマイズ

自己紹介
2
名前：川村健一 (カワムラケンイチ)
・2011年、オプト入社
・主にWebサイトやリッチアド、オンラインビデオを初めとする、
インタラクションコンテンツのアートディレクション、デザインを担当。
・東京インタラクティブ・アド・アワード銅賞
・日本グラフィックデザイナー協会（JAGDA）正会員
・DoubleClick Studio Certiﬁed User (全資格保持国内1名／全世界11名 2013.12.26現在)
・MdN Design Interactive連載中

Google Maps APIとは
3
・Googleマップの機能を、カスタマイズして
ウェブページやモバイルアプリケーションで使用するためのサービス
・無料版と有償版がある

無料版の利用規約について
4
・誰でも無償で地図のページを閲覧できること
ユーザーから課金を行っていないこと

・閉じられた環境下で使用する場合、有償版が必要
イントラネットや社内システムは有償版を契約する必要がある

・会員制のコンテンツの場合、無償で登録できて
地図のページにアクセスできる
SNSやサービスサイト等、会員ページ内で使用する場合、
無償で会員になれる場合は可能

・1日あたり、25000アクセス以内であること
連続 90 日を超えて使用制限を超過した場合にのみ適用される
ライセンス詳細：https://developers.google.com/maps/licensing

5
まずは、イメージを掴むために、
事例をみてみましょう。
・Ferrari Store Locator
・住友不動産販売店舗検索
・50 Problems in 50 Days

Ferrari Store Locator
6
URL: http://blog.store.ferrari.com/store-locator/

住友不動産販売店舗検索
7
URL: http://www.stepon.co.jp/center/

50 Problems in 50 Days
8
URL: http://50problems50days.com/

問題
9
1.  1日のアクセス数2000件程度の非会員制
コーポレートサイト
2.  1日のアクセス数2000件程度の無料で入会できる
会員制サイト
3. 特定企業のみ使用できる社内システム
有償版のライセンスが必要なコンテンツは
以下の内どれ？
チャット欄にポストしてみてください。

10
次に、実際にデザインしてみましょう。

デザインをカスタマイズ
これから作ってみるもの
11
ページにマップを組み込む
マーカーを置く
目的地までのルートを明示する
01
02
03
04

これから作ってみるもの
12
本日のデータは以下にアップしてあります
http://www.twist-cube.com/demo/schoo/schoo_0516.zip
HTMLソースとマーカーのアイコンデータデータ内容：

01ページにマップを組み込む
ご与件の整理理
13

スクリプトは、たったこれだけ！
14
function init( )
{
var mapOptions = {
// ズームレベル
zoom: 15,
// 地図の種類
mapTypeId: google.maps.MapTypeId.ROADMAP,
// マップ中心の緯度と経度
center: new google.maps.LatLng( 35.691914, 139.733863 )// 市ヶ谷
};
// Mapクラスのインスタンスを作成
var map = new google.maps.Map( document.getElementById( 'map' ),
mapOptions ) ;
}
google.maps.event.addDomListener( window, 'load', init ) ;

ズームレベルについて
15
数字が小さいほど広域
数字が大きいほど詳細な地図になる
zoom: 3 zoom: 15

地図の種類について
16
ROADMAP SATELLITE
HYBRID TERRAIN
市街地地図航空写真
航空写真 + 都市名等地形の特徴と植物の分布

緯度と経度について
17
// マップ中心の緯度と経度
center: new google.maps.LatLng( 35.691914, 139.733863 )
※ Latitude:
Longitude:
緯度 -90.0 ∼ 90.0
経度 -180.0 ∼ 180.0
http://www.geocoding.jp/
緯度経度を調べるサイト

問題
18
1.  ズームレベルを小さくする
2.  ズームレベルを大きくする
設定してあるzoomが5だとします。
より、広域で表示するように修正するには、
ズームレベルを大きくする、小さくする？

02マーカーを置く
19

20
var marker = getMarker( {
position: new google.maps.LatLng( 35.689236, 139.735744 ),
map: map
}
);
function getMarker( option ) {
var marker = new google.maps.Marker( option );
return marker;
}

マーカーにロールオーバーしたら情報を出す
21
title: "OPT,INC.",
map: map
}
);

マーカーをオリジナルの画像にする
22
title: "OPT,INC.",
icon: "./images/marker.png",
map: map
}
);

問題
23
1.  new google.maps.LatLng( 35.710063, 139.8107 )
「東京スカイツリー」にマーカーを置くとします。
東京スカイツリーの緯度経度に一番近く、正しく
表示されるのは以下の内、どれでしょう？

03目的地までのルートを明示する
24

出発点から目的地までのルートを明示する
25
ラインを引く上で、やるべきこと。
1)  ラインを引く、ポイント毎の緯度経度を用意する
2)  ラインの色を決める
3)  ラインの透明度を決める
4)  ラインの太さを決める

ポイント毎の緯度経度って？
26
上のラインは、黄色いポイント3点から構成されています。
ポイント3点の緯度経度を設定することでラインを描画します。

27
var points = [
new google.maps.LatLng(35.69091644089345, 139.73585844039917),
new google.maps.LatLng(35.6894873807213, 139.7354131937027),
new google.maps.LatLng(35.68931746027821, 139.7356116771698)
];
var polyOptions = {
strokeColor: "#e45991",
strokeOpacity: "1",
strokeWeight: 7,
path: points
};
var poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);
3点の緯度経度
線の色
線の透明度
0
〜
1
線の太さ

便利なサイトがあります
28
http://www.odekakemap.com/polyline/
おでかけマップ

1.  6個
2.  7個
3.  5個
問題
29
右の地図は
渋谷ハチ公からschooまでの
ルートを明示したものです。
この線は何個のポイントから
描かれているでしょうか？

04デザインをカスタマイズ
30

31
var styles = [ { "elementType": "labels", "stylers": [ { "visibility": "off" } ] },
{ "featureType": "water", "stylers": [ { "visibility": "on" }, { "color": "#258be3" } ] },
{ "featureType": "poi", "stylers": [ { "visibility": "off" } ] },{ "featureType": "road",
"stylers": [ { "visibility": "off" } ] },{ "featureType": "landscape.natural", "stylers":
[ { "color": "#fffffa" } ] },{ "featureType": "transit.station", "elementType":
"labels.text", "stylers": [ { "visibility": "on" } ] } ];
// Mapクラスのインスタンスを作成
var map = new google.maps.Map( document.getElementById( 'map' ),
mapOptions ) ;
map.setOptions({styles: styles});
スタイルを定義
定義したスタイルをマップに適用

スタイルを定義する便利サイト
32
http://gmaps-samples-v3.googlecode.com/svn/
trunk/styledmaps/wizard/index.html

考え方
33
1)  マップの要素を選択
2)  選択した要素を表示するか、
シンプルに表示するか、
隠しちゃうか決める。
3)  表示する要素の場合、
色などを設定する。
水域の設定例

デザインをカスタマイズする
http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
便利サイトまとめ
34
目的地までのラインを引く
http://www.odekakemap.com/polyline/
緯度経度を調べる
http://www.geocoding.jp/
Google Maps API 公式ページ
https://developers.google.com/maps/
http://snazzymaps.com/

宿題
35
本日学んだ内容をもとに、
Googleマップのデザインをカスタマイズして
みてください。
※完成したらURLをポストしてください。
イケてるデザインを作りましょう！

お問い合わせ
36
Twitter:
Facebook:
LinkedIn:
https://twitter.com/kenichikawamura
https://www.facebook.com/kenichi.twistcube
http://www.linkedin.com/in/twistcube
http://www.opt.ne.jp/
・会社
・SNS

Google Maps APIを使って、自分好みの地図を作ろう先生：川村健一

More Related Content

Similar to Google Maps APIを使って、自分好みの地図を作ろう先生：川村健一 (20)

More from schoowebcampus (20)

Recently uploaded (10)