RubyonRails中的Google地图JavaScript错误_Javascript_Ruby On Rails_Ruby_Google Maps

RubyonRails中的Google地图JavaScript错误

javascript ruby-on-rails ruby google-maps

RubyonRails中的Google地图JavaScript错误,javascript,ruby-on-rails,ruby,google-maps,Javascript,Ruby On Rails,Ruby,Google Maps,我正在尝试创建一个与谷歌地图集成的RubyonRails应用程序我的消息来源： <!DOCTYPE html> <html> <head> <title>Website</title> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>

我正在尝试创建一个与谷歌地图集成的RubyonRails应用程序

我的消息来源：

<!DOCTYPE html>

<html>
    <head>
        <title>Website</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"></script>

        <script type="text/javascript">

            function initialize() {

                var myLatlng = new google.maps.LatLng(56.794682, 25.224593);

                var mapOptions = {
                    zoom: 15,
                    center: myLatlng
                }

                var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: 'This is a location'
                });
            }

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

        </script>

        <script type="text/javascript">

            ready = function() { 

                //Current page ID
                var page_id = $('div.content').attr('id');

                //Navigation list of all pages
                var navigation_list = $("nav#navigation a");

                //Navigation list check
                navigation_list.each(function(a){

                    if ($(this).attr('id') == page_id) {

                        $(this).css("border-bottom", "3px solid #74c5bd");
                    }
                });
            }

            $(document).ready(ready)
            $(document).on('page:load', ready)

        </script>
    </head>

    <body>

        <%= render "layouts/header" %>
        <%=yield %>
        <%= render "layouts/footer" %>

    </body>
</html>

此外，不显示地图。当我重新加载页面时，映射最终出现，JavaScript错误消失

问题在哪里？我该如何解决它？

我认为在您的案例中发生的是TurboLink正在重新加载，而不是。您的自定义脚本正在运行，但google对象为空。这就是为什么重新加载头部时，在刷新整页后错误会清除的原因

没有TurboLink快速修复

使指向地图的链接退出TurboLink。这将在单击链接时强制刷新整个页面

<div id="some-div" data-no-turbolink>
  # Link to your Map Page
</div>

然后将函数调用更新为：

$(document).ready(loadMap)
$(document).on('page:load', loadMap)

你的部门内容在哪里？呈现它。解决方案代码可能重复。不起作用…请将地图脚本从中取出并放入。这应该修复它，但是考虑将JavaScript放入资产管道中，因为这是标准的做法。你是指单独的Script？js文件吗？

var loadMap = function() {
  if (typeof google === 'undefined' ) {
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' + 'libraries=places&'+'callback=ready';
      document.body.appendChild(script);
  } else {
    ready();
  }
};

$(document).ready(loadMap)
$(document).on('page:load', loadMap)