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を表示
- 4. 搁别肠颈辫别1:?现在地を取得して地図を表示 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. 搁别肠颈辫别2:?地名で検索して地図を表示 MapsAPI V3 JavaScriptAPI) GeocodingAPI Geo) Sample1: API Reference http://code.google.com/intl/ja/apis/maps/ documentation/geocoding/
- 6. 搁别肠颈辫别3:?地図と连动したストリートビューを表示 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. 搁别肠颈辫别4:?地図に道案内を表示 MapsAPI V3 JavaScriptAPI) DerectionsAPI Geo DistanceMatrixAPI Geo Sample1: Sample2: Sample3: API Reference http://code.google.com/intl/ja/apis/maps/ documentation/directions/
- 8. 搁别肠颈辫别5：?矩形领域を指定したマーカー表示 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. 搁别肠颈辫别6:?スタティックな厂迟谤别别迟痴颈别飞 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. 搁别肠颈辫别8:?道案内を厂迟补迟颈肠惭补辫に変换 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. 搁别肠颈辫别9:?厂迟测濒别诲尘补辫で地図をカスタマイズ 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. 搁别肠颈辫别10:?スマートフォン対応の鲍滨 HTML5 Form range) JqueryMobile Sample1: Sample2 GeolocationAPI Options Example http://codezine.jp/article/detail/5652?p=2
- 16. 搁别肠颈辫别10:?スマートフォン対応の鲍滨 20px 60px 356px 480px 460px 356px 416px 44px 320px
- 17. 搁别肠颈辫别10:?スマートフォン対応の鲍滨 20px 60px 210px 320px 356px 210px 300px 270px 30px 480px
- 18. 搁别肠颈辫别10:?スマートフォン対応の鲍滨 CSS 100% JavaScript (Scrollto) black black-translucent
- 19. 搁别肠颈辫别11：?ピンポイント鲍搁尝を作る MapsAPI V3 JavaScriptAPI) Sample1: Twitter Google+ Example https://twitter.com/#!/inksatogaeri/status/167133822889115648
- 20. 搁别肠颈辫别12：?厂别蝉蝉颈辞苍厂迟辞谤补驳别にマーカーの情报を保持 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. 搁别肠颈辫别13：?尝辞肠补濒厂迟辞谤补驳别にメモを保存 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 !(??)!`??
Editor's Notes
- #2: http://www.youtube.com/watch?v=r8-B0gPuPl0\n
- #3: 間に合わない場合はViewPortを使う\n
- #4: \n
- #5: ケータイで位置情報を取得するアプリを作った経験のある人いますか？\n・キャリア毎の位置取得手段の違い\n・キャリア毎、端末毎の取得速度の違い\n・キャリア毎の緯度経度のフォーマットの違い（緯度経度の変数の分離、dms→degree変換、測地系変換）\n→こんな面倒なことを一切考えずに標準メソッド一つで取得できる！！ \n
- #6: \n
- #7: \n
- #8: \n
- #9: 参考\nマーカー表示方法あれこれ 都度取得（矩形領域）、一括取得、Fusiontables(sample3)\n
- #10: \n
- #11: \n
- #12: \n
- #13: \n
- #14: 参考\nhttp://tech.kayac.com/archive/Google-Maps-API-Styled-Map-Wizard-StyledMapType.html\n
- #15: 参考\n羽田野さんの記事\nhttp://codezine.jp/article/detail/5652?p=2\n
- #16: \n
- #17: \n
- #18: \n
- #19: 参考\nhttps://twitter.com/#!/inksatogaeri/status/167133822889115648\n
- #20: 参考\nhttp://code.google.com/intl/en/apis/maps/documentation/places/\n
- #21: 参考\n白石さんのページ\nhttp://www.html5.jp/trans/w3c_webstorage.html\n
- #22: 参考\n白石さんのページ\nhttp://www.html5.jp/trans/w3c_webstorage.html\n
- #23: 参考\nフルハタさんのページ\nhttp://ascii.jp/elem/000/000/665/665232/index-4.html\nhttp://www.openspc2.org/HTML5/iBooks/081/\nDownload page\n
- #24: \n