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

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

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

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

Google マップ

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

Q&A

解決済

2回答

3074閲覧

GoogleMapsが表示されない

hrc

総合スコア55

Ruby on Rails 4

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

Google マップ

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

0グッド

0クリップ

投稿2016/07/28 12:38

GoogleMapsが表示されなくて困っています。
Railsで作成したアプリですが、HTMLは以下のように吐き出されています。

html

1<!DOCTYPE html> 2<html lang="en"><head><meta charset="utf-8" /><meta content="IE=Edge,chrome=1" http-equiv="X-UA-Compatible" /> 3<meta content="width=device-width, initial-scale=1.0" name="viewport" /><title>vegewel</title><meta name="csrf-param" content="authenticity_token" /> 4<meta name="csrf-token" content="roDqjzLhMf6FCBigRbdHnWZ/1OnVH1InAPMZssxWEZXAk/9vPVGcELe2vQky/8oZtbeARec+2ObwluL/2GEY5Q==" /> 5<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> 6<link rel="stylesheet" media="all" href="/assets/flatly-4de068c1f1589304d2be065d2ebad2b03c30871996dbf5235bc3478437e55f1c.css" /> 7<script src="/assets/application-cff4883c7a43060c2a0458fadb5fa0ebec49fd8c985050c8893a050847772f5f.js"> 8</script><script src="//maps.google.com/maps/api/js?v=3.23&amp;key=AIzaSyCgBL4ep6_BcDS3ffBf9Tz5ZTHaaZ4Y3bg"></script> 9<script src="//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"></script> 10<script src="//cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/infobox/src/infobox_packed.js"></script> 11<script>jQuery(function(){ 12 13 mapStyle = [{"featureType":"water","elementType":"geometry","stylers":[{"visibility":"on"},{"color":"#aee2e0"}]},{"featureType":"landscape","elementType":"geometry.fill","stylers":[{"color":"#abce83"}]},{"featureType":"poi","elementType":"geometry.fill","stylers":[{"color":"#769E72"}]},{"featureType":"poi","elementType":"labels.text.fill","stylers":[{"color":"#7B8758"}]},{"featureType":"poi","elementType":"labels.text.stroke","stylers":[{"color":"#EBF4A4"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"visibility":"simplified"},{"color":"#8dab68"}]},{"featureType":"road","elementType":"geometry.fill","stylers":[{"visibility":"simplified"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#5B5B3F"}]},{"featureType":"road","elementType":"labels.text.stroke","stylers":[{"color":"#ABCE83"}]},{"featureType":"road","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#A4C67D"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#9BBF72"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#EBF4A4"}]},{"featureType":"transit","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"visibility":"on"},{"color":"#87ae79"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#7f2200"},{"visibility":"off"}]},{"featureType":"administrative","elementType":"labels.text.stroke","stylers":[{"color":"#ffffff"},{"visibility":"on"},{"weight":4.1}]},{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#495421"}]},{"featureType":"administrative.neighborhood","elementType":"labels","stylers":[{"visibility":"off"}]}]; 14 15 handler = Gmaps.build('Google'); 16 handler.buildMap({ provider: {styles: mapStyle}, internal: {id: 'map'}}, function(){ 17 markers = handler.addMarkers( [{"lat":"35.51313726","lng":"139.47423554","infowindow":"6889cafe","title":"大豆肉のから揚げと玄米のプレート"}]); 18 handler.bounds.extendWith(markers); 19 handler.fitMapToBounds(); 20 handler.getMap().setZoom(15); 21 }); 22}); </script> 23<!--Le HTML5 shim, for IE6-8 support of HTML elements--><!--[if lt IE 9]><script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script><![endif]--></head> 24<body> 25・・・ 26<th class="col-xs-6 col-sm-3 col-md-1">Map</th> 27<td class="col-xs-12 col-sm-6 col-md-3"> 28 <div id="map"></div> 29</td></tr> 30<tr><th class="col-xs-12 col-sm-6 col-md-3" colspan="2">Recommendable dish</th><tr></tr></tr><td class="col-xs-6 col-sm-3 col-md-1"><a href="/en/menu/1"> 31・・・

以下の内容通りに記載したはずですが、何が足りないのか全く見当つきません。Errorは出ていません。
https://github.com/apneadiving/Google-Maps-for-Rails

以前は表示されていましたが、Bootstrap当てたくらいから表示されなくなったような気がします。どなたかお分かりになる方よろしくお願いします。

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

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

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

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

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

guest

回答2

0

まず、#mapwidth/height は設定されていますか?(もしくは設定したCSSは正しく読み込まれていますか?)

Errorは出ていません。

これはRailsのエラーということでしょうか。ブラウザのデベロッパーツールでのエラーも含むのでしょうか。

投稿2016/07/28 13:11

kei344

総合スコア69364

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

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

hrc

2016/07/28 14:12

あ、すみません。ChromeのスクリプトデバッガーでJSのエラーは無いという意味でした。
guest

0

自己解決

こちらですが、div id="map" style="height: 300px; width: 300px;" とベタ書きしたら表示されました。
どうやらstyleがあたってなかったようです。お騒がせしました。

投稿2016/07/28 21:03

hrc

総合スコア55

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問