Geo x html5 on MapsAPI three minutes cooking

1. Geo×HTML5 on MapsAPI
�3分クッキング
DevFestx札幌�2012/2/12
石丸健太郎（@kehi)

2. Menu
●
1. 現在地を取得して地図を表示
2. 地名で検索した場所を地図で表示
3. 地図と連動したストリートビューを表示
4. 地図に道案内を表示
5. 矩形領域を指定したマーカー表示
●モバイルに最適な地図表示
6. StaticなStreetView
7. Scale指定による高解像度表示
8. 道案内をStaticMapに変換
9. Styledmapで地図をカスタマイズ
10. スマートフォン対応のUI
11. ピンポイントURLを作る
●リッチな機能を地図に付加
12. SessionStorageにマーカーの情報を保持
13. LocalStorageにメモを保存
14. Canvasを使って画像ファイルをLocalStorageに記録
15. iBooksにGoogleMapsを表示

3. It’s real iceBreak?!

4. Recipe1:�現在地を取得して地図を表示
MapsAPI V3 JavaScriptAPI)
GeolocationAPI HTML5)
→.getCurrentPosition()
→.watchPosition()
→.clearWatch ()
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

5. Recipe2:�地名で検索して地図を表示
MapsAPI V3 JavaScriptAPI)
GeocodingAPI Geo)
Sample1:
API Reference http://code.google.com/intl/ja/apis/maps/
documentation/geocoding/

6. Recipe3:�地図と連動したストリートビューを表示
MapsAPI V3 JavaScriptAPI)
→.StreetViewPanorama()
Sample1:
Sample2:StreetView
Sample3:API
API Reference
http://code.google.com/intl/ja/apis/maps/documentation/javascript/
services.html#StreetView

7. Recipe4:�地図に道案内を表示
MapsAPI V3 JavaScriptAPI)
DerectionsAPI Geo
DistanceMatrixAPI Geo
Sample1:
Sample2:
Sample3:
API Reference http://code.google.com/intl/ja/apis/maps/
documentation/directions/

8. Recipe5：�矩形領域を指定したマーカー表示
MapsAPI V3 JavaScriptAPI)
JQuery
Sample1: Ajax
Sample2:
vs
Other(FusionTables)
https://googlemaps.geo.jp/devfestx/5/sample3.html

9. 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);
NE(lat,lng)
SW(lat,lng)

10. 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)
SW(lat,lng)

11. Recipe6:�スタティックなStreetView
MapsAPI V3 JavaScriptAPI)
StreetView ImageAPI ImageAPIs
Sample1:Streetview
API Reference
http://code.google.com/intl/ja/apis/maps/documentation/streetview/

12. Recipe7: �Scale指定による高解像度表示
StaticMapsAPI V2 ImageAPIs
Sample1: scale
API Reference
http://code.google.com/intl/en/apis/maps/documentation/staticmaps/
index.html#scale_values

13. Recipe8:�道案内をStaticMapに変換
MapsAPI V3 JavaScriptAPI)
DerectionsAPI Geo
StreetView ImageAPI ImageAPIs
StaticMapsAPI V2 ImageAPIs
Sample1:
Sample2:
API Reference http://code.google.com/intl/ja/apis/maps/
documentation/directions/

14. Recipe9:�Styledmapで地図をカスタマイズ
StyledMapType
Sample1:StyledMapWizard StaticMap
Sample2: ?!
API Reference http://code.google.com/intl/ja/apis/maps/documentation/javascript/
maptypes.html#StyledMaps
StyledMapWizard
http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

15. Recipe10:�スマートフォン対応のUI
HTML5 Form range)
JqueryMobile
Sample1:
Sample2 GeolocationAPI Options
Example
http://codezine.jp/article/detail/5652?p=2

16. Recipe10:�スマートフォン対応のUI
20px
60px
356px
480px
460px
356px
416px
44px
320px

17. Recipe10:�スマートフォン対応のUI
20px
60px
210px
320px
356px
210px
300px
270px
30px
480px

18. Recipe10:�スマートフォン対応のUI
CSS 100%
JavaScript (Scrollto)
black
black-translucent

19. Recipe11：�ピンポイントURLを作る
MapsAPI V3 JavaScriptAPI)
Sample1: Twitter Google+
Example
https://twitter.com/#!/inksatogaeri/status/167133822889115648

20. Recipe12：�SessionStorageにマーカーの情報を保持
MapsAPI V3 JavaScriptAPI)
PlacesAPI Geo
WebStorage HTML5
ChartAPI
Sample1:PlacesAPI
Sample2 SessionStorage
API Reference
http://code.google.com/intl/en/apis/maps/documentation/places/

21. Recipe13：�LocalStorageにメモを保存
MapsAPI V3 JavaScriptAPI)
PlacesAPI Geo
WebStorage HTML5
ChartAPI
Sample1: LocalStorage
API Reference
http://code.google.com/intl/en/apis/maps/documentation/places/
http://www.html5.jp/trans/w3c_webstorage.html

22. Recipe14： Canvasを使って画像をLocalStorageに記録
MapsAPI V3 JavaScriptAPI)
PlacesAPI Geo
WebStorage HTML5
Canvas(HTML5)
Sample1: Canvas LocalStorage
API Reference
http://www.html5.jp/canvas/ref.html

23. Recipe15： iBooksにGoogleMapsを表示
MapsAPI V3 JavaScriptAPI)
WebStorage (HTML5)
iBookAutor
dashcode
iPad
Sample1: iBooksAuthor dashboardWidget GoogleMaps
Example
http://ascii.jp/elem/000/000/665/665232/index-4.html

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