John Yerhot – Weblog

NOTE:  THIS IS AN OLD POST AND THE INSTRUCTIONS MAY BE OUTDATED. YMMV

In my first real post in a year, I thought I’d share some Ruby stuff I’ve recently done – Integrating your Rails 2.0 app with Google Maps.

So, here is what we are aiming to accomplish: You are going to provide an address, say 123 Foobar St, Anywhere, MN 55812. We are going to send it to a geocoder, get the longitude and latitude, send that to Google, and get back the map information.

whew. Actually, its not nearly as hard as it sounds.

First, install the google-geocode gem:

sudo gem install google-geocode
The install the ym4r_gm, which will talk to Google for us.

script/plugin install svn://rubyforge.org/var/svn/ym4r/Plugins/GM/trunk/ym4r_gm
Alright, finally, include the google-geocode gem in your controller.

require 'rubygems'
require 'google_geocode'

Now, you will need to get an API key from Google, and then put that key in the newely created config/gmaps_api_key.yml (as Drew Bushaw points out) or hard code it (Which I do in the example). There should be three keys already in there, and they will work when using your local machine, but will not with anything other than localhost. Alternativly, if you want to hardcode it in, place it where I have “your api key here” in the next section.

Add to your page header (prolly your layout and view) to include the required API javascripts, etc…
<%= GMap.header %>
<%= @map.to_html %>

Ok, now heres the fun. To get the geocode information, simply:

gg = GoogleGeocode.new "your api key here" #hard coded
#not hardcoded
#gg = GoogleGeocode.new YAML.load_file(RAILS_ROOT +‘/config/gmaps_api_key.yml’)[ENV['RAILS_ENV']]
loc = gg.locate @property.full_address
Now, I have @property and full_address is its full address (123 Foobar, Somecity, MN 55812 for example). You can also try it without some vitals, such as zip code.

Now we have to send Google Maps the correct information:

@map = GMap.new("map_div")
@map.control_init(:small => true) #add :large_map => true to get zoom controls
@map.center_zoom_init([loc.latitude, loc.longitude],14)
@map.overlay_init(GMarker.new([loc.latitude, loc.longitude],:title => @property.name, :info_bubble => loc.address))

Notice, “map_div”, which will come into play in the next step. Some useful tid bits here include the :title, which will be the title of the pin on the map, :info_bubble which will appear when you hover over the pin, and where I specified “14″. Here you specify the altitude the map will be at. Experiment for whatever your needs are.

Now, the final thing you need to do is put this to work in your view.

<%= @map.div(:width => 493, :height => 300) %>

As you can see, I’ve specified a :width and :height. Now, fire everything up and you should get something similar to…

Now in my case I had people inputing address and if/when they enter one that is non-existent or incorrect, I had to catch it since a google-geocode will throw a big error if you give it bad information.

Enjoy!