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) to include the required API javascripts, etc…
<%= GMap.header %>
<%= @map.to_htm %>
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!
-
1
Pingback on Feb 14th, 2008 at 8:12 pm
[...] Integrating Google Maps in your Rails 2.0 application [...]
Leave a Comment
Latest Entries
- Google Street View Car in Duluth
- Uncrappifying your Qwest Modem (if it is a GT-701WG that is)
- Moved Hosts again..
- m night sucksalot
- Our new(ish) hod rod(s) (err… bikes…)
- Seattle Day One
- rentalrundown.com and Seattle trip
- Moving Day
- Mongrel + Nginx: Deploying to a subdirectory
- I’m on Alexa.. no. 1,257,367 world wide..
Mar 8th, 2008 at 6:12 pm
A couple of things I noted while following your directions:
To use the GM API Key you specified in config/gmaps_api_key.yml:
Use:
gg = GoogleGeocode.new YAML.load_file(RAILS_ROOT + ‘/config/gmaps_api_key.yml’)[ENV['RAILS_ENV']]
Instead of:
gg = GoogleGeocode.new “your api key here”
info_bubble did not work for me so I changed it to info_window:
Use: :info_window => loc.address
Instead of: :info_bubble => loc.address
Just to round out the tutorial for those who have not used YM4R_GM (like me):
When putting the map div into your view also make sure to put this in the (if you use a layout then put it there):
Mar 8th, 2008 at 6:13 pm
This got cut-off I believe.
When putting the map div into your view also make sure to put this in the (if you use a layout then put it there):
Awesome tutorial man. I truly appreciate your help on this!
Mar 9th, 2008 at 7:58 am
Thanks for the additions Dewey!
Apr 17th, 2008 at 7:35 pm
I followed your instruction, but the browser an empty page.
I had to add
in the header, and I finally at least could see the google he google logo and controls.
However it doesn’t show the map.
When I change the zoom with the slide control I can see, that google tries to fetch the map data from the server.
But no Map is displayed.
Apr 18th, 2008 at 7:17 am
Hey Peter,
Sounds like the Goecoding plugin isn’t getting the address info like it wants.
You might want to make sure that loc.latitude and loc.longitude are getting correct values.
Good luck!
May 15th, 2008 at 12:52 am
I tried to integrate google map as per the tutorial, somehow its not working.There is no error but the map is not visible in the view (html page of the application). The space for the map (specified width and height) is left blank.
Is there anything else to be done to see the map on the page?
May 20th, 2008 at 3:15 am
The Google Maps key is the primary configuration setting you need to get started. There are some others you will need for later chapters, however. You can add these to config/environments/development.rb file as well:
TIGERLINE_DIR=”/path/to/your/tigerline/data”
YAHOO_API_KEY=”your_yahoo_api_key”
UK_POSTCODE_DIR=”/path/to/your/uk/postcode/data” #the directory, not the file
May 29th, 2008 at 8:14 pm
I had some problems as well. First, gmaps_api_key.yml was not created in RAILS_ROOT/config/ so I manually moved in gmaps_api_key.yml.sample. Then I get the same blank screen. This blog is really frustrating, as it leaves out the source code in the comments.
May 30th, 2008 at 7:10 am
Thanks everyeone. I’ve updated the post to include Dewey’s suggestion and corrected my mistake:
I suggested putting your api key in the gmaps_api_key.yml file located in /config, but my example code showed the api key hardcoded. In my project I had it hard coded and it worked beautifully for me. I’ve added Dewey’s code in the example, both should work for you.
Also, code can be inserted in a comment, but it must be wrapped in <code></code> tags.
<code></code>Jun 24th, 2008 at 10:10 am
whoops, that last post got screwed, here it is again
Great tutorial! But I noticed a mistake, instead of
, it should be
Jun 24th, 2008 at 6:14 pm
@Matt
I think your code got parsed out. The post right above yours explains how to get code to look right.