How To Integrate A Static Google Map API In Your Rails Project
Versions used
- Rails(5.2+)
- Google Maps API (v3)
In this tutorial, I’ll be teaching you how to strictly integrate a static google map into your rails project. I will also show you how to change the color of the marker and how to add more if need be. This tutorial will assume you have some previous background information on rails. Don’t worry, this is still a very basic beginner level tutorial and not complicated at all.
Examples used in this tutorial will be from my mod 2 project at Flatiron School that uses Ruby 2.6.1 and Rails 6.0 (a basic setup that wasn't generated with scaffold).
Step 1: Set up
You will need to create a rails project. To get started, In your terminal, you will input:
rails new “your_project_name"After creating your new rails project you now will need to generate some models, controllers, and views. This part is all up to you on how those files will be generated. I personally used:
rails g resource ExampleNameagain this is solely dependent on you.
Make sure you have these columns in your table:
t.float “latitude” t.float “longitude” t.string “address”
Step 2: Geocode Gem
We will not explicitly define what latitude and longitude is (unless you want to) because the geocode gem will do that for us. Geocode will take your address and turn it into latitude and longitude coordinates and google will take that information and display a map of those coordinates.
In your terminal run:
gem install 'geocoder’ or in your gem file include:
gem ‘geocoder’now you will need to:
bundle installAfter successfully installing the geocode gem you will then need to go to your model that has the address/latitude/longitude columns and insert:
geocoded_by :address
after_validation :geocode, if: :address_changed? - (the if conditional will run the geocode if the address has changed as there is no point in running the gem if the address is the same.)
Step 4: Obtaining Google API
You will now need to obtain your own Google API key to be able to use the map. This is not as hard as it may seem. Please read on how to do so here! A couple of tips while doing this:
- Make sure to add an active billing account (don't worry unless you get 25,000+ visits to your website you will not be charged. Google also gives you credit towards your account.)
- Only request Static Maps API as you won't need anything else.
- Restrict your API to only be used on a certain website page. If someone gets ahold of your API they will not be able to use it on any other website.
Step 5: Custome Credentials(optional but not really)
The reason this is “optional but not really” is because you don't have to hide/secure your API key to run a map but if you don't anyone can inspect your website HTML and see/copy your Google API. Skip this step if you don't want to make a custom credential for your Google API.
In your terminal inside your rails project insert:
rails credentials:editQuick note:
If your text editor is not set to default or you just want to open this up into a specific text editor you will need to run:
EDITOR="name_of_editor --wait" rails credentials:editThis line of code will tell your editor to wait before closing the file you need to add your credentials to. If you run the first code that doesn't include the wait command and the file that opens up is blank, you will need to run the wait command.
You should see that a “credentials.yml.enc” file and a “master.key” file should have generated if you didn't have one already and the file you will need to edit. Insert the master key into your “.gitignore” file so you don’t push your master.key to GitHub(rails does this automatically but to be safe).
Like I said before, if this file is blank then you need to tell your editor to wait. Delete the “credentials.yml.enc” and “master.key” file and start this step over.
Now we will add our Google API by inserting
name_you_choose: "your_api_key"Make sure to save and close this file after inserting your credentials. To see if this worked you can run this command in your rails console(rails c).
Rails.application.credentials.name_you_choseThis should return your API key. If you get nil then either the file your edited wasn't saved/closed or you edited the blank page(maybe other issues as well). Vist this rails doc for more information on custom credentials.
Step 6: Methods
Assuming you’ve done everything correctly we will now need to add our method to our model file(or anywhere you want that its ability to be called on appropriately). Insert this code:
def google_map(center)"https://maps.googleapis.com/maps/api/staticmap?center=#{center}&size=500x500&zoom=17&key=#{Rails.application.credentials.name_you_chose}"end
- Notice, the end of the code is interpolating your API key. Do not forget to insert the name you made for your API key inside of your custom credential.
The above code snippet assumes you followed the custom credential step but if you did not; insert this code instead:
def google_map(center)"https://maps.googleapis.com/maps/api/staticmap?center=#{center}&size=500x500&zoom=17&key=[YOUR_API_KEY]"end
- You can manipulate the size of the Map itself or the zoom inside of the map as well by changing those factors inside of the URL.
With this done, you will now go to the view file that you’d like the Static Google Map to appear and insert:
image_tag google(center: model_name.address)or
image_tag google(center: [model_name.latitude, model_name.longitude].join(','))You should now see your static map appear in your browser!
Step 7: Markers
In the google_map(center) method you will want to add a marker directly into the Google Map URL.
- “size:” manipulates the size of the marker.
- “color:” manipulates the color of the marker.
- “label:” manipulates the label of the marker.
- “%7C” Pipe symbol: separates each property from one another.
markers=size:small%7Ccolor:red%7Clabel:C%7CYou will add this snippet after the “/staticmap?” and before “center=”.
"https://maps.googleapis.com/maps/api/staticmap?--><--center=#{center}&size=500x500&zoom=17&key=[YOUR_API_KEY]"- arrows inside URL represent where to add the markers snippet; do not include arrows.
Conclusion:
Integrating a Google Map API to your rails project is not as hard as it seemed before actually doing so. I tried to be as transparent as possible so you can avoid making the same simple mistakes I made; the internet lacks simple direct solutions to most of the issues I ran into. Below will be linked to other articles and videos that helped me through my issues.
