Rails 5、Gmaps4Rails - 设置
Rails 5, Gmaps4Rails - setup
我多年来一直在努力弄清楚如何将 gmaps4rails 整合到 rails 应用程序中。
我制作了一个全新的应用程序并进行了全新尝试。
我不知道出了什么问题。我正在寻找完整且最新的设置说明。许多 SO post 引用旧版本的依赖项，这些依赖项最终表示问题已在更高版本中解决。
目前，我认为：
<script src="//maps.google.com/maps/api/js?v=3.23&key=<%= ENV['GOOGLE_MAPS_API_KEY'] %>"></script>
<script src="//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js" type="text/javascript"></script>
<div style='width: 800px;'>
<div id="map" style='width: 800px; height: 400px;'></div>
</div>
<script type="text/javascript">
handler = Gmaps.build('Google');
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
markers = handler.addMarkers(<%=raw @hash.to_json %>);
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
});
</script>
在我的 application.js 中，我有：
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require moment
//= require bootstrap-datetimepicker
//= require pickers
//= require underscore
//= require gmaps/google
//= require markerclusterer
//= require_tree .
我已将 underscore.js 的生产版本保存在我的 vendor/assets/javascripts 文件夹中。我还将 markerclusterer.js 另存为同一文件夹中的文件。
在我的 gem 文件中，我有：
gem 'geocoder'
gem 'gmaps4rails', '~> 2.1', '>= 2.1.2'
gem 'countries'
gem 'country_select'
在我的控制器中，我有：
class AddressesController < ApplicationController
def index
end
def show
@hash = Gmaps4rails.build_markers(@address) do |address, marker|
marker.lat address.latitude
marker.lng address.longitude
end
end
def new
@address = Address.new
end
def create
@address = Address.new(address_params)
# authorize @address
respond_to do |format|
if @address.save
format.html { redirect_to @address, notice: 'Address was successfully created.' }
format.json { render :show, status: :created, location: @address }
else
format.html { render :new }
format.json { render json: @address.errors, status: :unprocessable_entity }
end
end
end
private
# Use callbacks to share common setup or constraints between actions.
def set_address
@address = Address.find(params[:id])
# authorize @address
end
# Never trust parameters from the scary internet, only allow the white list through.
def address_params
params[:address].permit(:unit, :building, :street_number, :street, :city, :region, :zip, :country, :time_zone, :latitude, :longitude)
end
def user_time_zone(&block)
Time.use_zone(current_user.time_zone, &block)
end
end
当我尝试使用地图渲染视图时，chrome 检查器显示错误为：
v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js 加载资源失败：服务器响应状态为 404（未找到）
chrome-extension://mkjojgglmmcghgaiknnpgjgldgaocjfd/content/contentScripts/kwift.CHROME.min.js:1271 未捕获语法错误：标识符 'findGoodContent' 已声明
util.js:221 Google 地图 API 警告：NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys
util.js:221 Google 地图 API 警告：退休版本 https://developers.google.com/maps/documentation/javascript/error-messages#retired-version
util.js:221 Google 地图 API 警告：InvalidKey https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key
我不明白这些错误中的任何一个，我找不到有关如何设置此 gem 以在 rails 中使用它的说明。我可以看到它已经被下载了很多——人们一定已经知道如何设置它了。我发疯了想弄清楚这个问题。
重新生成后 API 密钥
我尝试在 google 控制台上重新生成我的浏览器 API 密钥。
现在，当我尝试呈现页面时，出现以下控制台错误：
primitives.self-5b8a3a6….js?body=1:5 Uncaught ReferenceError: google is not defined(…)Gmaps.Google.Primitives @ primitives.self-5b8a3a6….js?body=1:5Gmaps.Objects.Handler.Handler.setPrimitives @ handler.self-2f220ca….js?body=1:122Handler @ handler.self-2f220ca….js?body=1:8build @ base.self-8dd1d1a….js?body=1:9(anonymous function) @ VM2063:2t.SnapshotRenderer.n.assignNewBody @ turbolinks.self-c5acd7a….js?body=1:6t.SnapshotRenderer.n.replaceBody @ turbolinks.self-c5acd7a….js?body=1:6(anonymous function) @ turbolinks.self-c5acd7a….js?body=1:6t.Renderer.t.renderView @ turbolinks.self-c5acd7a….js?body=1:6t.SnapshotRenderer.n.render @ turbolinks.self-c5acd7a….js?body=1:6t.Renderer.t.render @ turbolinks.self-c5acd7a….js?body=1:6t.View.e.renderSnapshot @ turbolinks.self-c5acd7a….js?body=1:6t.View.e.render @ turbolinks.self-c5acd7a….js?body=1:6t.Controller.r.render @ turbolinks.self-c5acd7a….js?body=1:6(anonymous function) @ turbolinks.self-c5acd7a….js?body=1:6(anonymous function) @ turbolinks.self-c5acd7a….js?body=1:6
turbolinks.self-c5acd7a….js?body=1:6 GET http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js t.SnapshotRenderer.n.assignNewBody @ turbolinks.self-c5acd7a….js?body=1:6t.SnapshotRenderer.n.replaceBody @ turbolinks.self-c5acd7a….js?body=1:6(anonymous function) @ turbolinks.self-c5acd7a….js?body=1:6t.Renderer.t.renderView @ turbolinks.self-c5acd7a….js?body=1:6t.SnapshotRenderer.n.render @ turbolinks.self-c5acd7a….js?body=1:6t.Renderer.t.render @ turbolinks.self-c5acd7a….js?body=1:6t.View.e.renderSnapshot @ turbolinks.self-c5acd7a….js?body=1:6t.View.e.render @ turbolinks.self-c5acd7a….js?body=1:6t.Controller.r.render @ turbolinks.self-c5acd7a….js?body=1:6(anonymous function) @ turbolinks.self-c5acd7a….js?body=1:6(anonymous function) @ turbolinks.self-c5acd7a….js?body=1:6
turbolinks.self-c5acd7a….js?body=1:6 GET http://localhost:3000/users/assets/images/grayscale.svg t.SnapshotRenderer.n.assignNewBody @ turbolinks.self-c5acd7a….js?body=1:6t.SnapshotRenderer.n.replaceBody @ turbolinks.self-c5acd7a….js?body=1:6(anonymous function) @ turbolinks.self-c5acd7a….js?body=1:6t.Renderer.t.renderView @ turbolinks.self-c5acd7a….js?body=1:6t.SnapshotRenderer.n.render @ turbolinks.self-c5acd7a….js?body=1:6t.Renderer.t.render @ turbolinks.self-c5acd7a….js?body=1:6t.View.e.renderSnapshot @ turbolinks.self-c5acd7a….js?body=1:6t.View.e.render @ turbolinks.self-c5acd7a….js?body=1:6t.Controller.r.render @ turbolinks.self-c5acd7a….js?body=1:6(anonymous function) @ turbolinks.self-c5acd7a….js?body=1:6(anonymous function) @ turbolinks.self-c5acd7a….js?body=1:6
util.js:221 Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keysuD.S @ util.js:221(anonymous function) @ js?v=3.23&key=:127(anonymous function) @ js?v=3.23&key=:47(anonymous function) @ js?v=3.23&key=:44(anonymous function) @ js?v=3.23&key=:47(anonymous function) @ js?v=3.23&key=:97(anonymous function) @ js?v=3.23&key=:44(anonymous function) @ js?v=3.23&key=:97(anonymous function) @ js?v=3.23&key=:44(anonymous function) @ js?v=3.23&key=:97(anonymous function) @ js?v=3.23&key=:44(anonymous function) @ js?v=3.23&key=:97jc @ js?v=3.23&key=:46gc.Qc @ js?v=3.23&key=:97(anonymous function) @ common.js:1
util.js:221 Google Maps API warning: RetiredVersion https://developers.google.com/maps/documentation/javascript/error-messages#retired-versionuD.S @ util.js:221(anonymous function) @ js?v=3.23&key=:127(anonymous function) @ js?v=3.23&key=:47(anonymous function) @ js?v=3.23&key=:44(anonymous function) @ js?v=3.23&key=:47(anonymous function) @ js?v=3.23&key=:97(anonymous function) @ js?v=3.23&key=:44(anonymous function) @ js?v=3.23&key=:97(anonymous function) @ js?v=3.23&key=:44(anonymous function) @ js?v=3.23&key=:97(anonymous function) @ js?v=3.23&key=:44(anonymous function) @ js?v=3.23&key=:97jc @ js?v=3.23&key=:46gc.Qc @ js?v=3.23&key=:97(anonymous function) @ common.js:1
util.js:221 Google Maps API warning: InvalidKey https://developers.google.com/maps/documentation/javascript/error-messages#invalid-keyuD.S @ util.js:221(anonymous function) @ js?v=3.23&key=:127(anonymous function) @ js?v=3.23&key=:47(anonymous function) @ js?v=3.23&key=:44(anonymous function) @ js?v=3.23&key=:47(anonymous function) @ js?v=3.23&key=:97(anonymous function) @ js?v=3.23&key=:44(anonymous function) @ js?v=3.23&key=:97(anonymous function) @ js?v=3.23&key=:44(anonymous function) @ js?v=3.23&key=:97(anonymous function) @ js?v=3.23&key=:44(anonymous function) @ js?v=3.23&key=:97jc @ js?v=3.23&key=:46gc.Qc @ js?v=3.23&key=:97(anonymous function) @ common.js:1
我也可以在终端中看到 rails s:
ActionController::RoutingError (No route matches [GET] "/assets/underscore-min.map"):
Parameters: {"id"=>"4"}
ActionController::RoutingError (No route matches [GET] "/users/assets/images/grayscale.svg"):
关于下划线路由错误，终端中的行指的是assets/underscore。我的文件结构是vendor/assets/javascripts然后文件保存为underscore.js（不是min.map）.
另一次尝试
我尝试用 v3.24 替换 js v3.23，这样就消除了上述警告消息。但是，我仍然无法获得地图来呈现地址。当我检查 chrome 控制台检查器时，我可以看到地址在 javascript 中得到确认，但纬度和经度详细信息不是：
handler = Gmaps.build('Google');
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
markers = handler.addMarkers([{"lat":null,"lng":null,"infowindow":"Unit 1\u003cbr\u003e34 Darling Street\u003cbr\u003eBuilding D\u003cbr\u003eBalmain East NSW 2041\u003cbr\u003eAustralia"}]);
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
});
我现在想知道这个问题是否与模型关联有关。
我有一个地址模型和一个组织模型。这些协会是：
地址：
belongs_to :addressable, :polymorphic => true, optional: true
组织：
has_many :addresses, as: :addressable
accepts_nested_attributes_for :addresses, reject_if: :all_blank, allow_destroy: true
在我的地址控制器显示动作中，我有：
def show
@hash = Gmaps4rails.build_markers(@address) do |address, marker|
marker.lat user.latitude
marker.lng user.longitude
# marker.title user.title
end
end
在我的组织控制器显示操作中，我有：
def show
@addresses = @organisation.addresses
@hash = Gmaps4rails.build_markers(@addresses) do |address, marker|
marker.lat address.latitude
marker.lng address.longitude
marker.infowindow address.full_address
end
end
带地图的部分在views/addresses/map.html.erb
当我尝试使用这些更改再次呈现页面时，出现了很多错误，它们都说：
js?v=3.24&key=AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc:37 Uncaught RangeError: Maximum call stack size exceeded
我读过其他 SO posts，其中人们遇到了这个错误，注释继续讨论 'recursive loops'。我似乎没有任何与这些错误中显示的代码相似的代码，所以我不确定如何处理这些消息。
我想知道我是否需要更改组织控制器操作以某种方式引用组织地址而不是一般地址（尽管如果是这样，那么我不明白控制台检查器如何显示正确的地址在地图部分的 js 中识别）。
任何人都可以提供详细的分步教程来帮助我解决这个问题吗？
其他有类似问题的人
我从其他SO post看到其他人也遇到过类似的问题。建议似乎是这个答案：
Gmaps4rails Maximum call stack size exceeded?
我想我已经这样做了——我在每个地址控制器和组织控制器中的显示操作都引用 lat/lng 而不是完整的单词（在数据库中使用）。
埃里克的建议
采纳 Eric 的建议，我从 gem 文件中删除了 gmaps4rails gem，并从 application.js
中删除了 require/gmaps 行
我将组织控制器的显示操作更改为：
def show
@addresses = @organisation.addresses.all
# @hash = Gmaps4rails.build_markers(@addresses) do |address, marker|
# marker.lat address.latitude
# marker.lng address.longitude
# marker.infowindow address.full_address
# end
end
此步骤与 Eric 对其标记控制器的索引操作的建议相同。我单独有一个地址控制器，它有一个类似于 Eric 的索引操作。在我的数据库中，地址是多态的并且属于组织。我正在尝试在组织显示页面上渲染地图，所以我认为这一步与 Eric 的建议一致。
接下来我将 addresses/_map.html.erb 更新为：
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<%= javascript_tag do %>
var addresses = <%= raw @addresses.to_json %>;
<% end %>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=<%= ENV['GOOGLE_MAPS_API_KEY'] %>&callback=initMap">
</script>
我在 app/javascripts 文件夹中为 addresses.js 创建了一个新文件：
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4
});
var bounds = new google.maps.LatLngBounds();
var n = addresses.length;
for (var i = 0; i < n; i++) {
var address = new google.maps.Address({
position: {lat: parseFloat(addresses[i].latitude), lng: parseFloat(addresses[i].longitude)},
title: addresses[i].name,
map: map
});
bounds.extend(address.position);
}
map.fitBounds(bounds);
}
当我保存所有这些并尝试时，屏幕上出现一个空的灰色框。
当我使用 chrome 检查器时，我可以看到：
//<![CDATA[
var addresses = [{"id":5,"unit":"1","building":"d","street_number":"34","street":"darling street","city":"Balmain East","region":"NSW","zip":"2041","country":"AU","time_zone":"International Date Line West","addressable_id":1,"addressable_type":"Organisation","description":"main_address","created_at":"2016-10-27T19:17:27.919Z","updated_at":"2016-11-08T22:48:16.978Z","latitude":"-33.85751","longitude":"151.193546"}];
//]]>
以上是db中的地址。但它并没有制作地图。
任何人都可以看到我需要做什么才能让地图显示地址吗？
当我查看 CHROME 控制台检查器时
我可以在控制台检查器中看到几个新错误。
他们是：
addresses.self-176b72f….js?body=1:9 Uncaught TypeError: google.maps.Address is not a constructor
这个post也有类似的问题。公认的解决方案是添加回调。我不知道如何或在哪里做。
Google Maps API v3 - TypeError: Result of expression 'google.maps.LatLng' [undefined] is not a constructor
首先尝试摆脱 "NoApiKeys"、"InvalidKey" 错误。您是否生成了如 this instruction 中所写的密钥？您确定将生成的密钥放入 ENV['GOOGLE_MAPS_API_KEY'] ?
这是我能得到的最小 Rails 应用 运行 Google 地图。
Ruby 2.3.1，Rails 5.0.0.1，不需要额外的 gem。
rails new gmaps
取消评论
gem 'therubyracer', platforms: :ruby
在 Gemfile 中
bundle install
rails generate resource marker name:string latitude:decimal longitude:decimal
rake db:migrate
app/controllers/markers_controller.rb:
class MarkersController < ApplicationController
def index
@markers = Marker.all
end
end
app/views/markers/index.html.erb:
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<%= javascript_tag do %>
var markers = <%= raw @markers.to_json %>;
<% end %>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=<%= ENV['GOOGLE_MAPS_API_KEY'] %>&callback=initMap">
</script>
app/assets/stylesheets/markers.scss:
#map {
height: 400px;
width: 100%;
}
app/assets/javascripts/markers.js:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4
});
var bounds = new google.maps.LatLngBounds();
var n = markers.length;
for (var i = 0; i < n; i++) {
var marker = new google.maps.Marker({
position: {lat: parseFloat(markers[i].latitude), lng: parseFloat(markers[i].longitude)},
title: markers[i].name,
map: map
});
bounds.extend(marker.position);
}
map.fitBounds(bounds);
}
在 rails c 中添加一些标记：
Marker.create(:name => 'Sydney', :latitude => -33.87, :longitude => 151.17)
Marker.create(:name => 'Uluru', :latitude => -25.363, :longitude => 131.044)
将您的 API KEY 添加到 bash 中的环境中：
export GOOGLE_MAPS_API_KEY="AIza.............................."
rails s
完成！
我用过这个answer and this Gmaps documentation。
您可能应该检查没有恶意代码被传输到 javascript，例如通过标记#name.
希望你已经对它进行了排序，但你的 JS 似乎对你的 api 键是错误的。
您收到 OOPS 错误了吗？
您需要使用包含 'v=3' 的更新版本。
<script src="//maps.google.com/maps/api/js?v3key=[API_KEY]"></script>
我多年来一直在努力弄清楚如何将 gmaps4rails 整合到 rails 应用程序中。
我制作了一个全新的应用程序并进行了全新尝试。
我不知道出了什么问题。我正在寻找完整且最新的设置说明。许多 SO post 引用旧版本的依赖项，这些依赖项最终表示问题已在更高版本中解决。
目前，我认为：
<script src="//maps.google.com/maps/api/js?v=3.23&key=<%= ENV['GOOGLE_MAPS_API_KEY'] %>"></script>
<script src="//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js" type="text/javascript"></script>
<div style='width: 800px;'>
<div id="map" style='width: 800px; height: 400px;'></div>
</div>
<script type="text/javascript">
handler = Gmaps.build('Google');
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
markers = handler.addMarkers(<%=raw @hash.to_json %>);
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
});
</script>
在我的 application.js 中，我有：
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require moment
//= require bootstrap-datetimepicker
//= require pickers
//= require underscore
//= require gmaps/google
//= require markerclusterer
//= require_tree .
我已将 underscore.js 的生产版本保存在我的 vendor/assets/javascripts 文件夹中。我还将 markerclusterer.js 另存为同一文件夹中的文件。
在我的 gem 文件中，我有：
gem 'geocoder'
gem 'gmaps4rails', '~> 2.1', '>= 2.1.2'
gem 'countries'
gem 'country_select'
在我的控制器中，我有：
class AddressesController < ApplicationController
def index
end
def show
@hash = Gmaps4rails.build_markers(@address) do |address, marker|
marker.lat address.latitude
marker.lng address.longitude
end
end
def new
@address = Address.new
end
def create
@address = Address.new(address_params)
# authorize @address
respond_to do |format|
if @address.save
format.html { redirect_to @address, notice: 'Address was successfully created.' }
format.json { render :show, status: :created, location: @address }
else
format.html { render :new }
format.json { render json: @address.errors, status: :unprocessable_entity }
end
end
end
private
# Use callbacks to share common setup or constraints between actions.
def set_address
@address = Address.find(params[:id])
# authorize @address
end
# Never trust parameters from the scary internet, only allow the white list through.
def address_params
params[:address].permit(:unit, :building, :street_number, :street, :city, :region, :zip, :country, :time_zone, :latitude, :longitude)
end
def user_time_zone(&block)
Time.use_zone(current_user.time_zone, &block)
end
end
当我尝试使用地图渲染视图时，chrome 检查器显示错误为：
v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js 加载资源失败：服务器响应状态为 404（未找到） chrome-extension://mkjojgglmmcghgaiknnpgjgldgaocjfd/content/contentScripts/kwift.CHROME.min.js:1271 未捕获语法错误：标识符 'findGoodContent' 已声明 util.js:221 Google 地图 API 警告：NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys util.js:221 Google 地图 API 警告：退休版本 https://developers.google.com/maps/documentation/javascript/error-messages#retired-version util.js:221 Google 地图 API 警告：InvalidKey https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key
我不明白这些错误中的任何一个，我找不到有关如何设置此 gem 以在 rails 中使用它的说明。我可以看到它已经被下载了很多——人们一定已经知道如何设置它了。我发疯了想弄清楚这个问题。
重新生成后 API 密钥
我尝试在 google 控制台上重新生成我的浏览器 API 密钥。
现在，当我尝试呈现页面时，出现以下控制台错误：
primitives.self-5b8a3a6….js?body=1:5 Uncaught ReferenceError: google is not defined(…)Gmaps.Google.Primitives @ primitives.self-5b8a3a6….js?body=1:5Gmaps.Objects.Handler.Handler.setPrimitives @ handler.self-2f220ca….js?body=1:122Handler @ handler.self-2f220ca….js?body=1:8build @ base.self-8dd1d1a….js?body=1:9(anonymous function) @ VM2063:2t.SnapshotRenderer.n.assignNewBody @ turbolinks.self-c5acd7a….js?body=1:6t.SnapshotRenderer.n.replaceBody @ turbolinks.self-c5acd7a….js?body=1:6(anonymous function) @ turbolinks.self-c5acd7a….js?body=1:6t.Renderer.t.renderView @ turbolinks.self-c5acd7a….js?body=1:6t.SnapshotRenderer.n.render @ turbolinks.self-c5acd7a….js?body=1:6t.Renderer.t.render @ turbolinks.self-c5acd7a….js?body=1:6t.View.e.renderSnapshot @ turbolinks.self-c5acd7a….js?body=1:6t.View.e.render @ turbolinks.self-c5acd7a….js?body=1:6t.Controller.r.render @ turbolinks.self-c5acd7a….js?body=1:6(anonymous function) @ turbolinks.self-c5acd7a….js?body=1:6(anonymous function) @ turbolinks.self-c5acd7a….js?body=1:6
turbolinks.self-c5acd7a….js?body=1:6 GET http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js t.SnapshotRenderer.n.assignNewBody @ turbolinks.self-c5acd7a….js?body=1:6t.SnapshotRenderer.n.replaceBody @ turbolinks.self-c5acd7a….js?body=1:6(anonymous function) @ turbolinks.self-c5acd7a….js?body=1:6t.Renderer.t.renderView @ turbolinks.self-c5acd7a….js?body=1:6t.SnapshotRenderer.n.render @ turbolinks.self-c5acd7a….js?body=1:6t.Renderer.t.render @ turbolinks.self-c5acd7a….js?body=1:6t.View.e.renderSnapshot @ turbolinks.self-c5acd7a….js?body=1:6t.View.e.render @ turbolinks.self-c5acd7a….js?body=1:6t.Controller.r.render @ turbolinks.self-c5acd7a….js?body=1:6(anonymous function) @ turbolinks.self-c5acd7a….js?body=1:6(anonymous function) @ turbolinks.self-c5acd7a….js?body=1:6
turbolinks.self-c5acd7a….js?body=1:6 GET http://localhost:3000/users/assets/images/grayscale.svg t.SnapshotRenderer.n.assignNewBody @ turbolinks.self-c5acd7a….js?body=1:6t.SnapshotRenderer.n.replaceBody @ turbolinks.self-c5acd7a….js?body=1:6(anonymous function) @ turbolinks.self-c5acd7a….js?body=1:6t.Renderer.t.renderView @ turbolinks.self-c5acd7a….js?body=1:6t.SnapshotRenderer.n.render @ turbolinks.self-c5acd7a….js?body=1:6t.Renderer.t.render @ turbolinks.self-c5acd7a….js?body=1:6t.View.e.renderSnapshot @ turbolinks.self-c5acd7a….js?body=1:6t.View.e.render @ turbolinks.self-c5acd7a….js?body=1:6t.Controller.r.render @ turbolinks.self-c5acd7a….js?body=1:6(anonymous function) @ turbolinks.self-c5acd7a….js?body=1:6(anonymous function) @ turbolinks.self-c5acd7a….js?body=1:6
util.js:221 Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keysuD.S @ util.js:221(anonymous function) @ js?v=3.23&key=:127(anonymous function) @ js?v=3.23&key=:47(anonymous function) @ js?v=3.23&key=:44(anonymous function) @ js?v=3.23&key=:47(anonymous function) @ js?v=3.23&key=:97(anonymous function) @ js?v=3.23&key=:44(anonymous function) @ js?v=3.23&key=:97(anonymous function) @ js?v=3.23&key=:44(anonymous function) @ js?v=3.23&key=:97(anonymous function) @ js?v=3.23&key=:44(anonymous function) @ js?v=3.23&key=:97jc @ js?v=3.23&key=:46gc.Qc @ js?v=3.23&key=:97(anonymous function) @ common.js:1
util.js:221 Google Maps API warning: RetiredVersion https://developers.google.com/maps/documentation/javascript/error-messages#retired-versionuD.S @ util.js:221(anonymous function) @ js?v=3.23&key=:127(anonymous function) @ js?v=3.23&key=:47(anonymous function) @ js?v=3.23&key=:44(anonymous function) @ js?v=3.23&key=:47(anonymous function) @ js?v=3.23&key=:97(anonymous function) @ js?v=3.23&key=:44(anonymous function) @ js?v=3.23&key=:97(anonymous function) @ js?v=3.23&key=:44(anonymous function) @ js?v=3.23&key=:97(anonymous function) @ js?v=3.23&key=:44(anonymous function) @ js?v=3.23&key=:97jc @ js?v=3.23&key=:46gc.Qc @ js?v=3.23&key=:97(anonymous function) @ common.js:1
util.js:221 Google Maps API warning: InvalidKey https://developers.google.com/maps/documentation/javascript/error-messages#invalid-keyuD.S @ util.js:221(anonymous function) @ js?v=3.23&key=:127(anonymous function) @ js?v=3.23&key=:47(anonymous function) @ js?v=3.23&key=:44(anonymous function) @ js?v=3.23&key=:47(anonymous function) @ js?v=3.23&key=:97(anonymous function) @ js?v=3.23&key=:44(anonymous function) @ js?v=3.23&key=:97(anonymous function) @ js?v=3.23&key=:44(anonymous function) @ js?v=3.23&key=:97(anonymous function) @ js?v=3.23&key=:44(anonymous function) @ js?v=3.23&key=:97jc @ js?v=3.23&key=:46gc.Qc @ js?v=3.23&key=:97(anonymous function) @ common.js:1
我也可以在终端中看到 rails s:
ActionController::RoutingError (No route matches [GET] "/assets/underscore-min.map"):
Parameters: {"id"=>"4"}
ActionController::RoutingError (No route matches [GET] "/users/assets/images/grayscale.svg"):
关于下划线路由错误，终端中的行指的是assets/underscore。我的文件结构是vendor/assets/javascripts然后文件保存为underscore.js（不是min.map）.
另一次尝试
我尝试用 v3.24 替换 js v3.23，这样就消除了上述警告消息。但是，我仍然无法获得地图来呈现地址。当我检查 chrome 控制台检查器时，我可以看到地址在 javascript 中得到确认，但纬度和经度详细信息不是：
handler = Gmaps.build('Google');
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
markers = handler.addMarkers([{"lat":null,"lng":null,"infowindow":"Unit 1\u003cbr\u003e34 Darling Street\u003cbr\u003eBuilding D\u003cbr\u003eBalmain East NSW 2041\u003cbr\u003eAustralia"}]);
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
});
我现在想知道这个问题是否与模型关联有关。
我有一个地址模型和一个组织模型。这些协会是：
地址：
belongs_to :addressable, :polymorphic => true, optional: true
组织：
has_many :addresses, as: :addressable
accepts_nested_attributes_for :addresses, reject_if: :all_blank, allow_destroy: true
在我的地址控制器显示动作中，我有：
def show
@hash = Gmaps4rails.build_markers(@address) do |address, marker|
marker.lat user.latitude
marker.lng user.longitude
# marker.title user.title
end
end
在我的组织控制器显示操作中，我有：
def show
@addresses = @organisation.addresses
@hash = Gmaps4rails.build_markers(@addresses) do |address, marker|
marker.lat address.latitude
marker.lng address.longitude
marker.infowindow address.full_address
end
end
带地图的部分在views/addresses/map.html.erb
当我尝试使用这些更改再次呈现页面时，出现了很多错误，它们都说：
js?v=3.24&key=AIzaSyAleQgfNH3HRQVUCYnyAzp46xmXW7WrWrc:37 Uncaught RangeError: Maximum call stack size exceeded
我读过其他 SO posts，其中人们遇到了这个错误，注释继续讨论 'recursive loops'。我似乎没有任何与这些错误中显示的代码相似的代码，所以我不确定如何处理这些消息。
我想知道我是否需要更改组织控制器操作以某种方式引用组织地址而不是一般地址（尽管如果是这样，那么我不明白控制台检查器如何显示正确的地址在地图部分的 js 中识别）。
任何人都可以提供详细的分步教程来帮助我解决这个问题吗？
其他有类似问题的人
我从其他SO post看到其他人也遇到过类似的问题。建议似乎是这个答案： Gmaps4rails Maximum call stack size exceeded?
我想我已经这样做了——我在每个地址控制器和组织控制器中的显示操作都引用 lat/lng 而不是完整的单词（在数据库中使用）。
埃里克的建议
采纳 Eric 的建议，我从 gem 文件中删除了 gmaps4rails gem，并从 application.js
中删除了 require/gmaps 行我将组织控制器的显示操作更改为：
def show
@addresses = @organisation.addresses.all
# @hash = Gmaps4rails.build_markers(@addresses) do |address, marker|
# marker.lat address.latitude
# marker.lng address.longitude
# marker.infowindow address.full_address
# end
end
此步骤与 Eric 对其标记控制器的索引操作的建议相同。我单独有一个地址控制器，它有一个类似于 Eric 的索引操作。在我的数据库中，地址是多态的并且属于组织。我正在尝试在组织显示页面上渲染地图，所以我认为这一步与 Eric 的建议一致。
接下来我将 addresses/_map.html.erb 更新为：
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<%= javascript_tag do %>
var addresses = <%= raw @addresses.to_json %>;
<% end %>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=<%= ENV['GOOGLE_MAPS_API_KEY'] %>&callback=initMap">
</script>
我在 app/javascripts 文件夹中为 addresses.js 创建了一个新文件：
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4
});
var bounds = new google.maps.LatLngBounds();
var n = addresses.length;
for (var i = 0; i < n; i++) {
var address = new google.maps.Address({
position: {lat: parseFloat(addresses[i].latitude), lng: parseFloat(addresses[i].longitude)},
title: addresses[i].name,
map: map
});
bounds.extend(address.position);
}
map.fitBounds(bounds);
}
当我保存所有这些并尝试时，屏幕上出现一个空的灰色框。
当我使用 chrome 检查器时，我可以看到：
//<![CDATA[
var addresses = [{"id":5,"unit":"1","building":"d","street_number":"34","street":"darling street","city":"Balmain East","region":"NSW","zip":"2041","country":"AU","time_zone":"International Date Line West","addressable_id":1,"addressable_type":"Organisation","description":"main_address","created_at":"2016-10-27T19:17:27.919Z","updated_at":"2016-11-08T22:48:16.978Z","latitude":"-33.85751","longitude":"151.193546"}];
//]]>
以上是db中的地址。但它并没有制作地图。
任何人都可以看到我需要做什么才能让地图显示地址吗？
当我查看 CHROME 控制台检查器时
我可以在控制台检查器中看到几个新错误。
他们是：
addresses.self-176b72f….js?body=1:9 Uncaught TypeError: google.maps.Address is not a constructor
这个post也有类似的问题。公认的解决方案是添加回调。我不知道如何或在哪里做。
Google Maps API v3 - TypeError: Result of expression 'google.maps.LatLng' [undefined] is not a constructor
首先尝试摆脱 "NoApiKeys"、"InvalidKey" 错误。您是否生成了如 this instruction 中所写的密钥？您确定将生成的密钥放入 ENV['GOOGLE_MAPS_API_KEY'] ?
这是我能得到的最小 Rails 应用 运行 Google 地图。
Ruby 2.3.1，Rails 5.0.0.1，不需要额外的 gem。
rails new gmaps
取消评论
gem 'therubyracer', platforms: :ruby
在 Gemfile 中
bundle install
rails generate resource marker name:string latitude:decimal longitude:decimal
rake db:migrate
app/controllers/markers_controller.rb:
class MarkersController < ApplicationController
def index
@markers = Marker.all
end
end
app/views/markers/index.html.erb:
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<%= javascript_tag do %>
var markers = <%= raw @markers.to_json %>;
<% end %>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=<%= ENV['GOOGLE_MAPS_API_KEY'] %>&callback=initMap">
</script>
app/assets/stylesheets/markers.scss:
#map {
height: 400px;
width: 100%;
}
app/assets/javascripts/markers.js:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4
});
var bounds = new google.maps.LatLngBounds();
var n = markers.length;
for (var i = 0; i < n; i++) {
var marker = new google.maps.Marker({
position: {lat: parseFloat(markers[i].latitude), lng: parseFloat(markers[i].longitude)},
title: markers[i].name,
map: map
});
bounds.extend(marker.position);
}
map.fitBounds(bounds);
}
在 rails c 中添加一些标记：
Marker.create(:name => 'Sydney', :latitude => -33.87, :longitude => 151.17)
Marker.create(:name => 'Uluru', :latitude => -25.363, :longitude => 131.044)
将您的 API KEY 添加到 bash 中的环境中：
export GOOGLE_MAPS_API_KEY="AIza.............................."
rails s
完成！
我用过这个answer and this Gmaps documentation。
您可能应该检查没有恶意代码被传输到 javascript，例如通过标记#name.
希望你已经对它进行了排序，但你的 JS 似乎对你的 api 键是错误的。 您收到 OOPS 错误了吗？ 您需要使用包含 'v=3' 的更新版本。
<script src="//maps.google.com/maps/api/js?v3key=[API_KEY]"></script>