RailsアプリにGoogleMapを導入しようとしています。
しかし、Errorは出ないのに全く表示されなくて困っております。
以下はControllerです。ちなみにこのGemを使っています。
https://github.com/apneadiving/Google-Maps-for-Rails
ruby
1class RestaurantController < ApplicationController 2 def index 3 @restaurants = Restaurant.all 4 end 5 6 def show 7 @restaurant = Restaurant.find_by(id: params[:id]) 8 @hash = Gmaps4rails.build_markers(@restaurant) do |r, marker| 9 marker.lat r.lat 10 marker.lng r.lng 11 marker.infowindow r.restaurant_translations.first.description 12 marker.json({title: r.restaurant_translations.first.restaurantname}) 13 end 14 render layout: 'restaurant_show' 15 end 16end
こちらはViewです。slim使っています。
ruby
1script src="//maps.google.com/maps/api/js?v=3.23&key=[someapikey]" 2script src="//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js" 3script src='//cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/infobox/src/infobox_packed.js' 4 5 6javascript: 7 handler = Gmaps.build('Google'); 8 handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){ 9 markers = handler.addMarkers( #{raw @hash.to_json}); 10 handler.bounds.extendWith(markers); 11 handler.fitMapToBounds(); 12 });
結果はこちらです。Map欄に地図が表示されるようにしたいです。
こちらが該当箇所のHTMLです。JSの問題なのでしょうか?
どなたかご教示頂けると幸いです。よろしくお願いします。
追記:コメントにてHTMLの詳細が欲しいとありましたので、こちらに転記しました。
ご確認よろしくお願いします。
html
1 <script src="/assets/jquery_ujs.self-e87806d0cf4489aeb1bb7288016024e8de67fd18db693fe026fe3907581e53cd.js?body=1"></script> 2 <script src="/assets/twitter/bootstrap/transition.self-09ff30b1e8a93d1f7728b9855f55d9c9d8d5734c8861e0d8139994e50944572a.js?body=1"></script> 3 <script src="/assets/twitter/bootstrap/alert.self-a29e91e8cd3ddaba9bbc466901d53ec2127e9256b9b941905d525a3a716bd1a5.js?body=1"></script> 4 <script src="/assets/twitter/bootstrap/modal.self-72f95ffa1071297725a9ac91989693d56d1abf23f441a47455073b0da2857a5b.js?body=1"></script> 5 <script src="/assets/twitter/bootstrap/dropdown.self-9314126777c6be5443e37ea7f7967d7914d72b3e60449ba50edc967446373059.js?body=1"></script> 6 <script src="/assets/twitter/bootstrap/scrollspy.self-a155b9d4b2f978905f0326c0f6635e1134fe91c6bfbfcbad079fa24a9fef2b0e.js?body=1"></script> 7 <script src="/assets/twitter/bootstrap/tab.self-122235057fbd4c6c7da377d59dc58f47b44cb1088a2e38e6ee6ce9d8ac29a26a.js?body=1"></script> 8 <script src="/assets/twitter/bootstrap/tooltip.self-11cf547be953f25f511cec668f6690473fd97b2f65502e4032f4030999a3f0c3.js?body=1"></script> 9 <script src="/assets/twitter/bootstrap/popover.self-77d8e3a2499c1104ef146396a68b82469ee2bdb365199b874694698d10405e9a.js?body=1"></script> 10 <script src="/assets/twitter/bootstrap/button.self-a6cb16785434acb365ae426aef9f1fce05ed553cae7a965e4471c3da71509175.js?body=1"></script> 11 <script src="/assets/twitter/bootstrap/collapse.self-7dc8bfbc2fbfabd2bad62c58ff8ffeaf8f20fb87c7ca6cd35f06d4dc19632587.js?body=1"></script> 12 <script src="/assets/twitter/bootstrap/carousel.self-57eb8422043cf0a85b7a9dc6843916eb0a3e35b419c7798a5eb254b918997631.js?body=1"></script> 13(中略) 14 <script src="/assets/gmaps/objects/null_clusterer.self-c6d6f37e996f50b27bf70e66b8956ee03cd4f3e35ae2e69c7b03e9dff7ea48e3.js?body=1"></script> 15 <script src="/assets/gmaps/google/objects/common.self-4b07ecd5e825fd2ba2793cb0323b0f19636ae2343ad8e8e9fe419152107b8ab4.js?body=1"></script> 16 <script src="/assets/gmaps/google/builders/bound.self-f340597454ebfa045f68c5f93f61cff52646146ec38c903a2769e5b0501cd687.js?body=1"></script> 17 <script src="/assets/gmaps/google/builders/circle.self-188e8cef42efa47cf5a4a3956af3dc67a3d6651bc2a9ca220cfcb6fc3e463e35.js?body=1"></script> 18 <script src="/assets/gmaps/google/builders/clusterer.self-a1f1a7df46fc8cecc592eef0f15b9e02f3431c8fa70ed30ce4de854e7facb5c4.js?body=1"></script> 19 <script src="/assets/gmaps/google/builders/kml.self-ffee6612ec52f7bcd758c1b5370a0e803412189ce09773551831e6c06a3375b1.js?body=1"></script> 20 <script src="/assets/gmaps/google/builders/map.self-6de83910df5426e7f72211a33d291d790c3198744bdced71b84572bfca56201c.js?body=1"></script> 21 <script src="/assets/gmaps/google/builders/marker.self-742a43efffcab09bde1334c67758f411c41e4fa1df3dd5a39e498e7f7e78e27c.js?body=1"></script> 22 <script src="/assets/gmaps/google/builders/polygon.self-08644c000d23e711283ea74461680417f8e6c30fe6c32c3dcb7cc9395e9e3f17.js?body=1"></script> 23 <script src="/assets/gmaps/google/builders/polyline.self-22e88b34eec70842a3547dd072bbf85a45c001b0a479fc11ec22bd242b6703f4.js?body=1"></script> 24 <script src="/assets/gmaps/google/objects/bound.self-d13a639bd7207854bf9ef3f6df82bea172352162b142f56e7032ff7ac9193b1e.js?body=1"></script> 25 <script src="/assets/gmaps/google/objects/circle.self-33825f7d2fed1c7ba3c7afae7bd2e4f616b77373660fb65d895affcc5c952610.js?body=1"></script> 26 <script src="/assets/gmaps/google/objects/clusterer.self-4f2479016fe0e484ef10477924f1bd0df5103bd5d9fca97dacb1a805369eae1d.js?body=1"></script> 27 <script src="/assets/gmaps/google/objects/kml.self-5ec58fa580d178250382b8139e22df32db261af083e6ec63528aec06ac26f9c3.js?body=1"></script> 28 <script src="/assets/gmaps/google/objects/map.self-fbfa0453de0420c083e9daee1f103702e6fb765d977bd361ebca9265c754f1fc.js?body=1"></script> 29 <script src="/assets/gmaps/google/objects/marker.self-1cffb1966c70a5ca4fb34e8ac501dca0e7c42af09f3f99752caa5fc6f09b1d02.js?body=1"></script> 30 <script src="/assets/gmaps/google/objects/polygon.self-ceb351c472231550371b47497b02ad128fbf6e44c30482fb5c153ef880fad696.js?body=1"></script> 31 <script src="/assets/gmaps/google/objects/polyline.self-d6d7caf58094ef9b48b3e93abdcc0f43c6b3fb204c882f4613577480cbe5d857.js?body=1"></script> 32 <script src="/assets/gmaps/google/primitives.self-5b8a3a670839d76c06f9877827daa0d739b27f8d6ebd346d7fc6006819755e65.js?body=1"></script> 33 <script src="/assets/gmaps/google.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script> 34 <script src="/assets/bootstrap.self-fdc98dee79ee88255e10cac6caa91338165cb76cf0d263744d8d90011fc2ef8f.js?body=1"></script> 35 <script src="/assets/frontpage.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script> 36 <script src="/assets/hello.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script> 37 <script src="/assets/menu.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script> 38 <script src="/assets/restaurant.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1"></script> 39 <script src="/assets/application.self-44dc72337fbefc4f8c73fc8781b922cf9e4f99f8d068e6563c3820851d9390f6.js?body=1"></script> <script src="//maps.google.com/maps/api/js?v=3.23&key=AIzaSyCgBL4ep6_BcDS3ffBf9Tz5ZTHaaZ4Y3bg"></script> 40 <script src="//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"></script> 41 <script src="//cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/infobox/src/infobox_packed.js"></script> 42 <script> 43 handler = Gmaps.build('Google'); 44 handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){ 45 markers = handler.addMarkers( [{"lat":"35.51313726","lng":"139.47423554","infowindow":"大豆肉のから揚げと玄米のプレート","title":"6889cafe"}]); 46 handler.bounds.extendWith(markers); 47 handler.fitMapToBounds(); 48 }); 49 </script> 50 </head> 51 <body> 52 <h1> 53 ベジタリアンレストラン詳細 54 </h1> 55 <table> 56 <tbody> 57 <tr> 58 <th> 59 ベジタリアン種別 60 </th> 61 <td> 62 Vegan 63 </td> 64 <tr> 65 <th> 66 Map 67 </th> 68 <td> 69 <div class="map"></div> 70 </td> 71 </tr>
View内のJS修正しました。
javascript
1javascript: 2jQuery(function(){ 3 handler = Gmaps.build('Google'); 4 handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){ 5 markers = handler.addMarkers( #{raw @hash.to_json}); 6 handler.bounds.extendWith(markers); 7 handler.fitMapToBounds(); 8 }); 9}); 10
回答1件
あなたの回答
tips
プレビュー