All threads / How to use Google Maps and Markers Discussion

Ask A Question

Notifications

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 am having a hard time understanding how page specific js would be bad? What if I would like a different kind of map for a different page or js that would be used only on one specific page? Is there an easy way to implement it when deemed necessary?

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.

Reply

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

Reply

Great Video!!

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

Reply

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.

Reply

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

Reply

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.
Reply
Join the discussion

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

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

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

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2020 GoRails, LLC. All rights reserved.