• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Geo x html5 on MapsAPI three minutes cooking
 

Geo x html5 on MapsAPI three minutes cooking

on

  • 1,202 views

Geo x html5 on MapsAPI three minutes cooking

Geo x html5 on MapsAPI three minutes cooking

Statistics

Views

Total Views
1,202
Views on SlideShare
960
Embed Views
242

Actions

Likes
0
Downloads
5
Comments
0

2 Embeds 242

http://googlemaps.geo.jp 216
http://localhost 26

Accessibility

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • http://www.youtube.com/watch?v=r8-B0gPuPl0\n
  • 間に合わない場合はViewPortを使う\n
  • \n
  • ケータイで位置情報を取得するアプリを作った経験のある人いますか?\n・キャリア毎の位置取得手段の違い\n・キャリア毎、端末毎の取得速度の違い\n・キャリア毎の緯度経度のフォーマットの違い(緯度経度の変数の分離、dms→degree変換、測地系変換)\n→こんな面倒なことを一切考えずに標準メソッド一つで取得できる!! \n
  • \n
  • \n
  • \n
  • 参考\nマーカー表示方法あれこれ 都度取得(矩形領域)、一括取得、Fusiontables(sample3)\n
  • \n
  • \n
  • \n
  • \n
  • 参考\nhttp://tech.kayac.com/archive/Google-Maps-API-Styled-Map-Wizard-StyledMapType.html\n
  • 参考\n羽田野さんの記事\nhttp://codezine.jp/article/detail/5652?p=2\n
  • \n
  • \n
  • \n
  • 参考\nhttps://twitter.com/#!/inksatogaeri/status/167133822889115648\n
  • 参考\nhttp://code.google.com/intl/en/apis/maps/documentation/places/\n
  • 参考\n白石さんのページ\nhttp://www.html5.jp/trans/w3c_webstorage.html\n
  • 参考\n白石さんのページ\nhttp://www.html5.jp/trans/w3c_webstorage.html\n
  • 参考\nフルハタさんのページ\nhttp://ascii.jp/elem/000/000/665/665232/index-4.html\nhttp://www.openspc2.org/HTML5/iBooks/081/\nDownload page\n
  • \n

Geo x html5 on MapsAPI three minutes cooking Geo x html5 on MapsAPI three minutes cooking Presentation Transcript

  • Geo×HTML5 on MapsAPI�3分クッキング DevFestx札幌�2012/2/12 石丸健太郎(@kehi)
  • 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を表示
  • It’s real iceBreak?!
  • 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
  • Recipe2:�地名で検索して地図を表示 MapsAPI V3 JavaScriptAPI) GeocodingAPI Geo)Sample1: API Reference http://code.google.com/intl/ja/apis/maps/ documentation/geocoding/
  • Recipe3:�地図と連動したストリートビューを表示 MapsAPI V3 JavaScriptAPI) →.StreetViewPanorama()Sample1:Sample2:StreetViewSample3:API API Reference http://code.google.com/intl/ja/apis/maps/documentation/javascript/ services.html#StreetView
  • Recipe4:�地図に道案内を表示 MapsAPI V3 JavaScriptAPI) DerectionsAPI Geo DistanceMatrixAPI GeoSample1:Sample2:Sample3: API Reference http://code.google.com/intl/ja/apis/maps/ documentation/directions/
  • Recipe5:�矩形領域を指定したマーカー表示 MapsAPI V3 JavaScriptAPI) JQuerySample1: AjaxSample2: vsOther(FusionTables)https://googlemaps.geo.jp/devfestx/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); NE(lat,lng) SW(lat,lng)
  • 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)
  • Recipe6:�スタティックなStreetView MapsAPI V3 JavaScriptAPI) StreetView ImageAPI ImageAPIsSample1:Streetview API Reference http://code.google.com/intl/ja/apis/maps/documentation/streetview/
  • Recipe7: �Scale指定による高解像度表示 StaticMapsAPI V2 ImageAPIsSample1: scale API Reference http://code.google.com/intl/en/apis/maps/documentation/staticmaps/ index.html#scale_values
  • 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/
  • 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
  • Recipe10:�スマートフォン対応のUI HTML5 Form range) JqueryMobileSample1:Sample2 GeolocationAPI OptionsExamplehttp://codezine.jp/article/detail/5652?p=2
  • Recipe10:�スマートフォン対応のUI 20px 60px 356px480px 460px 356px 416px 44px 320px
  • Recipe10:�スマートフォン対応のUI 20px 60px 210px320px 356px 210px 300px 270px 30px 480px
  • Recipe10:�スマートフォン対応のUICSS 100%JavaScript (Scrollto) black black-translucent
  • Recipe11:�ピンポイントURLを作る MapsAPI V3 JavaScriptAPI)Sample1: Twitter Google+Examplehttps://twitter.com/#!/inksatogaeri/status/167133822889115648
  • Recipe12:�SessionStorageにマーカーの情報を保持 MapsAPI V3 JavaScriptAPI) PlacesAPI Geo WebStorage HTML5 ChartAPISample1:PlacesAPISample2 SessionStorage API Reference http://code.google.com/intl/en/apis/maps/documentation/places/
  • 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
  • Recipe14: Canvasを使って画像をLocalStorageに記録 MapsAPI V3 JavaScriptAPI) PlacesAPI Geo WebStorage HTML5 Canvas(HTML5)Sample1: Canvas LocalStorage API Reference http://www.html5.jp/canvas/ref.html
  • 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
  • THX a lot !!Let’s enjoy coding !(´‫)!`ڡ‬