嵌入式Google地图在Rails中无法响应 [英] Embedded Google Maps in Rails not responsive

问题描述

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

我可以使用我实施的搜索功能在地图上搜索地点，但我无法以任何方式与地图进行交互。我无法拖动，缩放，点击路线，点击更改为卫星视图 - 没有任何东西。

我从 here

 < iframe 
 width =600
 height =450
 frameborder =0style =border：0
 src =https：// www .google.com / maps / embed / v1 / place？key = YOUR_API_KEY 
& q = Space + Needle，Seattle + WAallowfullscreen> 
< / iframe> 
  

我已经通过编写一个具有相同确切代码的简单html文件来证实它是Rails的问题，并运行一个SimpleHTTP Python服务器。在这个简单的HTML文件中，地图功能完整。

Rails中有什么能够阻止它的工作吗？

我正在运行Ruby 2.2.1和Rails 4.2.6

刷新页面时，控制台显示像这样

 开始GET/ homes？utf8 =％E2％9C％93& search = name2& commit = Findfor :: 1在2016-07-08 16:07:00 -0400 
通过HomesController＃index处理为HTML 
参数：{utf8=>✓，search=> name2，commit=>查找} 
家庭负载（0.5ms）选择`homes`。*从`homes` where'homes`.`name` ='name2'ORDER BY`homes '.`id` ASC LIMIT 1 
在布局/应用程序中渲染homes / index.html.erb（0.3ms）
在15ms内完成200 OK（查看：12.3ms | ActiveRecord：0.5ms）
 
 
在2016-07-08 16:07:00 -0400 
 $开始GET GET/assets/turbolinks.self-c5acd7a204f5f25ce7a1d8a0e4d92e28d34c9e2df2c7371cd7af88e147e4ad82.js?body=1 b 
 $ b在2016-07-08 16:07:00 -0400 
 
开始获取/assets/homes.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1为:: 1 
在2016-07-08 16:07:00 -0400 
 
 
开始获取/assets/jquery.self-660adc51e0224b731d29f575a6f1ec167ba08ad06ed5deca4f1e8654c135bf4c.js?body=1为:: 1在2016-07-08 16:07:00 -0400 
 
 
开始获取/assets/jquery_ujs.self-e87806d0cf4489aeb1bb7288016024e8de67fd18db693fe026fe3907581e53cd.js?body=1为:: 1开始GET /assets/scaffolds.self-eb1a78b28e204749434f74792f8691befac84bd13affecbb8570043d2a38612c.css?body=1for :: 1 at 2016-07-08 16:07:00 -0400 
 
 
开始GET/ assets / application.self-d9e17b260b47ee1a5a805b39ec14012b484178bbc392ce717b7d51d0c785d7d3.css？body = 1for :: 1 at 2016-07-08 16:07:00 -0400 
 
 
开始GET/assets/homes.self -877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js？body = 1for :: 1 at 2016-07-08 16:07:00 -0400 
 
 
开始GET/assets/application.self-3b8dabdc891efe46b9a144b400ad69e37d7e5876bdc39dee783419a69d7ca819。 js？body = 1for :: 1 at 2016-07-08 16:07:00 -0400 
  

解决方案

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

Rails 4 turbo-link阻止jQuery脚本工作

看看是否关闭turbolinks可以解决问题：

• 从您的Gemfile中移除 gemturbolinks并运行 / code>。




• 从 // = require turbolinks > application.js 。

I'm trying to embed Google Maps into my Ruby on Rails website.

I am able to search places on the map using a search feature I implemented, but I am unable to interact with the map in any way. I can't drag, zoom, click directions, click to change to satellite view -- nothing.

I have taken the standard code from 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>

I have confirmed it is a problem with Rails by writing a simple html file with the same exact code, and running a SimpleHTTP Python server. In this simple HTML file, the map is fully functional.

Is there something in Rails that is stopping this from working?

I'm running Ruby 2.2.1 and Rails 4.2.6

Refreshing the page, the console looks like this

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

解决方案

Looks like a conflict of Rails's turbolinks with Google Maps, see this answer:

Rails 4 turbo-link prevents jQuery scripts from working

See if turning off turbolinks fixes the problem:

• Remove gem "turbolinks" from your Gemfile and run bundle.

• Remove //= require turbolinks from application.js.

这篇关于嵌入式Google地图在Rails中无法响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！