在 Rails 应用程序上看不到我使用谷歌地图添加的位置的地图答案

【问题标题】：Can't see on a Rails app a map for locations that I added using google maps在 Rails 应用程序上看不到我使用谷歌地图添加的位置的地图
【发布时间】：2017-10-31 03:00:00
【问题描述】：

在尝试复制目录网站时，我需要我的“地点”使用 Google 地图在页面上显示位置。这是我到目前为止所做的：

1º 我获得了使用 Google 地图的 API 密钥。

2º 为了地图的功能需要经度和纬度，因此，为了转换和寻址到坐标，我使用了一个名为 geocoder 的 gem。

3º 我通过运行迁移并在检查迁移文件后将纬度和经度属性（作为浮点类型）添加到数据库中。

4º 根据文档，我更新了我的 Place.rb 模型以确保地理编码地址得到验证。

5º 我也用坐标字段更新了 Places 视图。

6º 遵循 Google 开发者指南后，我做了以下工作。

@/app/views/layouts/application.html.erb：

<script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY"
    async defer></script>

@/app/views/places/show.html.erb：

<div id="map-canvas" style = "width:230px; height:230px"></div>

@./app/views/places/show.html.erb：

<script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: <%= @place.latitude %>, lng: <%= @place.longitude %>},
          zoom: 8
        });
      }

      <% @reviews.each do |review| %>
        $(".score_<%= review.id %> ").raty({
          starOn: "<%= image_path('star-on.png') %>",
          starOff: "<%= image_path('star-off.png') %>",
          score: '<%= review.score %>',
          readOnly: true
        });
      <% end %>

        $(".average").raty({
          starOn: "<%= image_path('star-on.png') %>",
          starOff: "<%= image_path('star-off.png') %>",
          score: '<%= @place.total_average_rating %>',
          readOnly: true
        });      

</script>

我刷新页面，所有内容都显示出来了，除了我使用 Google 地图所期望的 Places 位置。

以防万一，这里是 App/Views/Layouts/Application.html 文件的完整脚本：

<!DOCTYPE html>
<html>
<head>
  <title>MyYelp App</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>

  <script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY"
    async defer></script>

</head>
<body>

<%= render "layouts/header" %>

<% flash.each do | type, message | %>
    <div class="alert alert-info fade-in">
        <button class="close" data-dismiss="alert">X</button>
        <%= message %>
    </div>
<% end %>

<% if current_page?(root_path) %>
  <div class="landing">
<% else %>
  <div class="container">
<% end %>

<%= yield %>
</div>

</body>
</html>

还有 App/Views/Places/Show.html 文件：

<div class="row">
  <div class="col-md-3">
    <h3><%= @place.name %></h3>

    <div class="average">

    </div>

    <p><strong>Adress</strong><%= @place.address %></p>
    <p><strong>Phone</strong><%= @place.phone %></p>
    <p><strong>Website</strong><%= @place.website %></p>
    <p><strong>Description</strong><%= @place.description %></p>
    <div id="map-canvas" style = "width:230px; height:230px"></div>
  </div>

  <div class="col-md-9">
    <h3>Reviews by People</h3>
    <% if current_user %>
    <h5>New Review</h5>
    <%= render 'reviews/form' %>
    <h5>All Reviews</h5>
    <%= render @reviews %>
    <% end %>
  </div>

</div>

<script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: <%= @place.latitude %>, lng: <%= @place.longitude %>},
          zoom: 8
        });
      }

      <% @reviews.each do |review| %>
        $(".score_<%= review.id %> ").raty({
          starOn: "<%= image_path('star-on.png') %>",
          starOff: "<%= image_path('star-off.png') %>",
          score: '<%= review.score %>',
          readOnly: true
        });
      <% end %>

        $(".average").raty({
          starOn: "<%= image_path('star-on.png') %>",
          starOff: "<%= image_path('star-off.png') %>",
          score: '<%= @place.total_average_rating %>',
          readOnly: true
        });      
</script>

【问题讨论】：

地图元素的id (map-canvas) 和map var (document.getElementById('map')) 不匹配。除此之外，尝试删除脚本中的async defer 标记并将script 放在body 标记之前并描述会发生什么。另外，initMap 函数在哪里调用？
body 标签之前的脚本无关紧要，但所有其他机会使它起作用。除此之外，我在脚本标签内的 API 密钥之后调用了 initMap 函数，并带有“MY_KEY&callback=initMap”
太棒了！你需要我把这个放在答案中，所以你可以选择我吗？ :)
当然，没问题。

标签： javascript ruby-on-rails ruby google-maps model-view-controller

【解决方案1】：

您的地图元素 ID - map-canvas - 和地图 var - document.getElementById('map') - 不匹配。

【讨论】：