Javascript Google Maps V3 InvalidValueError Rails 5_Javascript_Ruby On Rails_Ruby_Google Maps_Google Maps Api 3

Javascript Google Maps V3 InvalidValueError Rails 5

javascript ruby-on-rails ruby google-maps google-maps-api-3

Javascript Google Maps V3 InvalidValueError Rails 5,javascript,ruby-on-rails,ruby,google-maps,google-maps-api-3,Javascript,Ruby On Rails,Ruby,Google Maps,Google Maps Api 3,我正在Rails 5 Ruby 2.4.0中构建一个应用程序，并尝试实现一个动态google地图，在地图上为PostgresDB中的每个位置放置一个标记我正在使用geocoder gem，这是分配我的lat和lng浮点值当我使用以下代码时：错误的屏幕截图：我对向rails应用程序添加动态地图比较陌生，不知道如何解决这个问题！我们将非常感谢您的帮助提前谢谢编辑1：添加脚本生成的输出：编辑2：添加错误截图：很确定这个错误是由你制作了一个标记数组引起的 var uluru = [

我正在Rails 5 Ruby 2.4.0中构建一个应用程序，并尝试实现一个动态google地图，在地图上为PostgresDB中的每个位置放置一个标记

我正在使用geocoder gem，这是分配我的lat和lng浮点值

当我使用以下代码时：

错误的屏幕截图：

我对向rails应用程序添加动态地图比较陌生，不知道如何解决这个问题！我们将非常感谢您的帮助

提前谢谢

编辑1：添加脚本生成的输出：

编辑2：添加错误截图：

很确定这个错误是由你制作了一个标记数组引起的

var uluru = [
 <% @locations.each do |location| %>
   { lat:<%= location.latitude %>, lng:<%= location.longitude %> },
 <% end %>
];

也可能是，当您使用ERB注入位置值时，它们会作为字符串而不是浮点数注入到这里

{lat:，lng:}

，因此您可能希望确保不会发生这种情况

编辑：我是如何做到这一点的例子 index.html.erb

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src='https://maps.googleapis.com/maps/api/js?key=<%= ENV["key_name"] %>'></script>

    <script type="text/javascript">
      google.maps.event.addDomListener(window, "load", initIndexMap);
    </script>
  </head>
  <body>
    <div>
      <%= content_tag "div", class: "index-map", id: "index-map", data: {json_markers: @json_parking_areas} do %>
      <% end %>
    </div>
  </body>
</html>


google.maps.event.addDomListener（窗口，“加载”，initIndexMap）；

index.js

function initIndexMap() {
  //get markers from id:#index-map content_tag
  var jsonMarkers = $("#index-map").data("jsonMarkers");
  //set center
  var center = new google.maps.LatLng(42.339169, -71.088474);
  //set bounds
  var bounds = new google.maps.LatLngBounds();
  
  //initialize map
  map = new google.maps.Map(document.getElementById('index-map'), {
    center: center,
    zoom: 4
  });

  //for loop to add markers          
  for (var i = 0; i <  jsonMarkers.length; ++i) {
    (function() {
      var latLng = {lat: jsonMarkers[i].lat, lng: jsonMarkers[i].lng};
      var infowindow = new google.maps.InfoWindow({
        content: jsonMarkers[i].infowindow
      });

      var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        icon: jsonMarkers[i].picture,
        label: jsonMarkers[i].title
      });    
      bounds.extend(marker.getPosition());
    })();
  }
}

函数initIndexMap（）{
//从id获取标记：#索引地图内容_标记
var jsonMarkers=$（“#索引映射”）.data（“jsonMarkers”）；
//居中
var center=new google.maps.LatLng（42.339169，-71.088474）；
//设定界限
var bounds=new google.maps.LatLngBounds（）；
//初始化映射
map=new google.maps.map（document.getElementById（'index-map'）{
中心:中心,，
缩放：4
});
//为循环添加标记
对于（var i=0；i

似乎您正在使用代码作为标记。如果要显示多个标记，则必须将它们作为or循环添加到数组中

  function initMap() {
    var uluru = [
     <% @locations.each do |location| %>
       { lat:<%= location.latitude %>, lng:<%= location.longitude %> },
     <% end %>
    ];
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
    });
    for (i = 0; i < uluru.length; i++) {  
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(uluru[i]['lat'], uluru[i]['lng']),
            map: map
        });
  }

函数initMap（）{
var uluru=[
{lat:，lng:}，
];
var map=new google.maps.map（document.getElementById（'map'）{
缩放：10，
});
对于（i=0；i

请复制粘贴该零件的生成代码。如lat和lng的显示内容？是的。问题似乎就在那里。好的，我去抓取更新后的信息。我想这就是您要找的信息。好的，使用此信息，我会发现一些错误，我会在上面发布：更新问题编辑#2是您可以找到问题的地方screenshot@ShawnWilson看起来您还需要一个

来关闭for循环，因此添加extea close修复了脚本，使其运行时无错误，但是映射不会显示任何内容。为此增加了新的问题。所以我猜这里也发生了一些重大事件，对吗？有点。

@json\u parking\u arears

变量是从数据库加载的标记数组，但一旦它到达index.html.erb，它将等待页面加载，调用

initIndexMap

，然后在页面上查找id为

索引映射的项目，并从中获取数据
var marker = new google.maps.Marker({
  position: uluru, #uluru is an array, not a LatLng
  map: map
});

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src='https://maps.googleapis.com/maps/api/js?key=<%= ENV["key_name"] %>'></script>

    <script type="text/javascript">
      google.maps.event.addDomListener(window, "load", initIndexMap);
    </script>
  </head>
  <body>
    <div>
      <%= content_tag "div", class: "index-map", id: "index-map", data: {json_markers: @json_parking_areas} do %>
      <% end %>
    </div>
  </body>
</html>

function initIndexMap() {
  //get markers from id:#index-map content_tag
  var jsonMarkers = $("#index-map").data("jsonMarkers");
  //set center
  var center = new google.maps.LatLng(42.339169, -71.088474);
  //set bounds
  var bounds = new google.maps.LatLngBounds();
  
  //initialize map
  map = new google.maps.Map(document.getElementById('index-map'), {
    center: center,
    zoom: 4
  });

  //for loop to add markers          
  for (var i = 0; i <  jsonMarkers.length; ++i) {
    (function() {
      var latLng = {lat: jsonMarkers[i].lat, lng: jsonMarkers[i].lng};
      var infowindow = new google.maps.InfoWindow({
        content: jsonMarkers[i].infowindow
      });

      var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        icon: jsonMarkers[i].picture,
        label: jsonMarkers[i].title
      });    
      bounds.extend(marker.getPosition());
    })();
  }
}

  function initMap() {
    var uluru = [
     <% @locations.each do |location| %>
       { lat:<%= location.latitude %>, lng:<%= location.longitude %> },
     <% end %>
    ];
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
    });
    for (i = 0; i < uluru.length; i++) {  
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(uluru[i]['lat'], uluru[i]['lng']),
            map: map
        });
  }