Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Geo x html5 on MapsAPI three minutes cooking

1,395 views

Published on

Geo x html5 on MapsAPI three minutes cooking

Published in: Technology, News & Politics
  • Be the first to comment

  • Be the first to like this

Geo x html5 on MapsAPI three minutes cooking

  1. 1. Geo×HTML5 on MapsAPI�3分クッキング DevFestx札幌�2012/2/12 石丸健太郎(@kehi)
  2. 2. Menu ●1. 現在地を取得して地図を表示2. 地名で検索した場所を地図で表示3. 地図と連動したストリートビューを表示4. 地図に道案内を表示5. 矩形領域を指定したマーカー表示 ●モバイルに最適な地図表示6. StaticなStreetView7. Scale指定による高解像度表示8. 道案内をStaticMapに変換9. Styledmapで地図をカスタマイズ10. スマートフォン対応のUI11. ピンポイントURLを作る ●リッチな機能を地図に付加12. SessionStorageにマーカーの情報を保持13. LocalStorageにメモを保存14. Canvasを使って画像ファイルをLocalStorageに記録15. iBooksにGoogleMapsを表示
  3. 3. It’s real iceBreak?!
  4. 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. 5. Recipe2:�地名で検索して地図を表示 MapsAPI V3 JavaScriptAPI) GeocodingAPI Geo)Sample1: API Reference http://code.google.com/intl/ja/apis/maps/ documentation/geocoding/
  6. 6. Recipe3:�地図と連動したストリートビューを表示 MapsAPI V3 JavaScriptAPI) →.StreetViewPanorama()Sample1:Sample2:StreetViewSample3:API API Reference http://code.google.com/intl/ja/apis/maps/documentation/javascript/ services.html#StreetView
  7. 7. Recipe4:�地図に道案内を表示 MapsAPI V3 JavaScriptAPI) DerectionsAPI Geo DistanceMatrixAPI GeoSample1:Sample2:Sample3: API Reference http://code.google.com/intl/ja/apis/maps/ documentation/directions/
  8. 8. Recipe5:�矩形領域を指定したマーカー表示 MapsAPI V3 JavaScriptAPI) JQuerySample1: AjaxSample2: vsOther(FusionTables)https://googlemaps.geo.jp/devfestx/5/sample3.html
  9. 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. 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. 11. Recipe6:�スタティックなStreetView MapsAPI V3 JavaScriptAPI) StreetView ImageAPI ImageAPIsSample1:Streetview API Reference http://code.google.com/intl/ja/apis/maps/documentation/streetview/
  12. 12. Recipe7: �Scale指定による高解像度表示 StaticMapsAPI V2 ImageAPIsSample1: scale API Reference http://code.google.com/intl/en/apis/maps/documentation/staticmaps/ index.html#scale_values
  13. 13. Recipe8:�道案内をStaticMapに変換 MapsAPI V3 JavaScriptAPI) DerectionsAPI Geo StreetView ImageAPI ImageAPIs StaticMapsAPI V2 ImageAPIsSample1:Sample2: API Reference http://code.google.com/intl/ja/apis/maps/ documentation/directions/
  14. 14. Recipe9:�Styledmapで地図をカスタマイズ StyledMapType Sample1:StyledMapWizard StaticMap Sample2: ?!API Reference http://code.google.com/intl/ja/apis/maps/documentation/javascript/maptypes.html#StyledMapsStyledMapWizardhttp://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
  15. 15. Recipe10:�スマートフォン対応のUI HTML5 Form range) JqueryMobileSample1:Sample2 GeolocationAPI OptionsExamplehttp://codezine.jp/article/detail/5652?p=2
  16. 16. Recipe10:�スマートフォン対応のUI 20px 60px 356px480px 460px 356px 416px 44px 320px
  17. 17. Recipe10:�スマートフォン対応のUI 20px 60px 210px320px 356px 210px 300px 270px 30px 480px
  18. 18. Recipe10:�スマートフォン対応のUICSS 100%JavaScript (Scrollto) black black-translucent
  19. 19. Recipe11:�ピンポイントURLを作る MapsAPI V3 JavaScriptAPI)Sample1: Twitter Google+Examplehttps://twitter.com/#!/inksatogaeri/status/167133822889115648
  20. 20. Recipe12:�SessionStorageにマーカーの情報を保持 MapsAPI V3 JavaScriptAPI) PlacesAPI Geo WebStorage HTML5 ChartAPISample1:PlacesAPISample2 SessionStorage API Reference http://code.google.com/intl/en/apis/maps/documentation/places/
  21. 21. Recipe13:�LocalStorageにメモを保存 MapsAPI V3 JavaScriptAPI) PlacesAPI Geo WebStorage HTML5 ChartAPISample1: LocalStorage API Reference http://code.google.com/intl/en/apis/maps/documentation/places/ http://www.html5.jp/trans/w3c_webstorage.html
  22. 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. 23. Recipe15: iBooksにGoogleMapsを表示 MapsAPI V3 JavaScriptAPI) WebStorage (HTML5) iBookAutor dashcode iPadSample1: iBooksAuthor dashboardWidget GoogleMaps Example http://ascii.jp/elem/000/000/665/665232/index-4.html
  24. 24. THX a lot !!Let’s enjoy coding !(´‫)!`ڡ‬

×