2012-05-10 35 views
2

アドレスに基づいて場所を表示するのにgeocoderを使用しようとしています。Ruby on Rails - ジオコーダービュー

私の質問は、ユーザーがデータベースに挿入したアドレスからLatとLongを取得すると、インタラクティブマップを表示するにはどうすればよいですか?

私のアドレスモデル

belongs_to <another model> 
attr_accessible <all addresses attributes including latitude and longitude> 

geocoded_by :address 

after_validation :geocode, :if => :address_changed? 

フィールドは緯度と私がアドレスを挿入した後経度は自動的に計算されます。

私はRyan's Rail Castチュートリアルに従ってきましたが、最終的に静的な画像を表示する代わりに、マップを表示したい、Googleマップのインタラクティブなスタイルを表示します。どうすればこれを達成できますか?

の場合は、Google-Maps-for-Railsをご覧になりましたが、ショービューで場所に1つの地図を取得する方法が非常によく理解できませんでした。

+0

緯度/経度がある場合は、必ずしもGMFR宝石が必要なわけではありません。 https://developers.google.com/maps/ – stewart715

+0

私は緯度経度があります。ジオコーダーは、住所を入力して送信するとこれを計算します。 したがって、ジオコーダーによって提供されるコードでビュー内のマップAPIを呼び出すことはできませんか? – Silver

+0

私は理解しています。ただし、標準のGoogle Maps JavaScript APIスニペットを使用することができます。特別な宝石は必要ありません。 – stewart715

答えて

2

Google-Maps-for-Railsを詳しく見てください。その宝石は、それは些細なり、あなたのビューでインタラクティブマップを取得する方法の説明は非常に明確である:

(私はUserモデルbelongs_toのあなたのアドレスモデルを想定し、必要に応じて名前を変更します。。)

あなたのビューで

@json = User.find(params[:id]).address.to_gmaps4rails 

:あなただけの地図上のある特定のユーザーをしたい場合は、もちろんあなたは、コントローラ変更される可能性が

<%= gmaps4rails(@json) %> 
+0

私はこれを信じることができません。私は実際にはまったく同じコードを実行していましたが、何も表示されていませんでした。欠落していたものは、application.cssファイルに '* = gmaps4railsが必要です。 ありがとうございました – Silver

+0

@シルバーニース。それらの "ドッ!"の瞬間が大好きです。 – ghoppe

2

を多くの有用な例があります。利用可能なGoogle Maps APIのAmplesはhereです。ちょうどあなたのモデルで対応するジオコードフィールドで@model.latitude@model.longitudeを交換

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
    var lat = <%= @model.latitude %>, 
     lon = <%= @model.longitude %>, 
     map; 
    function initialize() { 
    var myOptions = { 
     center: new google.maps.LatLng(lat, lon) 
    }; 
    map = new google.maps.Map(document.getElementById('map_canvas'), 
     myOptions); 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
<div id="map_canvas"></div> 

:最も単純なケースでは、あなたはこのような何かを行うことができます。

+0

シンプルなアイデアだと思われますが、試してみると、地図が描かれていた灰色のボックスになります。そして、はい、私は@ model.latitute /経度を私のために置き換えました。また、#map_canvasをCSSで高さと幅を設定して宣言しました。これらの質問はすごくおかげで申し訳ありません:/ – Silver