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.
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: https://stackoverflow.com/q...
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="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" 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:
https://github.com/letItCurl/geolocation-and-search
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
I get this
gmaps.js:189 Google Maps API is required. Please register the following JavaScript library https://maps.googleapis.com/maps/api/js error.
I have
<script src="https://maps.googleapis.com/maps/api/js?key=<%= 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?