http://www.killswitchcollective.com/articles/65_google_maps_on_rails
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 mysql
2. Create a 'map_example_development' database and remove index.html from the public folder
cd map_example
rake db:create
rm public/index.html
3. The lets add a controller and the index action
script/generate controller location index
4. Lets install the YM4R/GM plugin
script/plugin install git://github.com/queso/ym4r-gm.git
5. 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>
====
Note that we have included two YM4R/GM lines in the head section. The GMap.header will include needed JavaScript files while the @map.to_html line generates JavaScript based on the parameters passed into the map object. We will be creating the @map object in our location controller.
6. Don't forget to specify the layout in /app/controllers/location_controller:
class LocationController < ApplicationController
layout 'frontend'
def index
coordinates = [23.11374751041939, 113.39768183810425]
@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"))
end
end
---
First we set our map coordinates into an array. The first number is the latitude and second is the longitude. These coordinates point to Navy Pier in Chicago, Illinois. If you would like to try a different area for this example, this easy tool (http://stevemorse.org/jcal/latlon.php) provides you the latitude and longitude for any address you want to use.. Next, we set the @map object to pass into our view. The @map object contains a new instance of the GMap class; the "map" string is the id of the div that will contain the map. The next line activates controls for our map. The large map activates the zoom option while the map type activates various views such as a regular map, satellite or terrain. Then we set the default map center and zoom. We first pass in the coordinates array so our location will be centered, then we pass in a integer to determine zoom level. This integer can be between 0 and 22, the higher the number the more the zoomed in the map will be. Finally, we add a marker overlay. The first argument is the coordinates and it is the only required argument need to add a marker. The title and info_window are both optional, title is the text that will display when your mouse is idle over the marker, while info_window is the text that will appear in the pop up box that appears after clicking the marker.
--
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"
10. Fire up your rails application and a map should appear.
...
- 大小: 359.3 KB
分享到:
相关推荐
Ajax使用XML、JavaScript和Web标准来创建高度交互性的Web页面,正如您在Google Maps和大量其他站点上所看到的页面那样。Ruby on Rails框架和Ajax的完美集成所产生的力量在一定程度上促成了该框架的繁荣。本文旨在...
您一定知道Ajax是这样一种编程技术,它使用XML、JavaScript和Web标准来创建高度交互性的Web页面,正如您在Google Maps和大量其他站点上所看到的页面那样。对Ajax这种使Web页面更具交互性的技术的大肆宣传已成过度之...
- Ruby on Rails 应用程序谷歌地图 API #HTTParty 连接到 openweathermap.org 这是一个 ruby on Rails 应用程序,它使用谷歌地图 API 来确定百老汇大会地址。 我使用 HTTParty gem 连接到 openweathermap.org ...
诺姆斯特Nomster是一个yelp克隆,与PostgreSQL数据库,Ruby on Rails,HTML5,CSS,BootStrap和Google Maps API集成在一起。 该应用程序包括一些功能,例如更新地点(特定餐厅的焦点),加载地图,用户评论每个地点...
JTRailsAddress使用Ruby On Rails和Javascript中的Google Maps API简化了邮政地址管理和地理编码。 安装 JTRailsAddress作为gem分发,这就是应在您的应用程序中使用它的方式。 在您的Gemfile中包含gem: gem 'jt-...
规划文件:内容使用的技术后端后端框架:Ruby on Rails(v5.1.5) 数据库:PostgreSQL(v2.1.3) 用户身份验证:使用BCrypt(v3.1.7)创建外部API:Google Maps API和Open Weather Map API前端前端框架:Javascript...
该堆栈包括一个结合了PostgreSQL数据库的Ruby-on-Rails后端和一个React-Redux前端。 Google Maps Directions API可用于创建和显示用户创建的跑步/骑行路线。 Google Static Maps API与Google Elevation Services...
利用Google Maps API和ActiveAdmin的EmberCLI和Ruby on Rails演示应用程序。 一些信息是从《欧洲啤酒指南》网站( )借来的。 先决条件 您需要在计算机上正确安装以下物品。 (带有NPM) 安装 git clone 此存储库 ...
StreetFlavors_FrontEnd
该应用程序的创建是在前端使用React.js和Redux,在后端使用Ruby on Rails / PostgreSQL。 该项目的设计和建造在一周内完成,随后又进行了一些其他改进。 强调 集成Google Maps API以创建运行路线并启用基于地理...
Google Maps和Google Places允许用户选择一个固定位置以用于其帐户。 可以根据用户喜好禁用或更新此功能。 使用首选编程语言标记帐户的可标记的。 这与结合在一起以搜索要标记的技能。 用户可以通过名称,位置或...
它在后端使用Ruby on Rails和PostgreSQL数据库,在前端使用React / Redux。 可以在以下位置实时查看: 不推荐使用 功能与实现 Google Maps API集成 现货指数和边界过滤 为了在地图上显示当前地点,实施了一种过滤...
FoodPlate-餐厅评论网站 ... 为了帮助用户找到餐厅,我在餐厅展示页面中使用了Google Maps API。 餐厅的图像存储在Amazon AWS / S3云中,以在生产环境中更快地加载图像。 该应用程序已部署在Heroku中。
该项目是通过引导的。 您将在下面找到一些有关如何执行...Ruby on Rails 在开发中代理API请求 配置代理后出现“无效的主机头”错误 手动配置代理 配置WebSocket代理 在开发中使用HTTPS 在服务器上生成动态<met
Perestrava 基于 Ruby on Rails 后端构建,具有 PostgreSQL 数据库和 React/Redux 前端。 该站点的第一个版本是作为一个项目构建的,截止日期为十天。 将添加更多功能,未来将进一步深化和扩展现有功能。 特征 使用...
诸如React、Angular、Vue等现代化的前端框架,以及Node.js、Ruby on Rails、Django等后端框架,能够提供稳定、快速、高效的开发环境。 另外,外卖系统处理大量数据,因此数据存储和数据库管理至关重要。使用可扩展...
为此,我们尝试将我们在其他 Web 框架中看到的最好的东西结合起来,包括用其他语言实现的框架,例如 Ruby on Rails、ASP.NET MVC 和 Sinatra。 Laravel 易于访问,但功能强大,为大型、健壮的应用程序提供了强大的...
诺姆斯特诺姆斯特* Yelp克隆与Google Maps API集成,并包括用户注释,星级,图像上传和用户身份验证等功能。 该应用程序使企业主可以通过创建场所,地址进行广告并提供有关其业务的简短描述。意见* Nomster应用程序...
布兰代斯校园GPS 一个 Rails 应用程序,可在校园内的位置之间生成人类可读的方向。 帮助访客在尝试寻找建筑物、办公室等时不会迷路。... 该视图是使用Google Maps API(包括Gmaps4rails gem)构建的,但是我们向用户