Rails5.2.1でWebアプリケーションの学習を行なっています。現在、google maps apiを使って、マップを表示させるだけの簡単なプログラムを作っています。そこで、マップを描画させる命令をJavaScript(以下、JS)で記述したのですが、ページを表示させた時に、別ファイル(google_map.js)に記述したJSが読み込まれないため困っています。
また、環境についてはAWSのCloud9を使用しています。
ソースコード
index.html.erb
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Google Map</title> <style> #google_map { width: 700px; height: 350px; } </style> </head> <body> <div id="google_map"></div> <script src="https://maps.googleapis.com/maps/api/js?language=ja®ion=JP&key=****"></script> </body> </html>
google_map.js
(function() { 'use strict'; console.log("hoge.js")//jsが読み込まれているか確認するため var target = document.getElementById('google_map'); var map; var tokyo = {lat: 35.681167, lng: 139.767052}; window.addEventListener('load', function() { map = new google.maps.Map(target, { center: tokyo, zoom: 15 }); }); })();
試したこと
①index.html.erbに<script>タグを埋め込んで、google_map.jsの中身を直書きした場合には、マップが問題なく表示されました。
②application.jsには以下の記述をしています。
//= require rails-ujs //= require activestorage //= require jquery //= require jquery_ujs //= require turbolinks //= require_tree . console.log("application.js")
ページを読み込んだ際にconsole.logの中身は表示されました。
③gemfileには以下の記述を追加して、bundle installとrailsサーバーの再起動をしています。
gem 'jquery-rails'
④google_map/jsの保存場所は、/google_map/app/assets/javascripts/です。
application.jsに "//= require_tree ."を記述したので、assets以下のファイルに保存したJSファイルが自動的に読み込まれると思ったのですが、Railsの「アセットパイプライン」の仕組みが理解しきれず悩んでいます。JSを読み込ませる方法は多々あるかと思いますが、Railsの仕組みを理解するため、任意のJSを読み込む方法を勉強しています。初学者の質問で読みづらい点が多々あるかと思いますが、解決策等ご教授頂けると幸いです。よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー