Ruby on Rails中的Google地圖JavaScript錯誤

我正嘗試使用Google地圖集成創建Ruby on Rails應用程序。Ruby on Rails中的Google地圖JavaScript錯誤

我來源：

<!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錯誤消失。

問題在哪裏，我該如何解決？

來源

2015-09-28 Daumantas Versockas

哪裏是你的'div.content'？ – omarvelous

'<%=yield %>'渲染它。 –

[Google MAP API Uncaught TypeError：無法讀取null的屬性'offsetWidth']的可能重複（http://stackoverflow.com/questions/11740663/google-map-api-uncaught-typeerror-cannot-read-property-offsetwidth -of-null） – dimakura

我相信在你的情況發生的是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)

來源

2015-09-28 20:39:03 JeffD23

沒有Turbolinks的解決方案的工作。 Turbolinks也不... –

將地圖腳本從中取出並放入。這應該解決它，但考慮將您的JavaScripts放在資產管道中，因爲這是標準做法。 – JeffD23

你的意思是單獨的'script.js'文件嗎？ –

Ruby on Rails中的Google地圖JavaScript錯誤

回答

相關問題