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 Gemfile ②bundle install ③ Describe // = require turbolinks in app/assets/javascripts/application.js

• In Rails4 or later, "rails new` has automatically described Turbolinks.

How Turbolinks works

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.

• Domain = address on the Internet

(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.

• History API = API for managing and operating the page transition history of the browser
• API = Interface for programming applications
• Interface = Computer terminology that connects "something" and "something"

③ 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