How to integrate Google Maps in a Rails app

The major part of my experiment was going to be the integration with Google Maps. At first, I was a bit apprehensive about it, but Ruby on Rails being a community oriented language, I found a couple of quite useful plug-ins. With them, finding a location based on address or geocode or finding nearby places based on certain radius of a location were not too hard.

There is actually an excellent book also, called Beginning Google maps applications with Rails and Ajax. But the problem with the book is that it was geared towards more for java developers using rails. Thus, its major functions were javascripts and it showed how to talk to rails app. In my case, since I wanted simple features and I didn’t want to take time to learn javascript, I decided to find a simpler way.

And I found that for things I wanted to do, I could do with YM4R/GM and Geokit. There are other excellent tutorials out there like the one by Jason Gilmore on Developer.com.

Let’s begin.

1. Sign-up for Google Maps API by going to here. For development environment, you can use either http://localhost:3000 or http://127.0.0.1:300 as the website URL. Copy the API key.

When you move to production environment, make sure you come back here to get another key for production URL.

Continue reading

Post to Twitter

Driving direction and link to edit playground information

I just updated the PlaygroundRUs site with driving direction option in info text bubble of a marker. Two buttons, “To Here” and “From Here”, are available. For now, they just open a new tab or window to Google Maps page with destination or source address of the playground.

There is a way to make it more dynamic – clicking “To Here” or “From Here” brings up a text field, where it asks where from/to address. However, this requires the logic to be placed in the javascript world. In my code, all the markers and info text bubble information are prepared in Ruby. To make it more dynamic, I need to put the logic in javascript, and it will take a while to do it.

By the way, there is an excellent set of tutorials that show how to work with Google Maps API here, all in javascript.

I also moved “Edit Playground Info” link to next to the Playground name to make it more obvious.

Next Up: Integrating with Facebook Connect.

Post to Twitter