Embed a Google Map for Each Instance of a Rails Model
A partner and I recently worked on a trail finding application for a Flatiron School project that pulled data for 500 trails within 100 miles of New York City from an API. You could browse the trails or search for specific ones and then visit a show page for each of them that had data from the API, a section where users could leave reviews of a trail or read other users’ reviews, and an embedded Google map that gave an exact location for the trail. At a glance the map looks complex and adds impressive real world functionality — just click on “directions” and you can suddenly plan a trip to a specific trail instead of simply reading about it — but you actually only need a few lines of code to make 500 (or more) different Google maps happen, and it’s well within any new Rails developer’s capabilities.
Our particular maps used geolocation, but that just happened to be the data that we had to work with — an address or really anything else you might plug into a Google Maps search will do as well. Here’s the schema for our trail model with all of the data from theAPI:
You’ll notice that each trail has a latitude and longitude. All we need for a Google Maps search is a string with the geolocation. The latitude and longitude aren’t enough by themselves, but we can easily turn them into a geolocation with an instance method in our Trail model:
Now if we go into our rails console and save our first trail instance in a variable, trail ,
we can call trail.latitude and trail.longitude as we would expect,
but we can also now call our trail.geolocation instance method:
This gives us a perfect string to plug into a Google Maps query. And sure enough, if we go to Google Maps and paste that geolocation into the search field, our trail location appears on the map:
All you need to bring this to life on your show pages is a Google Maps API key and an HTML iframe. I won’t go into detail on setting up a Google API key, but if it’s your first time doing it it shouldn’t take more than ten or so minutes. Google has a guide for developers here that should tell you everything you need to know:
As for the iframe, it’ll look like this:
As with an image tag, you can adjust the width and height to fit your show page, and the src takes a URL as a string. The only part of this you’d have to adjust for your particular project is the API key and search query, which I’ve added placeholders for in the URL. All we need to do to make our map display the location of every single trail in our database is plug a variable into the query in the URL. This is no different than typing a query into a Google Maps search field. Because we probably have something like this in our TrailsController
each of our show pages is already linked to a particular trail instance. So wouldn’t it be great if we’d already defined an instance method that returned a trail’s geolocation as a string that we could plug directly into our Google Maps URL as a query? Yes, it would!
Now every single show page we visit will have a map pinpointing the trail’s location, and we’ve hardly done any work to make that happen:
Just to reiterate, you don’t need a geolocation to make this work. Literally anything you can type into a Google Maps search will do, as long as it’s specific enough. Geolocations and most addresses (at least if written in full) have the advantage of being unique, whereas things might not go as smoothly if you were making a cafe-finding application and plugging cafe names into the map query. You might get lucky and have some completely unique cafes in your database, but it’s much more likely that some will have multiple locations in the same city, or that cafes in other states or countries will share the same name. So experiment, but try to be specific.
