How to integrate Google Maps Javascript API in your Rails app

Adding Google Maps API into my application was probably one of the easiest things I’ve done and it was so much fun. Below are the steps to take in order to integrate Google Maps into your Rails app.

Assuming you have already created a new rails app, have MVC set up, your migrations, your seed data, and now you are looking to add a map and a pin or marker for a specific location in your app.

Credentials

The next thing you need to do is to get an API key: Get Your API Key Here.

Google offers a variety of mapping APIs. Just enable the ones you want to use and set a restriction to your API key.

Don’t forget to protect your key. We’ll use rails credentials to manage secure credentials in our Rails application.

In your terminal type:

rails credentials:edit

You should be able to run this and get everything to work. In case you run into an error, such as: No $EDITOR to open file in. Just assign one like this:

EDITOR=vim rails credentials:edit

Or your editor of choice instead of vim.

The command above will decrypt the file containing any existing encrypted keys you already have stored in your application. Here is an example of what it looks like when it is decrypted.

#   access_key_id: 123
#   secret_access_key: 345

Once you have your editor open, write the API key you want to encrypt. In this case, we want to encrypt our Google Maps API Key. So, at the top of the decrypted file write the following line:

google_api_key: YOUR_API_KEY_HERE

Exit the editor. When you see the message that the file is encrypted and saved, you’re good to go.

To access the encrypted keys from the credentials file use Rails.application.credentials. To use the encrypted Google API key and render the map on the page write the variable name that holds your API key at the end of the Rails.application.credentials. It should look like:

<script defer
    src=”https://maps.googleapis.com/maps/api/js?key=<%=Rails.application.credentials.google_api_key%>&callback=initMap">
</script>

Displaying the Map

In the .erb file where you want to render the map write the code below to tell Rails to launch the map when the page is loaded. This code will render the map you see in the in this page’s header. Don’t forget to pass the zoom and center. Both are self explanatory.

<script>
function initMap() {                                                
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 5,
            center: {lat: 42.402900, lng: -122.885240}
        });
</script>

Marker

The code below iterates through a list of coordinates and adds a marker to the map. Here I passed in the parameters, in this case park.latitude and park.longitude to render the location I wanted to show in the map. I also added a title which gets displayed every time the mouse hovers over the marker.

A click handler was also added. The .addListener method registers a function that gets invoked when a user clicks on the marker. In this example, every time the marker gets clicked, the page is redirected to the page of the selected park.

<script>
    var marker;
    function initMap() {                                                
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 5,
            center: {lat: 42.402900, lng: -122.885240}
        });
        <% @parks.filter{|park| park.latitude && park.latitude}.each do |park| %>
           marker = new google.maps.Marker({
               map: map,
               draggable: false,
               animation: google.maps.Animation.DROP,
               position: {lat: <%=park.latitude%>, lng: <%=park.longitude%>},title: "<%=park.name%>"
           });
           marker.addListener('click', function () { window.location.href = '/parks/<%=park.id%>'
           });
        <% end %>
    }
</script>

I hope you find this article helpful. Have fun integrating Google Maps in your Rails app.