Javascript Can'；在Rails应用程序上看不到我使用谷歌地图添加的位置地图_Javascript_Ruby On Rails_Ruby_Google Maps_Model View Controller

Javascript Can'；在Rails应用程序上看不到我使用谷歌地图添加的位置地图

javascript ruby-on-rails ruby google-maps model-view-controller

Javascript Can'；在Rails应用程序上看不到我使用谷歌地图添加的位置地图,javascript,ruby-on-rails,ruby,google-maps,model-view-controller,Javascript,Ruby On Rails,Ruby,Google Maps,Model View Controller,在尝试复制目录网站时，我需要我的“位置”使用谷歌地图在页面上显示位置。以下是我迄今为止所做的工作：我有一个使用谷歌地图的API密钥 2º为了运行地图，需要经度和纬度，因此，为了转换坐标和地址，我使用了一个称为geocoder的gem 3º我通过运行迁移将纬度和经度属性（作为浮点类型）添加到数据库中，并在检查迁移文件后对其进行迁移 4º根据文档，我更新了我的Place.rb模型，以确保地理编码地址得到验证 5º我也用坐标字段更新了位置视图 6º在遵循谷歌开发者指南之后，以下是我所做的 @/app

在尝试复制目录网站时，我需要我的“位置”使用谷歌地图在页面上显示位置。以下是我迄今为止所做的工作：

我有一个使用谷歌地图的API密钥

2º为了运行地图，需要经度和纬度，因此，为了转换坐标和地址，我使用了一个称为geocoder的gem

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

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

5º我也用坐标字段更新了位置视图

6º在遵循谷歌开发者指南之后，以下是我所做的

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

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

<div id="map-canvas" style = "width:230px; height:230px"></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>

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

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

<div id="map-canvas" style = "width:230px; height:230px"></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>

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

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

<div id="map-canvas" style = "width:230px; height:230px"></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>


var映射；
函数initMap（）{
map=new google.maps.map（document.getElementById（'map'）{
中心：{lat:，lng:}，
缩放：8
});
}
美元（“.score”）.raty({
斯塔隆：“，
starOff:“，
分数：''，
只读：正确
});
美元（“.average”）.raty({
斯塔隆：“，
starOff:“，
分数：''，
只读：正确
});

我刷新页面，所有的东西都会显示出来，除了我使用谷歌地图所期望的地点

以防万一，下面是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>

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


MyYelp应用程序
正确%>
正确%>
X

以及App/Views/Places/Show.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>

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


地址
电话
网站
说明
人们的评论
新评论
所有评论
var映射；
函数initMap（）{
map=new google.maps.map（document.getElementById（'map'）{
中心：{lat:，lng:}，
缩放：8
});
}
美元（“.score”）.raty({
斯塔隆：“，
starOff:“，
分数：''，
只读：正确
});
美元（“.average”）.raty({
斯塔隆：“，
starOff:“，
分数：''，
只读：正确
});

地图元素的id-

地图画布

-和地图

var

document.getElementById（'map'）

-不匹配

map元素（

map canvas

）的

id

与

map

var（

document.getElementById（'map'）

）不匹配。除此之外，尝试删除脚本的

异步延迟

标记，将

脚本

放在

正文

标记之前，并描述发生的情况。此外，在哪里调用

initMap

函数？body标记之前的脚本是不相关的，但是所有其他的机会都使它工作。除此之外，我在脚本标记中的API键之后调用了initMap函数，使用“my_key&callback=initMap”太棒了！你需要我把这个写进一个答案里，这样你就可以选择我了吗？：）当然，没问题。