Ask A Question


You’re not receiving notifications from this thread.

How to use Google Maps and Markers Discussion

Awesome video. I am wondering how would I take the show page and link it to a different js file. The index.js is global correct? What would be the best way to setup a show view with just the map for a specific item?


Hey Ryan,

What you want is to simply define a div with the id of map on the show page and have the markers array be just the item on the page (instead of all the ones on the index). The Javascript is available on every page so you're free to add a map to other pages and it will automatically work!

This is the benefit of writing javascript that's generic to pages. A lot of people want "page-specific" javascript but that's almost always a bad idea. You can always use a unique identifier for your JS to pickup and make your life a lot easier in the long run.

I don't think `bad` is the right term here - it's just that page specific js makes it more difficult to share functionality across pages and is usually not required.  But when it is needed we have a `content_for :load_last` at the bottom of our application layout that we use.

Chris in regards to the show page mentioned above what would the syntax look like to just display the one item on the show page? Not too familiar with arrays to know how to set that up.


Hey Chris,

I would love you to cover how to make custom infowindows with custom colors, content, without the "x" button, etc ( a la Airbnb for example ).

Keep it up


Probably doing something like these solutions would work:


Great Video!!

I would love to use this with a population density overlay.. does anyone know where I can get that data?


Does anybody know some good setup defaults using Gmaps with webpacker & Rails 6?


Super late reply, but I figured out how to properly import this while using Webpack and Rails.

In your application.js file, instead of simply having import 'gmaps';, do the following:

import 'gmaps';
import GMaps from 'gmaps';
window.GMaps = GMaps;

This also applies for those of you (like me) who keep getting "function is not defined" errors.


Would you be so kind to cover how to highlight respective marker once the mouse pointer hover over the database record ?


How do you add <script src="" async defer></script> from the Maps JavaScript API documentation in Rails 6 with Webpacker? Adding the above in my doesn't seem to do the trick.


Hello Ted

Here a git repo of the implementation of this episode with a brand new rails 6 app:

What Tyler polzin says is good, but you need to include your google api js before everything ;)

Let me know if you could do it !

Best regards


How can I just add 1 marker of one transaction on the map?


I get this
gmaps.js:189 Google Maps API is required. Please register the following JavaScript library error.

I have
<script src="<%= Rails.application.credentials.dig(:google, :google_maps_api_key) %>&libraries=places&callback=initMap" async defer data-turbolinks-eval="false"></script>
in application.html.erb.

What am I missing?


If I click on any link and go back to the page with the map on, it renders.


Seems like the async on the script tag was the issue. It only loaded after a link was clicked.

Join the discussion
Create an account Log in

Want to stay up-to-date with Ruby on Rails?

Join 82,969+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.