rails + google map を試す

Google APIを試してみた。以下のサイトを参照しました。
http://kenjiro2u.blogspot.com/2009/09/google-maps-on-rails.html
http://d.hatena.ne.jp/zariganitosh/20081012/1223816212
http://ym4r.rubyforge.org/

構成は
* rails 2.3.8
* ym4r-gm　--- google map APIを扱うプラグイン
* Google API

まずは、テストプロジェクトを作成し、Google APIを取り扱うプラグインYM4R/GMをインストール。

  $ rails map_test
  $ cd map_test
  $ sudo gem install ym4r
  $ ruby script/plugin install git://github.com/queso/ym4r-gm.git
  $ script/generate controller Map index 

Google Map APIを使うため、Google Maps API Keyを取得します。
4年程前かな。なぜか、このKeyの取得が上手くいかずに凝っただが、今回は簡単にGet。日本語のドキュメントが整備されているのが大きいな。
http://code.google.com/intl/ja/apis/maps/signup.html

日本語ドキュメントは大変貴重で、いろいろと気になることが判った。
* ドメイン名で取得することが吉。www.miyabiit.com ではなく、miyabiit.comでとる。
* localhost は無条件で使える。開発のため。もちろん、自分自身しかみえないけど。
* ビジネス利用のためpremierサービスがある。パスワード利用のサイト構築、有償サイトは要検討。

取得したKeyは、/config/gmaps_api_key.yml に記載します。このファイルはプラグインインストール時に自動作成されているはずです。

html header部に、以下の２つのヘルパーメソッドを埋め込み、必要なjavascript, htmlコードを生成します。
layoutファイルを利用したので、以下のように作成。

view plainprint?

1. <%= GMap.header %>  
2.   <%= @map.to_html %>  

<%= GMap.header %>
  <%= @map.to_html %>

コントローラ /app/contoller/map_controller.rb にて @mapを生成し、viewに渡します。

view plainprint?

1. def index  
2.     palo_alto = [37.4419, -122.1419] # 位置情報を配列で用意  
3.     # google map api オブジェクトを作成。表示タグ map_div  
4.     @map = GMap.new("map_div")         
5.     # 位置の表示  
6.     @map.center_zoom_init(palo_alto, 10)  
7.     # 拡大縮小ボタン、地図タイプ切り替えボタン  
8.     @map.control_init(:large_map => true, :map_type => true)  
9.     # マーカの指定  
10.     @map.overlay_init(GMarker.new(palo_alto,  
11.       :title => "パロアルト",  
12.       :info_window => "これは情報窓"  
13.       )  
14.     )  
15.   end  

def index
    palo_alto = [37.4419, -122.1419] # 位置情報を配列で用意
    # google map api オブジェクトを作成。表示タグ map_div
    @map = GMap.new("map_div")       
    # 位置の表示
    @map.center_zoom_init(palo_alto, 10)
    # 拡大縮小ボタン、地図タイプ切り替えボタン
    @map.control_init(:large_map => true, :map_type => true)
    # マーカの指定
    @map.overlay_init(GMarker.new(palo_alto,
      :title => "パロアルト",
      :info_window => "これは情報窓"
      )
    )
  end

viewには以下のコードを埋め込みます。

view plainprint?

1. <%= @map.div(:width => 500, :height => 400) %>  

<%= @map.div(:width => 500, :height => 400) %>

これで、railsを実行すれば以下のような画面をみることが出来ます。