Question

更新：我发现了此问题的解决方案 - 请参阅本文末尾的评论。

原帖： 我无法在Ruby on Rails 3的视图页面中显示Google地图（API 3）。我正在尝试直接执行此操作，而不是使用GM4R gem，因此大多数Stack Overflow上的回复我都是我看到不适用于我的情况。我已成功在静态页面上创建地图，但未在模型的视图页面上创建地图。我的代码组织如下：

application.js（在apps / assets / javascripts中）：

...
//= require jquery
//= require jquery_ujs
//= require_tree .

googlemaps.js（顶级应用/资产/ javascripts）：

var map, marker, current_pos, initial_pos = new google.maps.LatLng(49.2649, -123.2351);

function updatePositionDisplay( latlng ) // updates the readout under the map with the supplied position
    {
       document.getElementById('event_latitude').value  = latlng.lat();
       document.getElementById('event_longitude').value = latlng.lng();
    }

function initializemap()
  {
    var mapOptions = { zoom: 14, center: initial_pos, mapTypeId: google.maps.MapTypeId.ROADMAP };
    if (document.getElementById('event_map'))
    { alert( 'There is a map')}
      else {alert('There is no map')}
    map = new google.maps.Map(document.getElementById('event_map'), mapOptions);
    if (map != null) {alert('Map object has been created')}

    updatePositionDisplay( initial_pos );
  }

google.maps.event.addDomListener(window, 'load', initializemap);

事件/ new.html.erb：

<h1>Create New Event:</h1>

<!-- Display map-->
<div id="event_map" style="width: 80%; height: 60%;"></div>

<%= render 'form' %>

<%= link_to 'Back', events_path %>

events / _form.html.erb（标准 - 由脚手架生成）：

<%= form_for(@event) do |f| %>
  <% if @event.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@event.errors.count, "error") %> prohibited this event from being saved:</h2>

      <ul>
      <% @event.errors.full_messages.each do |msg| %>
        <li><%= msg %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= f.label :name %><br />
    <%= f.text_field :name %>
  </div>
  <div class="field">
    <%= f.label :user_id %><br />
    <%= f.number_field :user_id %>
  </div>
  <div class="field">
    <%= f.label :latitude %><br />
    <%= f.text_field :latitude %>
  </div>
  <div class="field">
    <%= f.label :longitude %><br />
    <%= f.text_field :longitude %>
  </div>
  <div class="field">
    <%= f.label :startdatetime %><br />
    <%= f.datetime_select :startdatetime %>
  </div>
  <div class="field">
    <%= f.label :enddatetime %><br />
    <%= f.datetime_select :enddatetime %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

行为和问题摘要：

当我调用events / new时，我希望会发生的是我会看到一张地图，然后是一张表格。我已经验证（通过插入alert（）调用）调用initializemap函数并且map对象不为null（即，它被创建）。此外，表单中的纬度和经度框得到了正确填写，表明正确调用了updatePositionDisplay代码。但是，不会显示地图。

我对此感到非常困惑，因为我通过编写一个能够正确渲染地图的静态页面控制器来启动这个项目。

页面上呈现的代码如下所示：

<!DOCTYPE html>
<html>
<head>
  <title>MapApp Prototype</title>
  <!--For alternatives to loading external scripts on all pages, visit: http://railsapps.github.com/rails-javascript-include-external.html-->
  <script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
  <link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/checkins.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/events.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/scaffolds.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/static_pages.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/users.css?body=1" media="all" rel="stylesheet" type="text/css" />
  <script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/checkins.js?body=1" type="text/javascript"></script>
<script src="/assets/events.js?body=1" type="text/javascript"></script>
<script src="/assets/googlemaps.js?body=1" type="text/javascript"></script>
<script src="/assets/static_pages.js?body=1" type="text/javascript"></script>
<script src="/assets/users.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
  <meta content="authenticity_token" name="csrf-param" />
<meta content="SRh+VoCjXu3+LGmiH91+AByrXyNGEzv0nTXuZKbzfS8=" name="csrf-token" />
</head>
<body>

<h1>Create New Event:</h1>

<!-- Display map-->
<div id="event_map" style="width: 80%; height: 60%;"></div>

<form accept-charset="UTF-8" action="/events" class="new_event" id="new_event" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="SRh+VoCjXu3+LGmiH91+AByrXyNGEzv0nTXuZKbzfS8=" /></div>

... (details of form omitted)

</div>
  <div class="actions">
    <input name="commit" type="submit" value="Create Event" />
  </div>
</form>

<a href="/events">Back</a>

</body>
</html>

这对我来说都是正确的。对于我做错了什么或者静态页面和模型链接的视图页面之间有什么不同的任何见解或建议都是最受欢迎的。

更新所以似乎必须有一个event_map div的显式样式。我将以下代码添加到app / assets / stylesheets / events.css.scss：

#event_map { height: 300px; }

这使它工作。但是，有趣的是，我似乎无法将其更改为百分比表示法。如果我把它{高度：50％}，我再次得到一张空白地图。任何想法为什么会这样？我更喜欢生成一个灵活的布局，分配给地图的空间会自动调整到用户的浏览器窗口大小。

Google Map未在Ruby on Rails 3中显示

0 个答案: