Googlemaps tutorial

850 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
850
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Googlemaps tutorial

    1. 1. Google Maps API 使ってみた Hiroki Kouchi 2012/08/18
    2. 2. 自己紹介name Hiroki Kouchi age 26(社会人4年生)Twitter _hkouchi work iOS Application Developerhobby Application Development (iOS, Android, Web)
    3. 3. 本スライドの背景某友人の一言。「Google Maps API 使ってみたいんだけど。」
    4. 4. 本スライドの背景普段なら手伝うわけがない!wいくつか興味があったんです。
    5. 5. 興味を持ってた事JavaScript全然書いた事ないGoogleの技術にあんまり触れた事がない・・・(それこそAndroidくらい)Sublime Text 2使ってみたい
    6. 6. お盆休みもあるし、ちょっとやってみっか!
    7. 7. 目標
    8. 8. なんか地図っぽいのが表示されればいいや! (おい
    9. 9. やってみた事MAMPの環境構築Google Maps JavaScript API のサンプルを実行
    10. 10. では順番に。
    11. 11. MAMPWebサーバー一式のパッケージ(Mac用)WindowsでいうXAMPPLocalで動かすだけならこれで十分
    12. 12. インストールして実行してみるhttp://www.mamp.info/en/index.html
    13. 13. 「サーバを起動」
    14. 14. 起動されたっぽい!
    15. 15. こんなページが開かれるhttp://localhost:8888/MAMP/?language=Japanese
    16. 16. ひとまずMAMPは完了。
    17. 17. Google Maps API地図のアレだよ、アレ!日本語ドキュメントも充実https://developers.google.com/maps/documentation/javascript/services
    18. 18. このチュートリアル をやってみます
    19. 19. チュートリアルのコードは こんな感じ
    20. 20. とりあえず動かしてみる DocumentRoot /Application/MAMP/htdocs 作成したHTMLを設置。/Application/MAMP/htdocs/practice/geocoding.html
    21. 21. 以下にアクセスしてみるhttp://localhost:8888/practice/geocoding.html
    22. 22. 意外と簡単・・・?Mapの初期化は、以下を引数とする 表示させたいタグ オプション(ハッシュ形式) ズームのレベル 中央に表示させたい場所 Mapのタイプ
    23. 23. マーカー置いてみる 追加分
    24. 24. 動かしてみるhttp://localhost:8888/practice/geocoding2.html
    25. 25. やっぱ簡単・・・?Markerの初期化は、以下を引数とする 経度緯度 Mapオブジェクト title
    26. 26. ジオコーディング住所から経度緯度の情報へ変換してくれる処理のこと静的処理/動的処理がある今回は静的処理だけやってみた
    27. 27. ジオコーディングドキュメントhttps://developers.google.com/maps/documentation/geocoding/indexリクエストhttp://maps.googleapis.com/maps/api/geocode/json?address=天王洲アイル駅&sensor=false
    28. 28. これだけでJSONが返ってきた!
    29. 29. 注意事項1日のリクエスト数には制限有り無料ユーザ : 2,500件有料ユーザ : 100,000件制限を超えた場合、一時的に利用停止となるらしい
    30. 30. とりあえずここまでしかやってません!
    31. 31. 所感APIはシンプルで使いやすいジオコーディングやマーカー等も使えると世界が広がりそうGoogleの地図情報を自分達で利用できるのはとても面白い!
    32. 32. Google Mapsは多用されてるサービス興味を持った人は、一度触ってみては如何でしょう!
    33. 33. お疲れ様でした。
    34. 34. おまけ
    35. 35. あれを忘れてませんかSublime Text 2 を使ってみた軽く使ってみての所感行った設定とか軽く紹介
    36. 36. Sublime Text 2 って?最近正式リリースされて、人気急上昇なエディタVimやemacsみたいに、自分でもりもりカスタマイズして使うエディタのようだ!
    37. 37. 導入にあたってメリットって何?デメリットってあるの?そもそも何が便利なの?わからないことだらけ・・・
    38. 38. とにかく使ってみようじゃないか!
    39. 39. 設定とか紹介・Command + , で設定が開ける・設定はJSON形式で記述{ "font_size": 12.0, "highlight_line": true, "highlight_modified_tabs": true, "tab_size": 4, "translate_tabs_to_spaces": true, "trim_trailing_white_space_on_save": true}
    40. 40. PluginなどまずPackage Controlを導入http://wbond.net/sublime_packages/package_control/installation
    41. 41. 導入後Sublime Text 2> Preferences> Package Control
    42. 42. 導入後Package Control: Install Package
    43. 43. 導入後インストールしたいパッケージ名を入力 それだけ!
    44. 44. インストールしたPackageAll Autocomplete開いている全てのファイルから補完BracketHighlighter選択中のタグや括弧の強調表示
    45. 45. 使ってみた所感やっぱデザインが好き(見やすい)一度入力した単語を補完してくれるのが地味にありがたい選択中のタグ、ラインの強調軽い!(これ凄い大事)
    46. 46. 使ってみるべき機能スニペット関連が便利らしい・・・他に便利なパッケージがあれば使ってみたいところコマンドとの連携も試してみたい普段コマンドを使う人は重宝しそう
    47. 47. 便利なツールはどんどん使って、生産性をもっと高めていきましょう!
    48. 48. 本当に、お疲れ様でした。

    ×