星期二 四月 01, 2008

Google Maps on Rails with NetBeans(Part One)

Author: Gao Ang

Tutorial Requirements

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

Objective of our application

Our Google maps Rails mashup demo will accomplish the following tasks:

  1. A table will be created in the database that contents the location description information, such as address, longitude and latitude of the location, description.
  2. There will be a Google Maps with control bar in our browser, as well as a form of us to submit new location.
  3. 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.
  4. After user adds a new location, the new point will show up in the map.
  5. 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:

development:
adapter: mysql
encoding: utf8
database: gmaps_development
username: root
password:
host: localhost

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
def self.up
create_table:locationsdo |t|
t.column:address,:string,:limit =>100
t.column:description,:string,:limit =>100
t.column:lat,:decimal,:precision =>15,:scale =>10
t.column:lng,:decimal,:precision =>15,:scale =>10
end
end

def self.down
drop_table:locations
end

end

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: migrating =============
-- create_table(:locations)
-> 0.1720s
== 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:

>>include GeoKit::Geocoders
>> home = MultiGeocoder.geocode('100 Spear St,
San Francisco, CA')

=> #<GeoKit::GeoLoc:0x 30a 23ac @state="CA", @success=true, @lng=-122.393981, @precision="unknown", @city="San Francisco", @country_code="US", @lat=37.792528,@street_address="", @zip="94105">

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 < ActiveRecord::Base
acts_as_mappable:auto_geocode =>true
end

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: "", lat:#<BigDecimal:3063968,'0.37792528E2',12(12)>,lng:#<BigDecimal: 306374c,'-0.122393981E3',12(16)>>

>> Location.create(:address => "")

=> #<Location id: 2, address: "", lat: #<BigDecimal:2fff184,'0.37794391E2',12(12)>, lng: #<BigDecimal:2ffef04,'-0.122394831E3',12(16)>>

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:

127.0.0.1:3000: ABQIAAAAj5cpJ2swzFT77RVZXuP73BTX2XchcwgyHzp4Xo0DHRAzt2aLjhSg2ymVlJvVjBa7kWNgtqU8xxwIAQ

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'.


Then the controller file app/controllers/location_controller.rb has been created. There will be two methods in the controller 'index' and 'create', the code of index method looks like:

def index
@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 )

end

end

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:

<html>
<
head>
  <title>Map demo</title>
  <%= Cartographer::Header.header_for(request) %>
</
head>
<
body id="map">
   
<div id="main">
     
<%= yield :layout %>
   
</div>
</
body>
</
html>

And the index view (views/location/index.rhtml) looks like:

<h1>Add New Location</h1>
<
hr />
<% @map.zoom = 14 %>
<%
= @map.to_html(true) %>
<
div id="gmaps" style="width: 600px; height: 400px;"></div>

We put Cartographer tag in the head label. Cartographer plugin will interpret our code to Google Maps API JavaScript code to load the Google Maps in the page.

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.

More information

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!

About

This is Chinese Functional CA Team Blog. Any suggestion is appreciated.

Search

Archives
« 四月 2014
星期日星期一星期二星期三星期四星期五星期六
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
今天