【BootCamp2010】Google Maps API 「Maps API v3 on mobile」

BC2010

GDD2010は大変楽しかったです！！
来年こそはsuper hacker枠でぐぬぬ…
と燃えていたりするわけですが、BootCampまとめます。

BootCampをまとめ終わったあとにGDDの簡単なメモもアップしようかと思います。

[googleMapsAPI Familys]

  • Google Maps APIv3 →javascriptで動く
  • Google Maps API for Flash→Flashとgooglemapの連携ができる
  • Static Maps API v2→Javascriptが動かないような端末でも表示できる
  • Map Data API Web Service

　→mymapからデータを撮ってきたり、挿入したり

　ブラウザ上ではなく、デバイス上で直接動く

v3のお話がメイン

［良いところ］
  • htmlとjavascriptだけで表示できる
  • Streetviewなど機能が充実

　→googlemapとstreetviewを1画面に同時に出せるサンプルがあったり(どの携帯でも(html5をつかっているから))

  • 開発コストが安い
［悪いところ］
  • MapViewと比較すると遅い
  • ブラウザに左右されることがある
  • デバイスのスペックに影響される

メモ

  • カスタマイズした情報Window(吹き出し)を表示させることもできる
  • 世界の多くの地域の等高線を取ることができる
  • googleの地図情報の開放によって、色を変えたり、いらないライン勝手に消したり、特定のガソリンスタンドしか表示させないようにできるようになった。

What's make mobile browser tricky?

  • スクリーンサイスが小さい(一番念頭に置く！)
  • HTML5の技術を活かす
  • デバイスや回線速度に左右される
  • ごにょごにょというモバイルデバイスで、コスモ石油のサイトをやろうとしたときに、噴出しを表示させると、崩れて表示されてしまった。

これはwebkit関連のcssを指定したら治った。

  • バージョンによってwebkitが微妙に違う
  • 可能であれば、検証用の端末を用意したほうがいい
    • 実際とは異なってきてしまう

What's view port?

ビューポート：　全体枠(窓)の中で一部分を表示する領域。「覗き窓」とも言われる

オススメ

width: 320px
init-scale: 1.0
margin: 0px
シンプルに、フルスクリーン

  • リンクの次の行にはリンクを置かない。
    • 静電気で感知するため、間違って反応されやすくなってしまう

nexusoneは早い。
iphoneも比較的早い。
エクスペリアも早い
…がPCには通信速度とかもゼッタイ負ける


  • 地図に載せる情報の数を以下に集約させるかということが問題になってくる

→便利なライブラリ
google-maps-api-utility-liblary-v3 でぐぐる
抑えておきたいライブラリ集



google　codeにリファレンスがある

  • 近々日本語版ができるかも？

　

ざっくり日本語で読みたいとかいう人のおすすめ本

  • 「GooogleMaps APIプログラミング入門」

(スピーカー様の本)

  • コードだけではなく、利用規約についても分かりやすくまとめてますよーとのことですｗ


聞き殴りながら書きなぐった(打なぐった)メモなので、おかしなところなど有りましたら、ご指摘いただけるとありがたいです！