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を使って、自分好みの地図を作ろう先生：川村健一

Recommended

Recommended

More Related Content

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

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

More from schoowebcampus

More from schoowebcampus (20)

Recently uploaded

Recently uploaded (12)