質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

Q&A

解決済

1回答

3800閲覧

RailsアプリへのGoogleMap表示が出来ない

hrc

総合スコア55

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

0グッド

0クリップ

投稿2016/06/19 02:43

編集2016/06/19 09:43

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の詳細が欲しいとありましたので、こちらに転記しました。
ご確認よろしくお願いします。

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&amp;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

その結果、何か地図を表示しようとして以下の様なエラーになりました。
イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/06/19 03:43

出力されたHTML(ブラウザで「ページのソースを表示」)を質問文に追記ください。
hrc

2016/06/19 06:33

ありがとうございます。質問文に追記しました。ご確認ください。
guest

回答1

0

ベストアンサー

HTML

1<div class="map"></div> 2```を 3```HTML 4<div id="map"></div>

にして、

CSS

1#map { 2 height: 100px; 3 width: 100px; 4} /* 高さと幅が必須 */

投稿2016/06/19 06:39

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hrc

2016/06/19 06:53

ありがとうございます。やってみましたが。特に変わらないですね。
hrc

2016/06/19 06:56

<td> <div id="map"></div> </td> でCSSは #map { height: 100px; width: 100px; } です。
kei344

2016/06/19 07:08 編集

//= require underscore //= require gmaps/google Gmaps.build('Google');用のスクリプトタグが見当たりませんが、これって書いていますか? 多分「gmaps4rails.min.js」というものが呼ばれるはずです。
hrc

2016/06/19 08:06

HTML内に <script> handler = Gmaps.build('Google'); handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){ markers = handler.addMarkers( [{"lat":"35.51313726","lng":"139.47423554","infowindow":"大豆肉のから揚げと玄米のプレート","title":"6889cafe"}]); handler.bounds.extendWith(markers); handler.fitMapToBounds(); }); とあるやつがそうなんですが・・・ あと、あまりに長いので省いていますが、上記は設定しております。 この部分も追記しておきます。
kei344

2016/06/19 08:30

>とあるやつがそうなんですが・・ それは既に提示されている「javascript:」以降の部分で出力されています。 <script src="http://cdn.jsdelivr.net/gmaps4rails/・・・ みたいなものが出力されていません。 > //= require gmaps/google これについての返答が無い所を見ると、これについては何のことかわからなかったということでしょうか。下記記事などを参照され、必要箇所に記述される必要があるものです。また、underscore.jsも用意する必要があります。 【Rails4でGoogleMapを表示させる - Qiita】 http://qiita.com/jacoyutorius/items/a107ff6c93529b6b393e
hrc

2016/06/19 08:47

> > //= require gmaps/google > これについての返答が無い所を見ると、これについては何のことかわからなかったということでしょうか。下記記事などを参照され、必要箇所に記述される必要があるものです。また、underscore.jsも用意する必要があります。 失礼しました!こちらになります。 //= require jquery //= require jquery_ujs //= require twitter/bootstrap //= require turbolinks //= require underscore //= require gmaps/google //= require_tree . ここがapplication.jsの内容になります。 私もちょっと<script src="http://cdn.jsdelivr.net/gmaps4rails/・・・ が何故出ていないのかちょっと確認してみます。 もう一つ便乗質問なのですが javascript: と記載したものはHTMLのタグとして <script> handler = Gmaps.build('Google'); handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){ markers = handler.addMarkers( [{"lat":"35.51313726","lng":"139.47423554","infowindow":"大豆肉のから揚げと玄米のプレート","title":"6889cafe"}]); handler.bounds.extendWith(markers); handler.fitMapToBounds(); }); </script> のように <script type="text/javascript"> とか表記されないものなのでしょうか?slimの表記ルールにイマイチ馴染んでなくてちょっとこちらも質問となりすみません。
kei344

2016/06/19 09:04

「javascript:」内のスクリプトをjQuery(function(){ /*処理*/ });で囲ってみてもらえますか? jQuery(function(){ //処理 }); > 失礼しました!こちらになります。 こちらこそ失礼しました。 > text/javascript JavaScriptがデフォルト値なので、省略可能です。 【script 要素 - HTML | MDN】 https://developer.mozilla.org/ja/docs/Web/HTML/Element/Script
hrc

2016/06/19 09:22

ありがとうございます。以下のよう記載したところ、jQueryの箇所でSyntaxErrorになりました。書き方間違っておりますでしょうか? javascript: jQuery(function(){ handler = Gmaps.build('Google'); handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){ markers = handler.addMarkers( #{raw @hash.to_json});
kei344

2016/06/19 09:25

途中で途切れているので、質問文に追記してもらえませんか?
hrc

2016/06/19 09:31

承知しました。
hrc

2016/06/19 09:44

再度Script書き直したところ、違うエラーになりました。もう少しで表示されそうです。質問文に追記しております。
hrc

2016/06/19 10:01

APIKeyは取得しているのですが、頂いた情報を元にJSのデバッガを確認したら js?v=3.23&key=xxxxxxxxxx:32 Google Maps API error: Google Maps API error: RefererNotAllowedMapError https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error Your site URL to be authorized: http://localhost:3000/ja/restaurant/1 となっていました。本番に上げて動作確認して再度コメントします。少々お待ちください。
hrc

2016/06/19 10:17

こちら表示されました!Errorの内容はAPI Keyの登録しているサイト名称が違うとのことでサイトを本番にあげて設定しなおしたら正しく表示されました。 色々ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問