Javascript Rails 5、Gmaps4Rails-设置

多年来，我一直在想如何将gmaps4rails整合到rails应用程序中

我制作了一个全新的应用程序，并尝试了全新的应用程序

我不知道出了什么问题。我正在寻找完整和最新的安装说明。许多文章提到了旧版本的依赖关系，最后说这个问题在以后的版本中得到了解决

目前，我认为：

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

我已将下划线.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

当我在终端查看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"):

关于下划线路由错误，终端中的行表示资产/下划线。我的文件结构是vendor/assets/javascripts，然后该文件保存为underline.js（而不是min.map）

另一次尝试

我尝试用v3.24替换JSV3.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

在我的组织控制员表演中，我有：

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帖子，其中有人犯了这个错误，这些笔记接着讨论了“递归循环”。我似乎没有任何代码类似于这些错误中显示的代码，因此我不确定如何处理这些消息

我想知道我是否需要更改组织控制器操作，以某种方式引用组织地址，而不是一般的地址（尽管如果是这样，那么我不明白控制台检查器如何显示js中从局部地图识别的正确地址）

有人能帮我一个详细的一步一步的教程，我可以用它来尝试解决这个问题吗

其他有类似问题的人

我可以从其他SO帖子中看到，其他人也有类似的问题。建议似乎是这样的：

我想我已经做到了——我在每个地址控制员和组织控制员中的表演动作都是指lat/lng，而不是完整的单词（在db中使用）

埃里克的建议

根据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的索引操作。在my db中，地址是多态的，属于组织。我试图在组织展示页面上呈现地图，因此我认为这一步与Eric的建议一致

接下来，我用以下内容更新了我的地址/_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>

这篇文章也有类似的问题。公认的解决方案是添加回调。我不知道该怎么做，也不知道该在哪里做

---

首先，尝试摆脱“noapikey”、“InvalidKey”错误。您是否生成了类似其所写的密钥？您确定已将生成的密钥放入ENV['GOOGLE\u MAPS\u API\u key']中吗？

这是我可以使用GOOGLE MAPS运行的最小的Rails应用程序

Ruby 2.3.1，Rails 5.0.0.1，不需要额外的宝石

rails new gmaps

取消注释

gem 'therubyracer', platforms: :ruby

归档

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/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);
}

将API密钥添加到bash中的环境：

export GOOGLE_MAPS_API_KEY="AIza.............................."

rails s

完成了

我用了这个和这个

---

您可能应该检查是否没有恶意代码被传输到javascript，例如通过标记#name。

希望您已经对其进行了排序，但您的JS似乎不适合您的api密钥。 您是否遇到OOPS错误？ 您需要使用更新版本，其中包含“v=3”

<script src="//maps.google.com/maps/api/js?v3key=[API_KEY]"></script>

我有。api键是橙色警告而不是红色错误。我按照安装说明去拿那些钥匙，所以我不知道为什么它不工作。您建议我在何处寻找生成密钥的替代说明，这些密钥在您尝试使用时不会出现组织警告问题。我在我的管理控制台中按照google/maps上的说明进行操作。不管怎样，我只是重新生成了要检查的密钥。现在，当我尝试时，我得到了一个额外的错误。当前控制台错误已在更新中张贴在上面。您的密钥是否与应用程序中的

ENV['GOOGLE\u MAPS\u API\u key']

相同？我是说

ENV['GOOGLE\u MAPS\u API\u key']=='your\u generated\u API\u key'

等于

true

？谢谢您的帮助。我还没有找到在我的应用程序中设置谷歌地图的方法。我会继续努力的。我认为，4年的努力可能会像总统选举那样迅速产生结果，这是不现实的。无论如何，谢谢。我找不到关于gmaps4rails和Rails 5的任何说明。您只是想在地图上显示标记，还是需要其他东西？我对开放层3有很好的体验。它只是javascript，所以应该可以与任何Rails版本一起使用。不确定gem的工作情况如何，但没有必要使用它。请参阅谷歌指南。@maxpleaner-您知道在哪里可以找到帮助理解如何在rails中使用MapJavaScript指南的资源吗。我正在努力，但一个人却一事无成。我不介意在没有gmaps4rails gem的情况下尝试——但我不够聪明，无法理解

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

#map {
  height: 400px;
  width: 100%;
}

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);
}

Marker.create(:name => 'Sydney', :latitude => -33.87, :longitude => 151.17)
Marker.create(:name => 'Uluru', :latitude => -25.363, :longitude => 131.044)

export GOOGLE_MAPS_API_KEY="AIza.............................."

rails s

<script src="//maps.google.com/maps/api/js?v3key=[API_KEY]"></script>