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?
It sounds like they more or less don't want you downloading all their data and creating your own copy. That's their way of enforcing it. There are several good alternatives that might have better licensing.
So does that mean that you are good if the app runs a place update each month? If so, for smaller apps, you are golden. The Mapbox API might be a good alternative.
Overall, thanks Chris for offering this look into how to use Google's API with rails. I haven't seen anyone put something like this together in a while.
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:
<%= 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
data-controller="localizators"
data-action="google-maps-callback@window->localizators#initMap"
data-localizators-current-location-value="<%= current_location %>"
and then a app/javascript/controllers/localizators_controller.js:
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
connect() {
console.log('localizators controller connected');
}
initMap() {
console.log('map init');
}
}
The message 'localizators controller connected appears always', but the 'map init' never in Brave Browser, and sometimes in Firefox (I don't know how the browser is realted)
Just to give further information, I'm in my development environment, and is the same if I use bin/dev or rails s.
As you can see, there are two problems that I don't know if they are related.
The code I had to put as a JS script since with the recommended configuration it didn't seem to be loading and the Stimulus controller action was firing only sometimes, even though the event in @window seemed to be firing every time.
Thank you very much in advance for any help you can give me.
