CODEWITHSUNDEEP
javascripthtmlruby-on-railsrubygoogle-maps
Kendall Weihe
Kendall Weihe

Reputation: 2075

Embedded Google Maps in Rails not responsive

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

Upvotes: 2

Views: 130

Answers (1)

Christian-G
Christian-G

Reputation: 2361

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.

Upvotes: 1

Related Questions