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

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

ただいまの
回答率

90.45%

  • Ruby on Rails

    9117questions

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

  • Ruby on Rails 4

    2552questions

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

  • Bootstrap

    1355questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

  • Google マップ

    433questions

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

GoogleMapもBootstrapも適用されず、JSエラーが出る

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 841

hrc

score 44

どのタイミングでそうなったかはわからないのですが、突然GoogleMapも出ず、Bootstrapのデザインも適用されなくなりました。画面上のイメージはこのような感じです。

trouble

Bootstrapは正しく適用されているとこんなデザインになります。
usual

Mapが出てないのはJSのエラー(下記)が出ているからのようなのですが、複数回JSを読ませたような節は思い当たりません。
You have included the Google Maps API multiple times on this page. This may cause unexpected errors

関連しそうな箇所で言うとapplication.jsはこちら

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require underscore
//= require bootstrap
//= require gmaps/google

Viewのapplication.html.slimはこちら

doctype 5
html(lang="en")
  head
    meta(charset="utf-8")
    meta(http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1")
    meta(name="viewport" content="width=device-width, initial-scale=1.0")
    title= content_for?(:title) ? yield(:title) : "vegewel"
    = csrf_meta_tags
    / Le HTML5 shim, for IE6-8 support of HTML elements
    /[if lt IE 9]
      = javascript_include_tag "http://html5shim.googlecode.com/svn/trunk/html5.js"
    = yield(:page_stylesheet) if content_for?(:page_stylesheet)
    = stylesheet_link_tag "flatly", :media => "all"
    = javascript_include_tag "application"
    = if defined?(@temp)
      = render :partial => @temp + '.html'
  body

    nav.navbar.navbar-default.navbar-fixed-top
      .container-fluid
        .navbar-header
          button.navbar-toggle.collapsed data-target="#navbarEexample2" data-toggle="collapse" type="button"
            span.sr-only Toggle navigation
            span.icon-bar
            span.icon-bar
            span.icon-bar
          a.navbar-brand href="/"
            img alt="Vegewel" src="/logo4.png" style=("height: 30px;")
        #navbarEexample2.collapse.navbar-collapse
          ul.nav.navbar-nav
            li
              = link_to I18n.t('frontpage_by_area'), (url_for controller:'/area')
            li
              = link_to I18n.t('frontpage_by_restaurant'), (url_for controller:'/restaurant')
            li
              = link_to I18n.t('frontpage_by_menu'), (url_for controller:'/menu')
            li
              = link_to I18n.t('frontpage_by_genre'), (url_for controller:'/genre')
            li
              = link_to I18n.t('frontpage_by_restraunttype'), (url_for controller:'/restaurant_type' )
            p.navbar-text
              = link_to 'JP', "/ja"
              |  | 
              = link_to 'EN', "/en"

    h3 aaa
    - if user_signed_in?
      |  Logged in as
      strong
        = current_user.name
      | .
      = link_to 'Edit profile', edit_user_registration_path, :class => 'navbar-link'
      |  |

      |  |
      = link_to "Logout", destroy_user_session_path, :method => :delete, :class => 'navbar-link'
    - else
      = link_to "Sign up", new_user_registration_path, :class => 'navbar-link'
      |  |
      = link_to "Login", new_user_session_path, :class => 'navbar-link'
    - if notice.present?
      p.notice.alert.alert-info
        = notice
    - if alert.present?
      p.alert.alert-warning
        = alert
    = yield
    /!
      | Javascripts
      | \==================================================
    /! Placed at the end of the document so the pages load faster
    = javascript_include_tag "flatly"
    = yield(:page_javascript) if content_for?(:page_javascript)

  footer

該当箇所のViewはこんな感じです(Mapのところのみ)。

tr
      th.col-xs-6.col-sm-3.col-md-1 = t :restaurant_list_map
      td.col-xs-12.col-sm-6.col-md-3
        #map if @restaurant.lat.present?

【追記】
application.html.slimの中から = if defined?(@temp)で読み込んでいるテンプレートはこちらです。ここに地図関連の情報も載せています。

head
    meta charset="utf-8"
    meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"
    meta name="viewport" content="width=device-width, initial-scale=1.0"
    title= content_for?(:title) ? yield(:title) : "Vegewel"
    = csrf_meta_tags
    = stylesheet_link_tag "application", :media => "all"
    = favicon_link_tag 'apple-touch-icon-144x144-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '144x144'
    = favicon_link_tag 'apple-touch-icon-114x114-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '114x114'
    = favicon_link_tag 'apple-touch-icon-72x72-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png', :sizes => '72x72'
    = favicon_link_tag 'apple-touch-icon-precomposed.png', :rel => 'apple-touch-icon-precomposed', :type => 'image/png'
    = favicon_link_tag 'favicon.ico', :rel => 'shortcut icon'
    = javascript_include_tag "application"

    script src="//maps.google.com/maps/api/js?v=3.23&key=AIzaSyCgBL4ep6_BcDS3ffBf9Tz5ZTHaaZ4Y3bg"
    script src="//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"
    script src='//cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/infobox/src/infobox_packed.js'

JSの順番なのかわからないのですが、調べてもTurbolinksが悪そうとかは出てくるのですが見当もつきかねるので是非皆さんのお知恵を拝借したいです。
どうかよろしくお願いします。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

>You have included the Google Maps API multiple times on this page. This may cause unexpected errors

エラー内容からは複数回JSが読まれてるっぽいので、下のJSで同じの読んでるのでは?

   = javascript_include_tag "flatly"
= yield(:page_javascript) if content_for?(:page_javascript)

これを消してみてください。
デバッグは一個一個消して試していかないと、見当つきません。
そこから絞り込みをしましょう。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/07/26 05:55 編集

    ありがとうございます!一つ一つ消して試したところ、application.cssの//= require bootstrapを消したらBootstrapは正しく適用されるようになりました。上記も試してMap出るか試してみます。また、本文にpartialで読み込んでいる地図のjs部分も追記しました。この辺も見てみます。

    キャンセル

  • 2016/07/28 06:59

    こちらの件、ソースを読み直したらpartialで指定したJSを2度読み込んでいました。ただ、呼び元は1回しか呼んでないのでおかしな挙動が起きているようです。ちょっと仕切りなおして別の質問としてあげようと思います。ありがとうございました。

    キャンセル

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

  • ただいまの回答率 90.45%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • Ruby on Rails

    9117questions

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

  • Ruby on Rails 4

    2552questions

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

  • Bootstrap

    1355questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

  • Google マップ

    433questions

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