Javascript Gmaps4rails-Rails 4

我正试图找出如何获得一个地图来显示用户创建的地址

我有一个地址模型和一个项目模型

这些协会是：

地址:

 belongs_to :addressable, :polymorphic => true

项目：

has_many :addresses, as: :addressable
      accepts_nested_attributes_for :addresses,  reject_if: :all_blank, allow_destroy: true

在address.rb中，我有：

def full_project_address_formal
    [self.first_line, middle_line, last_line, country_name].compact.join("<br>").html_safe
  end

geocoded_by :full_project_address_formal   # can also be an IP address
after_validation :geocode      

在我的展示页面中，我有：

def first_line
    [unit, street_number, street.titlecase].join(' ')
  end

  def middle_line
    if self.building.present? 
    end
  end

  def last_line
    [city.titlecase, region.titlecase, zip].join('   ')
  end

  def country_name
    country = self.country
    ISO3166::Country[country]
  end

<%= @project.addresses.first.project_address %>

在我的application.js中，我有：

//= require gmap3.min
//= require underscore

在我的address.rb中，我有：

def full_project_address_formal
    [self.first_line, middle_line, last_line, country_name].compact.join("<br>").html_safe
  end

geocoded_by :full_project_address_formal   # can also be an IP address
after_validation :geocode      

在我的地址控制器中，我有（我不知道为什么-我从SO上的另一篇文章中复制了它-尽管我的地址模型在模式中有纬度和经度）：

我完全不知道下一步该怎么办。我尝试了至少30种不同的方式在地图上显示地址

<strong>PROJECT HQ</strong>
                                <ul class="map-list medium-text">
                                    <%= @project.addresses.first.project_address %>
                                    <!-- <li><span data-icon="&#xe01e;"></span>mail@develpixel.com</li> -->
                                </ul>

                            </div>
                        </div>
                        <div class="two-cols-column">
                            <div id="map">

                            </div>
                        </div>

我迷路了，被卡住了。有人知道如何从我现在的位置到我可以在节目中找到地址并制作地图的地方吗

第二次尝试。观看了此YOU TUBE视频后：

我仍然被卡住，但不确定如何解决此问题。我的完整地址设置现在是：

宝石：

application.js

//= require underscore
//= require gmaps/google

供应商/assets/javascript/下划线.js

我复制并粘贴了整个下划线生产版本。在视频中，这似乎是一个未注释的行。我找不到。相反，我有一长页的胡言乱语

地址模型：

class Address < ActiveRecord::Base


  geocoded_by :full_address   # can also be an IP address
  before_save :capitalise_address
  before_save :upcase_zip
  # --------------- associations

    belongs_to :addressable, :polymorphic => true

  # --------------- scopes

  # --------------- validations
    validates_presence_of :street_number, :street, :zip, :country 


  # --------------- class methods

  def first_line
    [unit, street_number, street.titlecase].join(' ')
  end

  def middle_line
    if self.building.present? 
    end
  end

  def last_line
    [city.titlecase, region.titlecase, zip].join('   ')
  end


  def country_name
    country = self.country
    ISO3166::Country[country]
  end


  def full_address
    [self.first_line, middle_line, last_line, country_name].compact.join("<br>").html_safe
  end


  after_validation :geocode#, if  self.full_address.changed? 


end

我不知道为什么这是在索引操作中。我正在尝试使用项目/显示操作。我不明白上面步骤的原因

项目显示：

<div id="map">
    <%= render partial: "address" %>
</div>

并添加使我的部分内容：

<script src="//maps.google.com/maps/api/js?v=3.18&sensor=false&client=&key=&libraries=geometry&language=&hl=&region="></script> 
<script src="//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js"></script>
<script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox_packed.js' type='text/javascript'></script> <!-- only if you need custom infoboxes -->


    <div style='width: 800px;'>
        <div id="geolocation" style='width: 800px; height: 400px;'></div>
    </div>

---

感谢下面的Max帮助我从我的js文件中删除“.coffee”扩展名。现在，地图应该在一个空白处。

如果我理解正确，您希望在项目的显示页面上显示地图以及项目的地址

@hash变量（来自教程）包含在地图上创建标记所需的信息（例如纬度、经度等），它用作

markers=handler.addMarkers（），然后实际添加带有该信息的标记

在您的情况下，因为您需要project的show页面上的映射，所以您应该在ProjectsController的show action中设置@hash，并将@addresses设置为您希望在页面上显示的任何地址—可能是@project.addresses，其中@project value设置在@addresses之前

我认为您的lat和lng存储在名为lat和lng的字段/列中，而不是在名为lat和lng的字段/列中，在这种情况下，您需要像下面这样明确地提到它们-
地理编码：full\u project\u address\u formal，lation:：lat，longitude:：lng
。您应该确保纬度和经度字段的值确实存在，以便数据库中的地址安全

def show
  @project = Project.find(params[:id])
  @addresses = @project.addresses

  @hash = Gmaps4rails.build_markers(@addresses) do |address, marker|
    marker.lat address.latitude
    marker.lng address.longitude
    marker.infowindow address.full_project_address_formal
  end
end

一旦在ProjectsController的show操作中设置了@hash的值，就可以在projects/show视图中的脚本标记中访问它。首先，您可以保持显示视图的简单性，如下所示

<script src="//maps.google.com/maps/api/js?v=3.18&sensor=false&client=&key=&libraries=geometry&language=&hl=&region="></script> 
<script src="//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js"></script>
<script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox_packed.js' type='text/javascript'></script> <!-- only if you need custom infoboxes -->

<div style='width: 800px;'>
  <div id="map" style='width: 800px; height: 400px;'></div>
</div>

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


handler=Gmaps.build（'Google'）；
buildMap（{provider:{}，internal:{id:'map'}}，function（）{
markers=handler.addMarkers（）；
handler.bounds.extendWith（markers）；
handler.fitMapToBounds（）；
});

希望这有帮助。如果您被困在某个地方或需要帮助，请告诉我。
从开始
gmaps4rails
只给你足够的时间去做，但它并不能代替你真正了解自己在做什么。您还需要将模型配置为从地址字段对lat/lng进行实际地理编码。你真的应该阅读-这不是你可以复制粘贴的东西。谢谢你的评论。在重新阅读了地理编码器文档之后，我在目前为止所确定的内容中找不到任何错误。如果你能看到我做错了什么（这让你有理由做出这样的评论），我将非常感谢你帮助我找出问题所在。在重新阅读了谷歌地图api指南，观看了YouTube（无声）教程并浏览了至少20个其他视频资源之后，我“我还是会出错。我真的不明白为什么人们会费心去评论你刚刚拥有的自然。它们肯定没有帮助。您正在咖啡脚本文件中使用javascript。Coffescript不是超集（与Sass不同）。将扩展名更改为.jsp您可以尝试本教程-。它帮助我用地图配置模型并正确显示。可能需要进行一些调整。如果你有任何问题，你可以问我，我会尽力帮助你。
<script src="//maps.google.com/maps/api/js?v=3.18&sensor=false&client=&key=&libraries=geometry&language=&hl=&region="></script> 
<script src="//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js"></script>
<script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox_packed.js' type='text/javascript'></script> <!-- only if you need custom infoboxes -->

handler = Gmaps.build('Google');
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
  markers = handler.addMarkers(<%=raw @hash.to_json %>);
  handler.bounds.extendWith(markers);
  handler.fitMapToBounds();
});

ExecJS::RuntimeError at /projects/26
SyntaxError: [stdin]:13:32: unexpected <

var handler = Gmaps.build('Google');
handler.buildMap({ internal: {id: 'geolocation'} }, function(){
  if(navigator.geolocation)
    navigator.geolocation.getCurrentPosition(displayOnMap);
});

function displayOnMap(position){
  var marker = handler.addMarker({
    lat: position.coords.latitude,
    lng: position.coords.longitude
  });
  handler.map.centerOn(marker);
};

<script src="//maps.google.com/maps/api/js?v=3.18&sensor=false&client=&key=&libraries=geometry&language=&hl=&region="></script> 
<script src="//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js"></script>
<script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox_packed.js' type='text/javascript'></script> <!-- only if you need custom infoboxes -->


    <div style='width: 800px;'>
        <div id="geolocation" style='width: 800px; height: 400px;'></div>
    </div>

ExecJS::RuntimeError at /projects/26
SyntaxError: [stdin]:2:1: reserved word 'var'

def show
  @project = Project.find(params[:id])
  @addresses = @project.addresses

  @hash = Gmaps4rails.build_markers(@addresses) do |address, marker|
    marker.lat address.latitude
    marker.lng address.longitude
    marker.infowindow address.full_project_address_formal
  end
end

<script src="//maps.google.com/maps/api/js?v=3.18&sensor=false&client=&key=&libraries=geometry&language=&hl=&region="></script> 
<script src="//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js"></script>
<script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox_packed.js' type='text/javascript'></script> <!-- only if you need custom infoboxes -->

<div style='width: 800px;'>
  <div id="map" style='width: 800px; height: 400px;'></div>
</div>

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