Gdg geo２

Geo×HTML5 on MapsAPI
�QuickHandson（3分クッキング）

春のGoogle勉強会 in高松�2013/3/17
石丸健太郎（@kehi GDG信州Manager & GDE Maps）

13年3月24日日曜日

Menu
��●Geo系API紹介篇�〜プレーンな地図からトッピング感覚で作ってみよう〜
1. 現在地取得と地名検索（Geolocation�＆�Geocoding)
2. 地図と連動したストリートビューを表示（StreetView)
3. 地図に道案内を表示（DirectionsAPI)
4. �地図中のデータをカスタマイズ（StyledMap)

●Geo系API実践篇�〜�きっと役に立つ様々なTipsをご紹介〜
5. ��様々なマーカー表示とパフォーマンスTips
6. ��応用技で使いこなすStaticMapsAPI
7. ��位置情報付きのURIを実装するメリット
8. ��スマホ向けサイトをスマートに表示
9. ��Canvasを使って画像ファイルをLocalStorageに記録 �
10. ��パノラマ写真でマイストリートビューを実現

●Geo系API番外篇
��・FirefoxOSを試す
��・MapsAPIの制限に関する誤解？！
��・0から1を生み出す為に

SampleCode:
http://googlemaps.geo.jp/gdg2/


It’s real iceBreak?!
きっとご利益のある
2年連続の諏訪湖の御神渡り


Recipe1-1:�現在地を取得して地図を表示

完成図材料
・MapsAPI V3（JavaScriptAPI)
・GeolocationAPI（HTML5)

作り方
Sample1:1度だけ位置情報を取得して表示する

Sample2:誤差や計測回数を条件にして精度の高い位置情報を取得する

API Reference
http://code.google.com/intl/ja/apis/maps/documentation/javascript/basics.html#Geolocation
http://dev.w3.org/geo/api/spec-source.html

GeoLocationAPI

①位置取得（GeoLocationAPI）
一度だけ取得：navigator.geolocation.getCurrentPosition(success,error,option);
定期的に取得：navigator.geolocation.watchPosition(success,error,option);

// 位置情報を受信した時の処理
function update(position){
var lat = position.coords.latitude;
var lng = position.coords.longitude;
var currentPos = new google.maps.LatLng(lat, lng);
map.setCenter(currentPos);

//位置の探索を終了
navigator.geolocation.clearWatch(wid);
}


Data Get

var httpObj = createHttpRequest();
httpObj.open("GET",url,true);
httpObj.onreadystatechange = function() {
if (httpObj.readyState == 4 && httpObj.status == 200){
if(httpObj.responseText != ""){
obj = eval("("+httpObj.responseText+")");
}
}
httpObj.send(null);
}

$(function() {
$.getJSON("data.json",function(obj){
hoge(obj);
});
});


Do it yourself

//マーカーの消去は自分で
function clearOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
}
}
markersArray.push(marker);

//infoWindowの消去も自分で
google.maps.event.addListener(marker, "click", function() {
infowindow = new google.maps.InfoWindow({
content: html
});
if (currentInfoWindow) {
currentInfoWindow.close();
}
infowindow.open(map, marker);
currentInfoWindow = infowindow; 8
});

Recipe1-2:�地名で検索して地図を表示

完成図材料
・GeocodingAPI（Geo)

作り方
Sample1:自由入力した地名を検索して遷移

JavaScriptだけでなくHTTPによる呼び出しも可能（サーバ処理で便利）

API Reference
http://code.google.com/intl/ja/apis/maps/documentation/geocoding/


Geocoding

//JavaScript API
var gc = new google.maps.Geocoder();
gc.geocode({ address : adrs }, function(results, status){
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
}else{
alert(status+" : 場所が見つかりませんでした");
}
});

//HTTP Geocoding API

http://maps.googleapis.com/maps/api/geocode/json?address=地名&sensor=true or false

※所在地→緯度経度だけでなく、緯度経度→所在地（逆Geocoding）も対応


Recipe2:�地図と連動したストリートビューを表示

完成図材料
→.StreetViewPanorama

作り方
Sample1:ペグマンから表示
Sample2:API経由で自由な位置に表示

API Reference
http://code.google.com/intl/ja/apis/maps/documentation/javascript/services.html#StreetView


StreetView

// ストリートビュー
var svp = new google.maps.StreetViewPanorama(
document.getElementById("streetview"), {
position : new google.maps.LatLng(lat,lng)
}
);
if(svp.getVisible()){
map.setStreetView(svp);
}


Recipe3:�地図に道案内を表示

完成図材料
・DerectionsAPI（Geo）
・DistanceMatrixAPI（Geo）

作り方
Sample1:道案内を設置する
Sample2:中間地点の文字を変更
Sample3:距離を計測

API Reference
http://code.google.com/intl/ja/apis/maps/documentation/directions/
https://developers.google.com/maps/documentation/distancematrix/?hl=ja

Directions

//ディレクション（道案内）
var directionsRenderer = new google.maps.DirectionsRenderer(rendererOptions);
directionsRenderer.setMap(map);
var request = {
origin: point1,
destination: point2,
travelMode: google.maps.DirectionsTravelMode.WALKING
};
var directionsService = new google.maps.DirectionsService();
directionsService.route(request, function(result, status){
if (status == google.maps.DirectionsStatus.OK) {
directionsRenderer.setDirections(result);
}
});

14


Recipe4:�StyledMapで地図中のデータをカスタマイズ

完成図材料
・StyledMapType

ex)Clean Air Asia

作り方
Sample1:StyledMapWizardでカスタマイズしたStaticMapを生成
Sample2:地図を夜にする?!

StyledMapWizard
http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

Recipe5：�マーカー表示のパフォーマンスTips

完成図材料
・JQuery

作り方
Sample1:矩形領域を指定して都度Ajax通信後マーカーを都度表示
Sample2:すべてのマーカー情報を受け取り後、矩形領域のみマーカーを表示

Which is faster ？単品注文 vs 全部入りどっちがウマい？


Which is faster？マーカー都度読み込み VS 全部読みどっちが速い？

全部・地図をグリグリ動かして使うことを想定させるコンテンツ
・PC向けサイト

都度・一度計測したらほぼ動かす必要のないコンテンツ
・モバイル端末

Event 都度読込み全部読込み

JS処理 10ms/avg 112ms/avg
ネットワーク 617ms/毎回初回1290ms
2回目以降 0ms

＝2回以上なら全部読み・・だが？！

FireBugで計測
console.time();
・・・・
マーカー呼出処理
・・・・
console.timeEnd();

Tips ：位置情報の様々な表現方法
コンテンツ容量やネットワーク速度対策だけでなく描画すべきコンテンツが
多い場合はマーカーの表現方法を変えるのが効果的！

MarkerClusteringの例
http://www.fusonic.net/en/blog/2009/12/11/clustering-for-google-maps-v3-with-fluster2/

JS HeatMapの例
https://developers.google.com/maps/documentation/javascript/layers#JSHeatMaps

Other(FusionTables)
https://googlemaps.geo.jp/gdg2/5/sample3.html


Tips ：緯度経度取得
//For Client
rc = map.getBounds();
mapArea = rc.getSouthWest() +","+rc.getNorthEast();
var url = "http://hoge/fuga.php?ll="+mapArea+"&cache="+(new Date()).getTime();
var httpObj = createHttpRequest();
httpObj.open("GET",url,true);
httpObj.send(null);
//For Server
$sql = "SELECT * FROM hoge
where ((lat BETWEEN $swlat and $nelat) and (lng BETWEEN $swlng and $nelng))";

//圧縮送信も効果的
NE(lat,lng)
PHPならob-gzhandler 1行！

SW(lat,lng)

Recipe6:�応用技で使いこなすStaticMapsAPI

完成図材料
・StreetView ImageAPI（ImageAPIs）
・StaticMapsAPI V2 （ImageAPIs）
・DerectionsAPI（Geo）

作り方
Sample1:Streetviewで表示と同場所同角度の静止画を表示
Sample2:それぞれのscale指定を比較
Sample3:スタティックなルート表示
Sample4:出発地点と到着地点を独立表示
API Reference
http://code.google.com/intl/ja/apis/maps/documentation/directions/
http://code.google.com/intl/ja/apis/maps/documentation/streetview/


Recipe7:位置情報付きURIを実装するメリット

完成図材料
・URI
・URL Scheme

作り方
Sample1:（入口）他サイトやアプリからのスムーズな流入
→TwitterやFacebookからピンポイントに位置表示

Sample2:（出口）自サイトから他アプリへのスマートな遷移
→地図アプリで詳細を表示

参考：URLScheme developers.google.com/maps/documentation/ios/
urlscheme

Recipe8:�スマホ向けサイトをスマートに作る

完成図材料
・HTML5（Form：range)
・JqueryMobile

作り方
Sample1:スライダー表示

Sample2：GeolocationAPIのOptionsを制御

Example
http://codezine.jp/article/detail/5652?p=2


Recipe8:�スマートフォンサイト対応のUI

20pt
60pt

①356pt

④ 480pt

③460pt
356pt
[444pt]
②416pt ※数値はViewPort値（ポイント）
（Retinaのピクセル数は×2）
※iOS6では縦幅が176px広がった
分が表示幅にプラス（+88）

44pt
portrait
320pt



20pt

60pt
①208pt

④ 320pt
①356px

208pt
③300pt

②268pt

32pt

480pt
[568pt]
landscape



①

① CSSで100%指定 →一番広く使えるとは限らない！



① ②

② JavaScriptでアドレスバーを隠した場合(Scrollto)



① ② ③

③ ホーム画面からの起動でフルスクリーン表示（blackモード）



① ② ③ ④

③ ホーム画面からの起動でフルスクリーン表示（blackモード）

④ ホーム画面からの起動でフルスクリーン表示
（black-translucentモード）


iPhone4 iPhone5

iPhone4以前のピクセル
指定のままだと間

<link rel="stylesheet" media="all and (orientation:portrait)" href="iphone5_portrait.css"> //①
<link rel="stylesheet" media="all and (orientation:landscape)" href="iphone5_landscape.css"> //②
① #gmap { ② #gmap {
position : absolute; position : absolute;
top:0px; top:0px;
left:0px; left:0px;
width: 320px; width: 568px;
height:504px; height:268px;
} }

Recipe9： Canvasを使って画像をLocalStorageに記録

完成図材料
・PlacesAPI（Geo）
・WebStorage（HTML5）
・Canvas(HTML5)

作り方
Sample1: Canvasを使って画像ファイルをLocalStorageに記録

API Reference
http://www.html5.jp/canvas/ref.html

Recipe10：パノラマ写真でマイ・ストリートビューを実現

完成図材料
※カスタムストリートビューの解説
・GeocodingAPI（Geo）
・Form、FileAPI（HTML5）

作り方
・iPhone5標準のカメラでパノラマ写真撮影
→180度なので2枚撮って合体
→写真のExifから緯度経度抽出（緯度経度から住所やランドマーク取得）
→画像のリサイズ（1024px × 2048px）と分割（縦4横8 / 256px/1)
→画像データをSQLiteに突っ込む
→StreetView APIで表示 →(゜Д゜)ウマー

function getCustomPanoramaTileUrl(panoID, zoom, tileX, tileY) {
return "/path/" + panoID + '/' + tileX + '_' +tileY + '.jpg';
}
function getCustomPanorama(panoID) {
var streetViewPanoramaData = {
links: [],
copyright: 'kehi',
tiles: {
tileSize: new google.maps.Size(256, 256),
worldSize: new google.maps.Size(2048, 1024),
centerHeading: 0,
getTileUrl: getCustomPanoramaTileUrl
}
};

0_0.jpg 1_0.jpg 2_0.jpg 3_0.jpg 4_0.jpg






1：パノラマ写真180度×2枚撮影（開始地点は真北heading0）（C）
→HTML5からカメラアクセス
http://dev.classmethod.jp/smartphone/ios6-safari-html5/

2：2枚をファイルアップロード（C）
→MobileSafari対応（AndroidはVersionいくつから対応？
Ajax方式→ http://d.hatena.ne.jp/takuya_1st/20121101/1351754417
� 通常のPOST→� http://www.php-labo.net/tutorial/php/upload.html
FileAPI経由のリサイズ→ http://blog.champierre.com/971

3：Exifから緯度経度を抽出（S）
→PHPのExif_Read_dataから緯度経度の処理
��http://www.phppro.jp/qa/857
→Client側でExif取得（jquery.exif.js）�
��http://www.nihilogic.dk/labs/exifjquery/

4：緯度経度から住所もしくはランドマークを取得
→Google GeocodingAPI
https://developers.google.com/maps/documentation/geocoding/?hl=ja

5：緯度経度、ランドマーク、画像バイナリをSQLiteに登録
http://jp.php.net/manual/ja/pdo.lobs.php


６：画像を合体（S）→PHPのGDなどのイメージ関数
http://symfoware.blog68.fc2.com/blog-entry-910.html

７：画像のリサイズ（2048×1024）（S）
GD http://b.n-at.me/archives/132
Webサービス http://www.image440.com/
JS http://b.n-at.me/archives/231 （おまけ）
※画像処理系Webサービスまとめ
http://cg.xyamu.net/2d_links/entry143.html
※全部HTML5でできるようになればいいのに・・・あるいはJSライブラリ

８：画像の分割（256*256）縦8横4分割（S or Web）
Webサービス http://picslice.com/
え？JSで？？ http://today-only.net/img-shuffle/
９：StreetViewに適用
http://googlemaps.googlermania.com/google_maps_api_v3/ja/custom_streetview/3.html


６：画像を合体（S）→PHPのGDなどのイメージ関数
http://symfoware.blog68.fc2.com/blog-entry-910.html

７：画像のリサイズ（2048×1024）（S）
GD http://b.n-at.me/archives/132
Webサービス http://www.image440.com/
JS http://b.n-at.me/archives/231 （おまけ）
※画像処理系Webサービスまとめ
http://cg.xyamu.net/2d_links/entry143.html
※全部HTML5でできるようになればいいのに・・・あるいはJSライブラリ

８：画像の分割（256*256）縦8横4分割（S or Web）
Webサービス http://picslice.com/
え？JSで？？ http://today-only.net/img-shuffle/
９：StreetViewに適用
http://googlemaps.googlermania.com/google_maps_api_v3/ja/custom_streetview/3.html

え？今の機能ぜんぶAndroid4.2の
カメラアプリに標準装備されている？
ですって！w

Dessert： FirefoxOSを試す

完成図材料

・Firefox OS Simulator
・App manifest

作り方
インストール用のコードを追加して
マニフェストファイルを設置

→アプリ vs Webサイト

参考：http://www.openspc2.org/reibun/Firefox_OS/B2G/index.html

（Firefox OS 使い方辞典）

MapsAPIの制限に関するQ&A

1：GoogleMapsAPI Version2が終わっちゃうってホント？

2：有料化について�突然請求が来ちゃうの？�アクセス不能になるの？
��

3：無料の範囲はどこまで？�これっていいの？ダメなの？



→2013/5/19がXday
（ただしサポート終了から3年のポリシー適用の初事例であり実際にどうなるのかは？）

��




→2013/5/19がXday

��
→制限を90日以上連続して超過した場合
��（25000回APIロード／日�（StyledMapやGeo系APIは2500回）
(StaticMapsは1000回/同一IP制限も）��
むしろこの制限を突破する方が難しい数。心配するより逆にチャレンジすべき目標に！




→2013/5/19がXday

��
→制限を90日以上連続して超過した場合
��（25000回APIロード／日�（StyledMapやGeo系APIは2500回）
(StaticMapsは1000回/同一IP制限も）��
むしろこの制限を突破する方が難しい数。心配するより逆にチャレンジすべき目標に！

→誰でも無償で同じ機能が利用可能か・・・がポイント
→フェアユースという考え方（Don’t be evil)

Closing： 0から1を生み出すには
製品化
×3

×3
汎用化
0→1 ガレージ2人組から製品化へ

※人月の神話 P5図1．1より


Closing： 1から10に育てるには
運営費用／モチベーション

×30

0→1

×30
機能拡張
ファン維持/獲得１→10 １製品から多くのファン獲得へ


Closing： 10から100へのキャズム越え
社会化
×300

0→1

1→10

キャズムライン

×300
スケール
収益安定性 10→100 多くのファンから当たり前のサービスへ


THX a lot !!
Let’s enjoy coding !(´‫)!`ڡ‬


Gdg geo２

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (19)

Similar a Gdg geo２

Similar a Gdg geo２ (20)

Último

Último (9)

Gdg geo２