9

Google マップを自分のページに読み込むために必要な JavaScript を追加しました。

<% content_for :head do %>

<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(<%=@lat%>, <%=@lon%>),
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);
}
</script>

<% end %>

ご覧のとおり、マップをロードするときに緯度と経度のパラメーターを渡す必要があります。タイトルで言ったように、これらの JavaScript をアセット パイプラインに入れたいのですが、可能であればどのようにすればよいですか? ありがとう

4

2 に答える 2

13

application.jsアセットパイプラインで生成されたファイルにGoogleMapsAPIを含めないでください。代わりに、のタグの前に<script>別のタグとして含める必要があります。application.js<script>

initialize()次に、メソッドを、それ自体を含むアセットパイプラインに含まれる任意のファイルに追加できますapplication.js。

ただし、ページ内で定義できるように、メソッドの引数を作成すること@latをお勧めします。たとえば、@loninitialize<head>

<head>
  <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=false"></script>
  <%= javascript_include_tag "application" %>

  <script>
    var latitude  = <%= @lat %>;
    var longitude = <%= @lon %>;
  </script>
</head>

そしてあなたのapplication.jsファイルにあなたが持っているかもしれない

function initialize(latitude, longitude) {
  var mapOptions = {
      center: new google.maps.LatLng(latitude, longitude),
      zoom: 5,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions);
}

$(function() {
  initialize(latitude, longitude);
});
于 2013-01-13T22:47:11.053 に答える
0

これはあなたの質問への回答ではありませんが、私にとって非常にうまく機能する Google マップの gem があります: https://github.com/apneadiving/Google-Maps-for-Rails

于 2013-01-13T23:12:00.137 に答える