Google Maps APIの勉強会

GoogleAPIを使うことで、地図上に独自の情報を表示することができる！

本日の資料
https://gist.github.com/myamamic/65bf19b5aed1cb992708

アジェンダ(抜粋)

• Google Maps API の紹介 (15分)
• 地図を表示する (20分)
• ルート検索APIを使ってみる (10分)
• プレイス検索APIを使ってみる (15分)
• プレイス検索とルート検索を組み合わせてみる (20分)
• より使いこなすために (10分)

例）未来へのキオク

http://www.miraikioku.com/

言葉

LatLng＝Latitude(緯度)とLongitude(経度)を合わせたもの

GoogleMapsをサポートしているブラウザ

https://developers.google.com/maps/faq?#browsersupport

Google Maps API

https://developers.google.com/maps/documentation/javascript/reference?hl=en

下記が重要&必須

    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?sensor=false">
    </script>

• script タグ内の URL は、JavaScript ファイルの位置
• Google Maps API を使用する上で必要なシンボルと定義がすべて入っている

TravelMode
現在はDrivingとWalkingの2種類だけが日本でサポートされている。
O　google.maps.TravelMode.DRIVING
O　google.maps.TravelMode.WALKING
X　google.maps.TravelMode.BICYCLINGX　google.maps.TravelMode.TRANSIT

学んだこと

• マーカー(ピン)を落とす
• 半径何メートル以内にあるお店や銀行など(type指定)を表示
• 2拠点のルートを示す
• 道順パネルを表示してどっち方向へ何メートルというのまで表示
• それぞれの拠点情報はサーバに問い合わせ、返って来たデータを表示

感想
全体的にJavaScriptからAPIを呼び出してごりごり書く感じ。
ソースをコピペしただけだけど、なかなか面白い。

フィーチャーフォンサイトの作成

HTML4.01で、フィーチャーフォン作成時に参考になったサイト

• http://digilog6.blog18.fc2.com/blog-entry-51.html
• http://www.weblan3.com/mobile/reference-mobilesite-xhtml.php

色一覧

• http://www.cam.hi-ho.ne.jp/mendoxi/misc/colorchart.html

テキストに色を付ける時は、fontタグを利用する。

<font color="#333333">文字</font>

コントローラからロケールファイルの読み込み

viewからは、こんなふうで良いけど、Controllerからは I18n を使います。

<%= t("label_login") %>

Controllerでは、

 I18n.t(:notice_saved, :text=>"xxx")

config/locale/ja.yml

ja:
  label_login: "ログイン"
  :notice_saved: "%{text}を保存しました。"

<参考>
http://rails3try.blogspot.jp/2012/01/rails3-i18n.html

Timeの差分

RailsでTimeオブジェクトを引き算した場合に日数を出したい場合

irb(main):072:0> today = Time.now
=> 2013-10-10 16:22:31 +0900
 

irb(main):073:0> beginning_of_month = Time.now.beginning_of_month
=> 2013-10-01 00:00:00 +0900

irb(main):074:0> (today - beginning_of_month).to_i/1.day
=> 9

Rails3で404エラー画面作成

RailsでRoutingErrorが出ると恥ずかしいので、404エラー画面を作ろうと思い、
どう作るんだろう？

参考
http://rochefort.hatenablog.com/entry/2013/02/25/225629

route.rbの一番最後に下記を追加

match '*path', :to => 'application#error_404'

application_controller.rbにerror_404のアクション定義。

def error_404
  error_msg = "<h2>404 Not Found</h2><p>The page you were looking for doesn't exist.</p>"
  render :text => error_msg, :status => 404
end

ここでは、render  :text=>"" にしていますが、
render :template => '/common/error_404' にして、
app/views/common/error_404.html.erb のファイルを作っても良いですね。

意外と簡単でビックリ。

BEFORE

 

AFTER