SlideShare a Scribd company logo

Geo x html5 on MapsAPI three minutes cooking

Download as KEY, PDF
K
Kentaro Ishimaru

Geo x html5 on MapsAPI three minutes cooking

TechnologyNews & Politics
1 of 24
Download to read offline
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Geo×HTML5 on MapsAPI �3分クッキング DevFestx札幌�2012/2/12 石丸健太郎（@kehi)
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を表示
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:StreetView Sample3:API API Reference http://code.google.com/intl/ja/apis/maps/documentation/javascript/ services.html#StreetView
Recipe4:�地図に道案内を表示 MapsAPI V3 JavaScriptAPI) DerectionsAPI Geo DistanceMatrixAPI Geo Sample1: Sample2: Sample3: API Reference http://code.google.com/intl/ja/apis/maps/ documentation/directions/
Recipe5：�矩形領域を指定したマーカー表示 MapsAPI V3 JavaScriptAPI) JQuery Sample1: Ajax Sample2: vs Other(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 ImageAPIs Sample1:Streetview API Reference http://code.google.com/intl/ja/apis/maps/documentation/streetview/
Recipe7: �Scale指定による高解像度表示 StaticMapsAPI V2 ImageAPIs Sample1: 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 ImageAPIs Sample1: 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#StyledMaps StyledMapWizard http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
Recipe10:�スマートフォン対応のUI HTML5 Form range) JqueryMobile Sample1: Sample2 GeolocationAPI Options Example http://codezine.jp/article/detail/5652?p=2
Recipe10:�スマートフォン対応のUI 20px 60px 356px 480px 460px 356px 416px 44px 320px
Recipe10:�スマートフォン対応のUI 20px 60px 210px 320px 356px 210px 300px 270px 30px 480px
Recipe10:�スマートフォン対応のUI CSS 100% JavaScript (Scrollto) black black-translucent
Recipe11：�ピンポイントURLを作る MapsAPI V3 JavaScriptAPI) Sample1: Twitter Google+ Example https://twitter.com/#!/inksatogaeri/status/167133822889115648
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/
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
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 iPad Sample1: iBooksAuthor dashboardWidget GoogleMaps Example http://ascii.jp/elem/000/000/665/665232/index-4.html
THX a lot !! Let’s enjoy coding !(´‫)!`ڡ‬

More Related Content

PDF
Gdg geo２
Kentaro Ishimaru
 
PDF
Geolocation system
Jun Chiba
 
PPTX
How to be proud when you are done
Aleksey Solntsev
 
PPTX
Post Agile
Aleksey Solntsev
 
PPTX
XP Injection
Aleksey Solntsev
 
PPTX
Cv-ul din social media
Alexandru Negrea
 
PDF
REUNION GRINUGR. Como comunicar y diseminar información científica en internet
Torres Salinas
 
PDF
JavaScriptでできる電力使用状況グラフ
Yuko Toriyama
 
Gdg geo２
Kentaro Ishimaru
 
Geolocation system
Jun Chiba
 
How to be proud when you are done
Aleksey Solntsev
 
Post Agile
Aleksey Solntsev
 
XP Injection
Aleksey Solntsev
 
Cv-ul din social media
Alexandru Negrea
 
REUNION GRINUGR. Como comunicar y diseminar información científica en internet
Torres Salinas
 
JavaScriptでできる電力使用状況グラフ
Yuko Toriyama
 

Similar to Geo x html5 on MapsAPI three minutes cooking (20)

PDF
Yolp30分クッキング 2012北海道
Yahoo!デベロッパーネットワーク
 
PDF
GPS×Twitter4Rでたのしい位置情報ライフ
Masahiro Kawato
 
PDF
YOLP 30分クッキング
Yahoo!デベロッパーネットワーク
 
PDF
Html5 canvasとgoogle maps apiで遊んでみた
真吾 森
 
PDF
YOLP とスマートフォン向け 地図SDKのご紹介
Yahoo!デベロッパーネットワーク
 
PDF
Geolocation4 system
Jun Chiba
 
PDF
Laravel で API バージョニングを実装するなら
Shohei Okada
 
PDF
Geolocation2
Jun Chiba
 
KEY
Googlemaps tutorial
Hiroki Kouchi
 
PDF
YOLP とスマートフォン向け 地図SDKのご紹介
Yahoo!デベロッパーネットワーク
 
PDF
Geolocation
Jun Chiba
 
PPTX
CordovaでAngularJSアプリ開発
アシアル株式会社
 
PPTX
Express Web Application Framework
LearningTech
 
PPTX
Dart flightschool cloudendpoint with dart
啓介 大橋
 
PPTX
Angular js はまりどころ
Ayumi Goto
 
PDF
sgvizler
Fumihiro Kato
 
PDF
Microsoft Graph API Library for Go
yaegashi
 
PDF
ハンズオン勉強会 はじめてのJavaScriptとSPARQL
Taisuke Fukuno
 
PDF
Mashup Caravan in オープンソースカンファレンス2011 Hiroshima: infoScoop OpenSource
cmutoh
 
PDF
Jawsug chiba API Gateway
Takuro Sasaki
 
Yolp30分クッキング 2012北海道
Yahoo!デベロッパーネットワーク
 
GPS×Twitter4Rでたのしい位置情報ライフ
Masahiro Kawato
 
YOLP 30分クッキング
Yahoo!デベロッパーネットワーク
 
Html5 canvasとgoogle maps apiで遊んでみた
真吾 森
 
YOLP とスマートフォン向け 地図SDKのご紹介
Yahoo!デベロッパーネットワーク
 
Geolocation4 system
Jun Chiba
 
Laravel で API バージョニングを実装するなら
Shohei Okada
 
Geolocation2
Jun Chiba
 
Googlemaps tutorial
Hiroki Kouchi
 
YOLP とスマートフォン向け 地図SDKのご紹介
Yahoo!デベロッパーネットワーク
 
Geolocation
Jun Chiba
 
CordovaでAngularJSアプリ開発
アシアル株式会社
 
Express Web Application Framework
LearningTech
 
Dart flightschool cloudendpoint with dart
啓介 大橋
 
Angular js はまりどころ
Ayumi Goto
 
sgvizler
Fumihiro Kato
 
Microsoft Graph API Library for Go
yaegashi
 
ハンズオン勉強会 はじめてのJavaScriptとSPARQL
Taisuke Fukuno
 
Mashup Caravan in オープンソースカンファレンス2011 Hiroshima: infoScoop OpenSource
cmutoh
 
Jawsug chiba API Gateway
Takuro Sasaki
 
Ad

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. 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
  • 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 !(´‫)!`ڡ‬

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