GoogleMap is not displayed until the browser is reloaded

When I incorporated Google Map in my portfolio, there was a phenomenon that it did not work with page transitions. I investigated the solution, so I summarized it.

Cause

** It's all caused by Turbolinks. ** ** If you make a page transition with Turbolinks enabled, you will end up in a situation where the transition destination has JS operation but does not fire.

In the first place, JS and jQuery have events to make it work. ** Turbolinks fires these events on the first page load, but not on page transitions. ** **

Solution

The solution is to delete the line // = require turbolinks described in app/assets/javascripts/application.js. There seems to be a solution in other ways.


I researched Turbolinks to solve this problem.

What is Turbolinks

Turbolinks is a library that accelerates screen transitions officially introduced from Rails 4. Turbolinks itself is provided as a JavaScript library, but Rails includes it as a Gem by default for ease of use.

How to install in Ruby on Rails

① Describe gem ‘turbolinks’ in Gemfilebundle install ③ Describe // = require turbolinks in app/assets/javascripts/application.js

How Turbolinks works

スクリーンショット 2020-12-20 18.10.11.png Quoted from "[Rails] For beginners! Detailed explanation of Turbolinks that accelerates screen transitions using figures"

① Link click event fires (2) Block screen transitions and send requests asynchronously ③ Return HTML as a response ④ Check if it matches the current page ⑤ Pretend that a screen transition has occurred

① Link click event fires

Turbolinks monitors a tags in the same domain, and when clicked, Turbolinks works.

(2) Block screen transitions and send requests asynchronously

Turbolinks blocks screen transitions caused by clicks on links and sends asynchronous requests using the History API.

③ Return HTML as a response

The server that receives the request returns HTML as a response.

④ Check if it matches the current page

We are checking if the JS and CSS in the head tag in the HTML returned as a response match the current page. This prepares for the next action, the replacement.

⑤ Pretend that a screen transition has occurred

Turbolinks replaces the current body tag and merges the contents of the head tag. And it looks as if a screen transition has occurred.


Reference article [rails/javascript] googlemap doesn't show up until I reload the browser Introduction to Turbolinks in 5 minutes [Ruby on Rails] [Rails] For beginners! Detailed explanation of Turbolinks that speeds up screen transitions using figures

Recommended Posts

GoogleMap is not displayed until the browser is reloaded
The devise error message is not displayed properly.
When the project is not displayed in eclipse
[Error] The app is not displayed in the production environment
[Rails] fields_for is not displayed
Until the code is executed
About the problem that the image is not displayed after AWS deployment
[Rails] About the error that the image is not displayed in the production environment
How the website is displayed on the screen
If the HTTP method is not specified, the browser side requests with GET
Image is not displayed in production environment
When UITextView is not displayed (Swift, Xcode)
[Cloud9] Yay! You ’re on Rails! Is not displayed in the rails tutorial
Explanation until the original application is completed
The list of installed apps is not displayed in getPackageManager (Android11 ​​/ API level 30)
ActiveSupport underscore is not the inverse of camelize
The public key for jenkins-2.249.1-1.1.noarch.rpm is not installed
[Java] Something is displayed as "-0.0" in the output
Ebean.update () is not executed in the inherited model.
I want to solve the problem that JS is not displayed properly unless reloaded when transitioning with Turbolinks: link_to
[Android Studio] About the matter that the design view is not displayed when using TextClock
PATH does not pass ... The cause is the character code