Ruby on Rails JavaScript 错误中的谷歌地图答案

【问题标题】：Google Maps in Ruby on Rails JavaScript errorRuby on Rails JavaScript 错误中的谷歌地图
【发布时间】：2015-09-28 20:12:27
【问题描述】：

我正在尝试使用 Google Maps 集成创建一个 Ruby on Rails 应用程序。

我的来源：

<!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 错误：

TypeError: null is not an object (evaluating 'a.offsetWidth')

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

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

【问题讨论】：

你的div.content在哪里？
<%=yield %> 渲染它。
Google MAP API Uncaught TypeError: Cannot read property 'offsetWidth' of null 的可能重复项
尝试了解决方案代码。没用……

标签： javascript ruby-on-rails ruby google-maps

【解决方案1】：

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

没有 Turbolinks 快速修复

使指向您的地图的链接选择退出 turbolinks。这会在单击链接时强制刷新整个页面。

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

使用 Turbolinks 修复

Turbolinks 非常酷。您仍然可以将它与谷歌地图一起使用，您只需要查看是否定义了google。如果未定义，此方法将异步加载谷歌地图，否则它将只运行您的 ready() 方法。

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)

【讨论】：

把地图脚本从中取出，放到中。这应该可以解决它，但请考虑将您的 javascript 放入资产管道中，因为这是标准做法。
您的意思是单独的script.js 文件吗？