Rails geopositioning with Google Maps

A common problem when building a Rails web application that deals with addresses is geopositioning. Geopositioning can have different meaning depending on what you’re trying to achieve. In this article and the following, I will describe my solution to the following problems :

1. The user enters an address and you need to validate it and geoposition it (latitude & longitude) on a map.
2. You need to display the google map for that given address on a webpage.

Today, I will show you how I did the first step using the YM4R/GM plugin.

1- Setup the plugin and get you Google Maps key

First thing to do is to install the YM4R/GM plugin plugin. There is also a gem but it seems to be a stripped-down version of the plugin. I couldn’t get it working so I would advise to use the plugin :

script/plugin install svn://rubyforge.org/var/svn/ym4r/Plugins/GM/trunk/ym4r_gm

The plugin creates a file in your config folder named gmaps_api_key.xml. You need to enter your Google Maps API keys for the different environments. You can get the keys here.

2- Create the model

Next thing to do is to create your Geolocation activerecord model. You need to at least have those four attributes :

create_table "geolocations", :force => true do |t|
  t.string   "address"
  t.string   "city"
  t.float    "latitude"
  t.float    "longitude"
end

You might also want to add the country and postal code to the mix. But in most case, Google Maps will be able to return you a location with just a street address and a city.

3- Set the geolocation on the before_save

When you create a new gelocation record, you want to geoposition it. Here’s my code in the Geolocation.rb model :

before_save :set_geolocation

def set_geolocation
  if changes['address'] || changes['city'] || !mapped?
    results = Geocoding::get(complete_address)
    if results.status == Geocoding::GEO_SUCCESS
      self.latitude, self.longitude = results[0].latlon
    else  
      self.latitude, self.longitude = nil
    end
  end
end

def complete_address
  [address, city].select(&:present?).join(', ')
end

def mapped?
  latitude && longitude
end

What this does is set the latitude and longitude for the given address on the before_save callback. We first check if the address or the city changed and if so we try to get a geocoding. If the API responds with SUCCESS, we set the latitude and longitude with the first result. If the API failed to return a valid address, we set the latitude and longitude to nil. We can check if the address was mapped using the mapped? method.

4- Wrap it up

Geopositionning the address is only the first part of the problem. Next week I’ll show you how to use the latitude and longitude information we stored to display Google maps in your webpages.

Next week : How to display a google map for a geopositioned address

Distinguish your environments with favicons

I have to admit it, I’m a real neat freak when it comes to my desktop organization. The same goes with Firefox. I like to keep it clean and minimalistic. That’s why I’m using a few Firefox extensions and scripts to hide bookmarks and tab titles.

When I developed SalsaJungle.com, I was sometimes confusing my development and production websites. I know it doesn’t sound too clever but there are times when I reloaded a page after a fix only to realize that I was looking at the production site. That’s what happen when you multitask between development and client support.

Notice the last two tabs which are running the same application on two different environments

Well I took the matter in hands and simply created a second favicon with a different background color for my development environment. I named it favicon_dev.ico and put it in the same directory as the favicon.ico. Then I added this little snippet of haml code to my application.html.haml template :

- if RAILS_ENV == 'development'
  %link{ :rel => "shortcut icon", :href => "/favicon_dev.ico" }

With this code, I force the path of the favicon to favicon_dev.ico in the development environment.

Et voila! Now I know at a glance that blue is for development and red for production!

5 tips for a viral Facebook Connect application

This the fourth article of a series of 4 articles on Facebook Connect.

This fourth and last article about Facebook Connect gives you a few tricks to gain a viral effect with your application on Facebook. This is basically done by getting friends of your users to notice your application.

1- Post updates on your users walls

Using the Stream.publish function, you can post news on your users walls that will appear on their friends newsfeeds. There are different ways to do this and it requires some extra permissions from you users if you wish to auto-publish without users approval each time. Personally, I prefer to let my users decide whether they want the application to publish on their feed and they can personalize the content of the message :

The dialog asking to publish on your wall

2- Add the friends invitation widget

The invitation widget lets your users invite friends to try your application. I used this code to get it done. Unfortunately, the restriction on how many friends you can invite per day is rather draconian.

Friends invitation dialog

3- Add the Fanbox widget

This widget is a simple snippet of code that adds a Fanbox to your page. When a Facebook user become fan of you application, it’s displayed in his friends newsfeed highlights (column on the right).

SalsaJungle.com Fanbox

4- Use Facebook comments system

Another very interesting widget that you can configure in a minute is the comment box. You get the basic comment thread (Facebook style) and the user can choose to publish his comment on his profile. And this equals more visibility for your app.

The Facebook comment box

5- Optimize the Facebook links to your site

When a Facebook user posts a link to your site in a status update or in a message to a friend, you want it to get noticed. Facebook automatically checks for images on your website to display with the link. It also figures out a description by parsing the text on page.

But instead of relying on luck, you should control all of this by using the description meta-tag and the link tag in your HTML header. You tell exactly Facebook which image and description to use when a link is made to a page of your site :

<meta name="description" content="My application description" />
<link rel ="image_src" href="http://montreal.salsajungle.com/images/logo_for_fb.gif">

Note that the image_src href has to be absolute in order to work.

That’s it! Your site should now get all the attention it deserves. Let me know in the comments if you have other ways to promote your Facebook Connect website.