Google maps inside a Ruby on Rails application
This is meant to be a generic tip for embedding a Google Map widget, with a dynamically loaded address, in the context of a Ruby on Rails application. It’s not a tutorial, so you will have to adjust the following example according to your model. I’m using RoR 2.02, I don’t know if there’s something different in the previous versions.
First of all you need a Google Maps API Key. In order to do this you have to insert your website URL. If you, like me, work on your machine with a local server, you have to write “http://localhost:3000″ (3000 is the Mongrel port in my case). Once you have submitted the URL you will be presented with a nice page containing your key and a some basic example code.
Since Google Maps only understands coordinates numbers, we need a way to convert a human-readable address string. Luckily, the API gives us a so called geocoding service for free, so that we can simply pass an address and, if the service finds it, get the respective coordinates. You can refer to the source of this page for reference. From that page you can copy and paste the two <script> tags replacing the api key with yours. I created a layout for the application (application.html.erb) and put the <script> tags in the <head>. Note that we have two functions, initialize() and showAddress():
- Initialize() creates a new GMap2 object and binds it to the map_canvas element (a simple div). It also sets a default center for the map, but you can delete that line if you want.
- showAddress() gets the coordinates of the address through the geocoding service and pass them to an anonymous function which, in turn, sets the center of the map and puts a marker on it according to this coordinates. If the address doesn’t exists it shows an alert.
Note also that in the Google example page source there are two events in the body tag, but we should maintain the onunload event only. This magic GUnload() function, according to the official docs, cleans up some resources and prevents memory leaks in IE. The onload event it’s useless because we’ll call initialize() when we’ll need it.
Now, suppose you have a view, where you usually show the details of a customer object, called customer/show.html.erb and you want to embed a map in it in order to show the address of the customer. This property will probably be accessed with @customer.address and will contain a real-world address in a string format. All you have to do is to create a <div> like this:
... <div id="map_canvas" style="width: 500px; height: 300px"> <%= update_page_tag do |page| page.call 'initialize' page.call 'showAddress', @customer.address end %> </div> ...
Note that the div id (map_canvas) is referenced in the initialize() function previously copied from the Google example. This <div> will be our map container.
I will not go into the details of the erb code snippet inside the div, it simply creates a <script> tag with two function calls. First the initialize() function and then the showAddress() function, passing a dynamic parameter containing the current @customer address.
Now you can open your customer details and see for yourself.
That’s all. Simple and easy! I can give some help if there’s something not fully clear (also due to spaghetti-english 
)
