By Gao Ang on 四月 01, 2008
This tutorial requires the following technology:
- NetBeans 6.0 Ruby IDE or 6.1 Beta
- Ruby on Rails: 2.0.2
- Ruby: 1.8.6
- Database: MySQL
- Rails Gems: GeoKit, Cartographer
Our Google maps Rails mashup demo will accomplish the following tasks:
- A table will be created in the database that contents the location description information, such as address, longitude and latitude of the location, description.
- There will be a Google Maps with control bar in our browser, as well as a form of us to submit new location.
- Users could input specific address location and description, when these information submit by users, location will be translate to the longitude and latitude and store in the backend database.
- After user adds a new location, the new point will show up in the map.
- If user clicks the new marker, a popup tips will show up with the submitted information.
Okay, let get started to realize these kinds of functions.
Obtaining a Google Maps API Key
The Google Maps API lets us embed Google Maps in our own web pages. First of all, we should have a API key to make use of the Google Maps API. Go to the following address to sign up for the Google Maps API Key http://www.google.com/apis/maps/signup.html. Agree with the terms and conditions of Google Maps usage. Make sure to input the site URL and click "Generate API Key" to obtain the Google Maps API key for our site. Then we should copy the API key generated by Google Maps and we will use it in our configuration file later.
Creating the Ruby on Rails Project
Choose File > New Project in NetBeans. Select Ruby in the Categories field and Ruby on Rails Application in the Projects field and then click Next. Type 'gmaps' in the Project Name field. Choose MySQL as the backend database and then click Finish.
In the Projects window, expand the gmaps node. We could see that all the Rails folder has been generated by NetBeans Ruby IDE.
Then we should create a new database called gmaps_development. We use 'mysqladmin' tools to create this database. In the command line, input the following command:
mysqladmin -u root create gmaps_development
After the database is created, we should expand the 'config' node and add the database description in the database.yml file like this:
After the database configuration, we could use the Rake command 'rake db:migrate' to check whether or not our configuration is correct.
Add model for our project
Now, we are gonna add a new model 'location' for our application. In NetBeans Rails Generator, we select 'Generate->model' and input 'location' in the argument and click 'OK'. This action will generate a new model for us.
In the generated database migration file 'db/migrate/001_create_locations.rb', add the following code:
class CreateLocations < ActiveRecord::Migration
t.column:lat,:decimal,:precision =>15,:scale =>10
t.column:lng,:decimal,:precision =>15,:scale =>10
In the database migration file, we add three parameters (address, description, latitude, longitude) for our model location. And we also assign the type and precision of these parameters.
Then right click the gmaps project and select 'Migrate Database-> To Current Version' to synchronize the database migration task with the database scheme. We could see the feedback from the console widow like this:
== 1 CreateLocations: migrated (0.1720s) =======
Then the table locations have been created with the columns address, description, latitude and longitude.
Installing the GeoKit and Cartographer Gem
In the command line of our application folder, input the following command to install the GeoKit gem:
ruby script/plugin install svn://rubyforge.org/var/svn/geokit/trunk
After the installation, we could test the GeoKit first in the Rails console. GeoKit use Google, Yahoo and Geocoder.us for geo-coding (to translate the real address to latitude and longitude). GeoKit should copy your Google Maps API Key to the file config/envirnoment.rb, after the sentence 'GeoKit::Geocoders::google ='. Now, right click gmaps project and then select 'Rails console' to load Rails console in NetBeans. Type in:
>> home = MultiGeocoder.geocode('100 Spear St,San Francisco, CA')
We use parameter 'home' to receive the result of real address geo-coding. In the Rails console, we will get the country code, zip code, lng and lat information according to the address '100 Spear St, San Francisco, CA'.
Then we will use the auto coding function of GeoKit to store our address information in the database. In the model app/models/location.rb, add the following sentence:
class Location <
Now we back to the Rails console, use the following command to create the new record for the location model:
>> Location.create(:address => "")
=> #<Location id: 1, address:
>> Location.create(:address => "")
=> #<Location id: 2, address:
"", lat: #<BigDecimal:2fff184,'0.37794391E2',12(12)>, lng:
Then one record has been added to the Locations table. In the next step, we will use marker to put these record in the locations table.
To make it easy to use Google Maps API in our application, we need another Ruby gem and we should download the Cartographer plugin from the project homepage(http://cartographer.rubyforge.org/) to help us embed Google Maps API in our pages. After download the Cartographer gem, unzip the plugin to the folder vendor/plugins, and move the configuration file cartographer-config.yml to the directory config in the gmaps application.
Of course, we should add the Google API Key to cartographer-config.yml file like this:
Add controller for our project
Now we will create a controller named 'location'. Open the Rails Generator dialogue and fill the 'Name' field with location and then click 'OK'.
@locations = Location.find(:all)
@map = Cartographer::Gmap.new("gmaps")
@map.controls = [ :large, :scale ]
@map.debug = true
@map.center = [37.79, -122.4]
@locations.each do |location|
@map.markers << Cartographer::Gmarker.new(:name => "location_" + location.id.to_s, :position => [location.lat, location.lng], :info_window => location.description, :map => @map )
Here we accomplish there tasks in the index method. First, use 'Location.find(:all)' to get all the records in the database. Second, mark the address to the Maps with Google Maps API. And then put the location information in the Maps with the Google Maps API.
We use the plugin Cartographer to help us to generate the New Maps with Google Maps, the id of the map is gmaps, and this id should be coordinate with the div label in the pages.
Besides, we use Cartographer to define the control bar and the scale bar of the Maps, and use @map.center to set the center position of the map.
Then in the next loop, we get the record from the table and use @map.markers to generate markers of the map. And also display the description sentence in popup windows.
After the index controller, we will focus on the index view and location layout. The location layout (views/layouts/location.rhtml) looks like:
<%= Cartographer::Header.header_for(request) %>
<%= yield :layout %>
And the index view (views/location/index.rhtml) looks like:
<h1>Add New Location</h1>
<% @map.zoom = 14 %>
<%= @map.to_html(true) %>
<div id="gmaps" style="width: 600px; height: 400px;"></div>
Now let's start the server and open browser to look at what we get from the above code.
We could see a map with two point markers in the final page. These two point markers are the record from the table that we added just now.
You can find additional information about Ruby support in NetBeans on its wiki page: http://wiki.netbeans.info/wiki/view/Ruby.
Various demos and tutorials are available from the main Ruby documentation page: http://www.netbeans.org/kb/60/ruby/index.html.
Finally you can download the NetBeans IDE for free from the following URL: http://www.netbeans.org/community/releases/60/index.html. You can either choose to install a small version of the Ruby-only IDE (a special bundle is provided) or full-blown Java IDE with Ruby support. It is also possible to add Ruby support to the Java-only IDE using Tools | Plugins.
In the next part of the series, we will discuss how to add locations in the rails project. As well as how to show up popup window in our map.
In the meantime, make sure to try out Ruby support in NetBeans. If you develop in Ruby a lot, you may find that NetBeans is the IDE you have been looking for!