The Google Maps API is without a doubt one of the most popular APIs available on the web today. It offers webmasters the ability to add mapping functionality, similar to maps.google.com, to their websites. All of Google Maps functionalities, including markers, directions, zoom options and satellite view are only a few lines of code away. But before we get started with the code portion, you will need a Google Maps API key.
Getting a Google Maps API key takes a minute and costs nothing. Just sign in to your Google Account (I am sure you have one) and head to http://code.google.com/apis/maps. On the right hand side you will see ‚How Do I Start, where you will just simply click on Step 1 "Sign up for a Google Maps API key". Then enter your site's live domain, accept the terms and click the "Generate API Key" button.
On the next page your unique API key will appear. Make sure that you copy and paste it to a safe location. Below the API key will be JavaScript examples to quickly get you started. In this tutorial, we will generate similar code with the use of some rails plug-ins. The most popular plug-in is the Yellow Maps for Ruby, also known as YM4R. Since there are other mapping APIs, this plug-in comes in a few flavors. Since we're doing Google Maps, we will use YM4R/GM.
1. Lets start by generating a new Rails application:
rails map_example -d mysql2. Create a 'map_example_development' database and remove index.html from the public folder
3. The lets add a controller and the index action
ruby script/generate controller location index4. Lets install the YM4R/GM plugin
ruby script/plugin install git://github.com/queso/ym4r-gm.git5. Add frontend.html.erb in app/views/layouts with the following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Google Maps Rails Example</title>
<%= GMap.header %>
<%= @map.to_html unless @map.blank? %>
</head>
<body>
<%= yield %>
</body>
</html>
6. Don't forget to specify the layout in app/views/location_controller:
layout "frontend"
coordinates = [41.8921254,-87.6096669]
@map = GMap.new("map")
@map.control_init(:large_map => true, :map_type => true)
@map.center_zoom_init(coordinates,14)
@map.overlay_init(GMarker.new(coordinates,:title => "Navy Pier", :info_window => "Navy Pier"))
8. Next open our view file located at app/views/location/index.html.erb and add the following:
<h1>Google Maps Rails Example</h1>
<%= @map.div(:width => 800, :height => 500) %>
9. Map the homepage to the index action of location by adding the following to config/routes.rb.
map.root :controller => "location", :action => "index"
ruby script/plugin install git://github.com/tobstarr/google-geocoder.git12. Next add the form to the bottom of the view:
<br />
<% form_for "new_location", :url => location_index_path, :html => { :method => :post } do %>
<label>Enter a new Location to map:</label><br />
<%= text_field_tag :new_location %>
<%= submit_tag "Map It" %>
<% end %>
def create
new_location = params[:new_location]
gg = GoogleGeocode.new("Your API Key Here")
gg_locate = gg.locate(new_location)
coordinates = [gg_locate.latitude, gg_locate.longitude]
@map = GMap.new("map")
@map.control_init(:large_map => true, :map_type => true)
@map.center_zoom_init(coordinates,14)
@map.overlay_init(GMarker.new(coordinates, :title => new_location, :info_window => new_location))
render :action => "index"
end
CATEGORIES
ARCHIVES
BOOKMARKED
