Google Maps and Google Places Autocomplete API with Rails, Turbolinks, and Stimulus.js Discussion

Thanks Chris, great video.

I have tried to work with Google Maps Places API in the past, but I have faced an issue with their API Policies. According to their policy you cannot save details like the place address which was autocompleted in your application database (https://developers.google.com/places/web-service/policies#pre-fetching,-caching,-or-storage-of-content). Also I remember you can save the latitude and the longitude in the database but you have to refresh it every 30 days (https://cloud.google.com/maps-platform/terms/maps-service-terms).

What are your thoughts on this?

Awesome episode Chris!

Would love to see more on Stimulus!

Me too. I prefer Stimulus over all other options. Is the Rails way. So easy and useful.

Hi Chris, Great tutorial. I noticed that when you go back to edit a page, the map loads the correct location from lat and long, however, it does not place the marker back. It would be confusing for users let's say on a property details page when the page loads, it will zoom to the correct building/area but since the marker for the actual address didn't load, the user won't know which building they are looking at. Instead they are going to be looking at the whole map with other business names and their markers. In summary, when you go back to your edit page (from your screencast) it should load the marker.

Great tutorial! With your setup I think you should be getting the same issue I am where once you set the place, if you delete the field the place is still saved. It only changes when you select a valid new place. Is there a way to delete the lat/long when an invalid place is selected or no place is?

Hey Chris, great tutorial!
When I was implementing I noticed that the Event.initEvent() method is deprecated.
So I changed it to use the Event constructor instead:

window.initMap = function (...args) {
  const event = new Event('google-maps-callback', { bubbles: true, cancelable: true });
  event.args = args;
  document.dispatchEvent(event);
};

Thank you for this episode Chris!

With Rails 7 : places#initMap never get called so google doesnt get printed out in the console.

Did exactly form_with model: model, local: true, data: { controller: 'places', action: 'google-maps-callback@window->places#initMap' }

I notice that google does print out on turbo link reload and not on html page load

I am working on a Rails 7.1.2 application with Ruby 3.2.2 and facing an intermittent problem with Google Maps loading. The map sometimes loads in Firefox, but rarely in Brave. There seems to be an issue with a Stimulus controller action not consistently firing, although the event listener for the action seems to execute.

First, following some outdated guides, I started adding this script to my app/javascript/application.js

window.dispatchMapsEvent = function(...args) {
const event = new CustomEvent("google-maps-callback", { detail: args });
window.dispatchEvent(event);
}

window.addEventListener("google-maps-callback", function(event) {
console.log("Google Maps API loaded");
})
and this to the head of my app/views/layouts/application.html.erb:

<%= javascript_include_tag "https://maps.googleapis.com/maps/api/js?key=#{Rails.application.credentials.google.api_key}&libraries=places&callback=dispatchMapsEvent",
defer: true,
async: true,
"data-turbolinks-eval": false
%>

Within this code, I got this error in my browser console:

Uncaught (in promise) InvalidValueError: dispatchMapsEvent is not a function
Although most of the guides I followed suggested this should work, I assumed the error was because the dispatchMapsEvent function was not yet loaded by the time the callback was executed, which is why I pulled the code out of the application.js and passed it to a script within the layout:

window.dispatchMapsEvent = function(...args) { const event = new CustomEvent("google-maps-callback", { detail: args }); window.dispatchEvent(event); } window.addEventListener("google-maps-callback", function(event) { console.log("Google Maps API loaded"); })

<%= javascript_include_tag "https://maps.googleapis.com/maps/api/js?key=#{Rails.application.credentials.google.api_key}&libraries=places&callback=dispatchMapsEvent",
defer: true,
async: true,
"data-turbolinks-eval": false
%>
This seemed to fix the mentioned error, as the console.log ran correctly.

Secondly, I have configured a StimulusJS controller as follows:

views/folder/_some_partial.html.erb

thanks. it's sp good