Google Maps on Rails with NetBeans (Part Two)

Author: Gao Ang

Once we get the Google
Maps in our browser, we could see two point markers that we added in the final
page. Now we take a glace at the JavaScript code which generate by our Rails
application:

<html>

<head>

  <title>Map demo</title>

 

<script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAj5cpJ2swzFT77RVZXuP73BTX2XchcwgyHzp4Xo0DHRAzt2aLjhSg2ymVlJvVjBa7kWNgtqU8xxwIAQ'
type='text/javascript'></script>

</head>

<body id="map">

    <div id="main">

      <h1>Add New Location</h1>

<hr />

 

<script type="text/javascript">

var gmaps;

 

var location_3;

function location_3_infowindow_function(){

  location_3.openInfoWindowHtml("")

}

var location_4;

function location_4_infowindow_function(){

  location_4.openInfoWindowHtml("")

}

function initialize_gmap_gmaps() {

if (!GBrowserIsCompatible()) return
false;

gmaps = new GMap2(document.getElementById("gmaps"));

// initialization the center point of our map

gmaps.setCenter(new GLatLng(37.79, -122.4), 14);

  // set the default
type of the map

  gmaps.setMapType(G_NORMAL_MAP);

  // add control bar
for the map

  gmaps.addControl(new GLargeMapControl());

  gmaps.addControl(new GScaleControl());

  // create every
markers from the array @markers

  location_3 = new GMarker(new GLatLng(37.792528, -122.393981));

// add listener on our map

  GEvent.addListener(location_3, "click", function() {location_3_infowindow_function()});

    // add user
marker to the map

    gmaps.addOverlay(location_3);
 
  location_4 = new GMarker(new GLatLng(37.794391, -122.394831));

  GEvent.addListener(location_4, "click", function() {location_4_infowindow_function()});

    gmaps.addOverlay(location_4);

}

 

if (typeof window.onload != 'function')

  window.onload = initialize_gmap_gmaps;

else {

  old_before_cartographer_gmaps
= window.onload;

  window.onload = function() {

    old_before_cartographer_gmaps();

    initialize_gmap_gmaps();

  }

}

</script>

<div id="gmaps" style="width: 600px; height: 400px;"></div>

</div>

</body>

</html>

 

In the final page, Rails plugin
Cartographer help
us to generate most of our Google Maps API code. And then mark our location in
the final map.

After the above work, let’s
make some supplement for our gmaps application. We will create a form and let
user add the address in the page with the auto-geocoding provided by the GeoKit.

First, we should add a new method in the controller location, we define create method to accept
the user input. After that we will
redirect our page to the index method. Our code in the create method looks like:

  def create

    @location = Location.create(params[:location])

    redirect_to :action => "index"

  end

Then we will add the corresponding code in the index
view. When user post the form to location controller,
the
create method will deal with the new location. The supplement code in
the index view looks like:

<h2>Add New Place</h2>

<% form_for :location, :url => { :action => :create } do |f| %>

  <p>Address:

  <%= f.text_field :address %></p>

  <p>Description:

  <%= f.text_field :description %></p>

  <p><%= submit_tag "Add Location" %></p>

<% end %>
 

After the modification, let’s refresh the page, we could
see a new form with input field. Now we add a new location in the field:
333 Post St, San Francisco,
CA
and the description of the
field. Then click Add Location button to post our information. When the page
reloads, we could see a new place marker has been added in our map.

Now click the new marker that we added just
now. We could see a popup window with the description will show up in the map. The
final map looks like the following graph.


 

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!

评论:

发表一条评论:
  • HTML语法: 禁用
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
   
       
今天