One of the projects I’ve been working on recently has been an upgrade project in Rails. The original code, when it was passed on to me was written in Ruby 1.8.3 and Rails 2.3.12. Suffice it to say that has been a multitude of fun little challenges that have cropped up while upgrading this app.

One of the challenges I recently faced on this project caused several hours of head-banging-against-the-wall frustration, and so in an attempt to help other people who might come across this same issue, heres how I went about it and the final solution…

First things first

Because the app was now in Rails 3.0.7, the way javascript plugins are dealt with has changed. Previously, the javascript files needed to run Mapstraction had been downloaded and placed in public/javascripts/mapstraction.

There were about 11 large-ish javascript files in this folder, however only the three that were relevant were being called in the layout.html.erb: [gistpen id=”160″]

In order to tidy this up and make sure the most up-to-date version of Mapstraction was being used, I removed all of the Mapstraction files from the javascripts folder. Following the Mapstraction tutorial, I now changed the scripts being called in layout.html.erb to:

[gistpen id=”163″]

As you can see, unlike previously, I’ve stated that I now want to use googlev3, as this is now the version that Google Maps API requires you use. But this means I’m calling the wrong version of the Google Maps API…a little tweaking means that my layout.html.erb now looks like this:

[gistpen id=”165″]

Creating the Map object

So I’m now calling the correct versions for both Mapstraction and Google Maps, but it’s not over yet. The next major change is going to be where the code is calling a new instance of Map. I found this in public/javascripts/map.js and the previous version included this:

[gistpen id=”167″]

There are only really two small changes that I made to this file as the rest of the code required by Mapstraction has remained pretty consistent between the different versions (thankfully!). The first modification I made was to change 'mapdiv' to 'map'.

The Mapstraction tutorial explains that this is there to tell Mapstraction the id of the map div. In their tutorial they use both 'map' and 'mapdiv' for this, however, out of personal preference I chose to change this to 'map' as I felt it was more readable.

Note: Don’t forget to change the id of the css for this div if you do make a change like this!

The second change I made was to update 'google' to 'googlev3' so that Mapstraction knows I’m using the newest version of the Google Maps API as the provider.

Viewing the map

So now everything else is updated, all that’s left is to update the view with the new id for the map div. Previously the view had looked like this:

[gistpen id=”148″]

and after some editing and tidying up I changed it to this:

[gistpen id=”151″]

As you can see, I changed the id for the map div to map to reflect the change I’d made on the Map object in map.js. I also refactored some of the code so that it was a little bit neater, more concise and readable.

So why all the head-banging?

Looking at the code changes that were required to make the maps work on this app, it all looks pretty simple and straight-forward, right?

The struggle that I had mostly related to the fact that there were loads of little bits to change, scattered across the app. Making sure that the id of the map’s div was the same as the one being called on the creation of the Map object, and making sure that this was the same as the id being called in the css file took a little bit of time.

As with so many things, however, the problem that took the longest to fix, turned out to be the smallest…in map.js, I had not changed 'google' to 'googlev3'….