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
layout.html.erb: [gistpen id=”160″]
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:
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
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
The Mapstraction tutorial explains that this is there to tell Mapstraction the
id of the map
div. In their tutorial they use both
'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
'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:
and after some editing and tidying up I changed it to this:
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