Integrate Google Maps With a Rails App | by John Troutman | May, 2022

A how-to information

Picture by GeoJango Maps on Unsplash

I used to be just lately including a function to considered one of my Rails initiatives that might enable the person to enter a location and get again an inventory of breweries with an interactive map. The Google Maps API is clearly a preferred selection for this however I used to be stunned to see that there aren’t an entire lot of sources on-line for incorporating it right into a Rails app. To treatment this, let’s check out how one can go about making customized maps with this information.

Setup

First issues first, let’s arrange the area the place the map will go. Within the view, file make a bit for the map. Give it a easy id like “map”.

Join Google Maps JavaScript API. After you have your API key place it within the .env file. Ensure that this file is asserted in .gitignore so that you don’t push your key to Github!

You have to a latitude and longitude for every location to place into the Google Maps API. I like to recommend utilizing the Geocoder gem for this.

It may well convert avenue addresses into coordinates which might then be saved to your fashions. The final a part of setup is to create a JavaScript file.

If utilizing Rails 6 it ought to go in app/javascript/packs. With Rails 7 the listing it ought to go in is app/javascript. Title the file map.js.

Passing the Coordinates

The latitude and longitude information will must be handed over from our Rails web page to the JavaScript file to create the map and the markers inside. Since we’re making a map that adjustments relying on person enter we must make a approach to ship location information to our JavaScript code which then will get despatched off to the Google Maps API to generate the map. To perform this show the search outcomes on the view web page and add information tags to every merchandise with the coordinates.

Every brewery displayed in an inventory has their coordinates inside their <li> tag as data-latitude and data-longitude. The town that the breweries are situated in has its coordinates within the <div> with the id of “breweries”.

This fashion the data is a part of the DOM and will be accessed by our JavaScript code.

The JavaScript Code

Within the map.js the file we could have one perform that creates a map, grabs the coordinates from the web page, and provides markers to the map with these coordinates. The place the map facilities on (a metropolis on this case) must be designated and are as much as you on the way you seize these coordinates (once more, Geocoder is beneficial for this).

For the sake of brevity, we’ll assume you have already got that data.

The perform will seize the coordinates for the town and use it as the middle place when creating the map. Then it is going to seize every brewery record merchandise and iterate over them, retrieve their coordinates, and create markers to put on the map to designate the place of every brewery. With all this in place we at the moment are able to name the Google Maps API within the view!

Creating the Map

The one factor left to do now’s arrange our view in order that the Google Maps API is named and makes use of our JavaScript code to construct the map. Our map.js file will be made accessible with a Rails helper. They differ relying on whether or not you’re utilizing Rails 6 or 7.

Rails 6: javascript_pack_tag 'map'

Rails 7: javascript_import_module_tag 'map'

We’ll place this within the view. The decision to the Google Maps API is completed utilizing a <script> tag. There may be additionally a Rails helper for this:

With each helpers in place your view ought to now look one thing like this:

The Google Maps API is named and takes within the JavaScript perform initMap as a callback which provides it the data it must create a map and markers. Notice we’re utilizing the defer attribute.

Since we’re counting on information units on the web page to get our coordinates we should be sure that the DOM content material is loaded earlier than our perform is named. The defer attribute will wait till the HTML is assembled earlier than calling the API and utilizing the initMap perform. The map will now be constructed and positioned in <div id="map"> .

Now you’ve gotten a completely dynamic map in your Rails app. Hope you discovered this information useful. Keep secure and wholesome on the market!

More Posts