Google Maps in Rails

Assuming you have an API key

Step 1

Add these gems to your Gemfile

gem 'gmaps4rails'
gem 'underscore-rails'

Then open a Terminal and run bundle update

Step 2

Open the application.js file located in the app/assets/javascripts/ folder and add these lines to the bottom of the file.

//= require gmaps/google
//= require underscore

Step 3

Add the following lines to your application.html.erb file in the <head> tag.

<script src="//maps.google.com/maps/api/js?key=[your API key]"></script>
<script src="//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"></script>

Step 4

In the view file of your choice, add the following html

<div style='width: 800px;'>
  <div id="map" style='width: 800px; height: 400px;'></div>
</div>

<% locations = [{"lat": 41.8381065, "lng": -87.6512738, "infowindow": "House Bakery"}] %>
<% locations.push({"lat": 41.9100984, "lng": -87.6852883, "infowindow":"\u003ch5\u003e\u003ca href='/some_url'\u003eHandlebar\u003c/a\u003e\u003c/h5\u003e\u003csmall\u003e2311 W North Ave, Chicago, IL 60647, USA\u003c/small\u003e" })%>

<script>
handler = Gmaps.build('Google');
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
  markers = handler.addMarkers(<%= locations.to_json.html_safe %>);
  handler.bounds.extendWith(markers);
  handler.fitMapToBounds();
});
  </script>

Now if you navigate to the view you should be able to see your embedded map!

You can build your own array of Hashes that contain different coordinates that are relevent to your users.

Step 5

Modify the locations array to be an instance variable that you create in your controller that is related to one of you tables.

# in you controller
@users = User.all
@hash = Gmaps4rails.build_markers(@users) do |user, marker|
  marker.lat user.latitude
  marker.lng user.longitude
end

In your view

<script>
    markers = handler.addMarkers(<%=raw @hash.to_json %>);
</script>

Step 7 (optional)

Hide your key, if you want.

In this case, I believe it's okay if you to leave the key in plain text.

Judging from this answer Google Maps has multiple types of API keys and some of them are designed to be embedded in the browser, meaning anyone can see them. These browser keys are okay to expose and there's not much of a way to nto expose them either. Even hiding credentials in a seperate file like .env the embedded code will still evaluate and display in plain text for anyone who looks at the html source code.

Make a .env file and add your key like:

key=[YOUR-KEY-HERE]

Then in your application.html.erb, update your script tag to be

<script src="//maps.google.com/maps/api/js?key=<%= ENV.fetch("key") %>"></script>

jelaniwoods/embed-a-google-maps-in-a-rails-view.md