2016-06-01 4 views
1

私は自分のアプリケーションに直接javascriptファイルを挿入することで、GMaps for Railsの設定を修正する必要があることを発見しました。 Rails 4 - Gmaps4Rails - map won't renderRails 4 - ベンダーファイルのjavascriptソースを参照する方法

私はinfoboxとmarkerclusterer reposの両方をクローンしました。私のアプリで関連するファイルを参照しようとしています。

ベンダーファイルにクローンに付属するファイルのフォルダがあります。私は、私が使用する必要があるJavaScriptファイルを理解

は以下のとおりです。infobox.jsとmarkerclusterer.js

これらのファイルは次の場所にあります。

vendor/js-marker-clusterer/src/makerclusterer.js 
vendor/v3-utility-library/src/infobox.js 

私はコードの代わりにそれらを使用したいですこのビューでは:

<script src="//maps.google.com/maps/api/js?v=3.18&sensor=false&client=&key=&libraries=geometry&language=&hl=&region="></script> 
<script src="//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js"></script> 
<script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox_packed.js' type='text/javascript'></script> <!-- only if you need custom infoboxes --> 

app/application.jsのjavascriptファイルを参照する必要がありますか?もしそうなら、パスのどの時点で起動する必要がありますか?(これらのファイルはvendor/assets/javascriptsフォルダの中にはないので)

また、私はマークメルセラーイメージを何とか組み込む必要があることを理解しています。それらも複製されたリポジトリにあり、vendor/js-markerclusterer/imagesフォルダに格納されています。ビューで作業するようにこれらを参照するにはどうすればよいですか?

答えて

1

行うための最も論理的なことは、しかし、あなたには、いくつかの理由で、あなたのためにそれを行うことはできませんので、あなたがいる場合

//= js-marker-clusterer/src/makerclusterer 
//= v3-utility-library/src/infobox 

としてあなたがapplication.jsに必要なファイルを参照することができvendor/assets/javascripts下のフォルダjs-marker-clustererv3-utility-libraryを置くことであろうconfig.assets.pathsにカスタムパスを追加することができますので、オートローダーは、彼らに

// application.rb 
config.assets.paths << Rails.root.join("vendor", "js-marker-clusterer") 
config.assets.paths << Rails.root.join("vendor", "v3-utility-library") 

を見つけて、そしてちょうど

としてそれらを参照することができます
//= src/makerclusterer 
//= src/infobox 
0

あなたのケースのGoogleコードサーバーでは、ファイルがサーバーから高速に読み込まれるため、いつもcdnを使用するのがよいでしょう。そうですね、これをしても害はありません。

<script src="//maps.google.com/maps/api/js?v=3.18&sensor=false&client=&key=&libraries=geometry&language=&hl=&region="></script> 
<script src="//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js"></script> 
<script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox_packed.js' type='text/javascript'></script> <!-- only if you need custom infoboxes --> 

マニフェストファイル(すなわち、application.js)を介してそれらをロードしたいとしましょう、あなたはあなたのapp/assets/javascriptsフォルダ内markerclusterer.jsinfobox.jsをコピーして、今からこの

//application.js file's content 
//= markercluster 
//= infobox 

ようapplication.jsにそれらを含めることができますこれらの2つのファイルは、GoogleマップのAPIファイルの後に読み込む必要があります、あなたapiマップの呼び出し後にapplication.jsを追加する必要があります。これにより、Google Maps APIが最初に読み込まれ、google.mapsオブジェクトが利用できるようになります。

<script src="//maps.google.com/maps/api/js?v=3.18&sensor=false&client=&key=&libraries=geometry&language=&hl=&region="></script> 
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> 

そして、あなたはそれから他のイメージにアクセスするのと同じように追加しますapp/assets/images内のフォルダ内のすべての画像を入れて、それらにアクセスすることができます。

関連する問題