在 Rails 中嵌入谷歌地图没有响应答案

【问题标题】：Embedded Google Maps in Rails not responsive在 Rails 中嵌入谷歌地图没有响应
【发布时间】：2016-07-08 19:58:37
【问题描述】：

我正在尝试将 Google 地图嵌入到我的 Ruby on Rails 网站中。

我可以使用我实现的搜索功能在地图上搜索地点，但我无法以任何方式与地图进行交互。我无法拖动、缩放、单击方向、单击以更改为卫星视图——什么都没有。

我已经从here获取标准代码

<iframe
  width="600"
  height="450"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY
    &q=Space+Needle,Seattle+WA" allowfullscreen>
</iframe>

我通过编写一个具有相同代码的简单 html 文件并运行 SimpleHTTP Python 服务器来确认 Rails 存在问题。在这个简单的 HTML 文件中，地图功能齐全。

Rails 中有什么东西阻止了它的工作吗？

我正在运行 Ruby 2.2.1 和 Rails 4.2.6

刷新页面，控制台是这样的

Started GET "/homes?utf8=%E2%9C%93&search=name2&commit=Find" for ::1 at 2016-07-08 16:07:00 -0400
Processing by HomesController#index as HTML
  Parameters: {"utf8"=>"✓", "search"=>"name2", "commit"=>"Find"}
  Home Load (0.5ms)  SELECT  `homes`.* FROM `homes` WHERE `homes`.`name` = 'name2'  ORDER BY `homes`.`id` ASC LIMIT 1
  Rendered homes/index.html.erb within layouts/application (0.3ms)
Completed 200 OK in 15ms (Views: 12.3ms | ActiveRecord: 0.5ms)


Started GET "/assets/turbolinks.self-c5acd7a204f5f25ce7a1d8a0e4d92e28d34c9e2df2c7371cd7af88e147e4ad82.js?body=1" for ::1 at 2016-07-08 16:07:00 -0400


Started GET "/assets/homes.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" for ::1 at 2016-07-08 16:07:00 -0400


Started GET "/assets/jquery.self-660adc51e0224b731d29f575a6f1ec167ba08ad06ed5deca4f1e8654c135bf4c.js?body=1" for ::1 at 2016-07-08 16:07:00 -0400


Started GET "/assets/jquery_ujs.self-e87806d0cf4489aeb1bb7288016024e8de67fd18db693fe026fe3907581e53cd.js?body=1" for ::1 at 2016-07-08 16:07:00 -0400


Started GET "/assets/scaffolds.self-eb1a78b28e204749434f74792f8691befac84bd13affecbb8570043d2a38612c.css?body=1" for ::1 at 2016-07-08 16:07:00 -0400


Started GET "/assets/application.self-d9e17b260b47ee1a5a805b39ec14012b484178bbc392ce717b7d51d0c785d7d3.css?body=1" for ::1 at 2016-07-08 16:07:00 -0400


Started GET "/assets/homes.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" for ::1 at 2016-07-08 16:07:00 -0400


Started GET "/assets/application.self-3b8dabdc891efe46b9a144b400ad69e37d7e5876bdc39dee783419a69d7ca819.js?body=1" for ::1 at 2016-07-08 16:07:00 -0400

【问题讨论】：

你把 API 密钥放在那里了吗？
听起来像是 Rails 注入的一些冲突的 javascript。请在您的开发者控制台中查看包含的内容。
@Christian-G 哦，是的，对不起。我添加了控制台代码

标签： javascript html ruby-on-rails ruby google-maps

【解决方案1】：

看起来 Rails 的 turbolinks 与 Google 地图有冲突，请参阅此答案：

Rails 4 turbo-link prevents jQuery scripts from working

看看关闭 turbolinks 是否能解决问题：

从您的 Gemfile 中删除 gem "turbolinks" 并运行 bundle。
从application.js 中删除//= require turbolinks。

【讨论】：