gmaps4rails沒有顯示地圖

Question

鑒於

<div style='width: 800px;'>
  <div id="map" style='width: 800px; height: 400px;'></div>
</div>

<script type="text/javascript">
markers = handler.addMarkers(<%=raw @hash.to_json %>);
</script>

在application.js中

handler = Gmaps.build('Google');
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
  markers = handler.addMarkers([
    {
      "lat": 0,
      "lng": 0,
      "picture": {
        "url": "http://people.mozilla.com/~faaborg/files/shiretoko/firefoxIcon/firefox-32.png",
        "width":  32,
        "height": 32
      },
      "infowindow": "hello!"
    }
  ]);
  handler.bounds.extendWith(markers);
  handler.fitMapToBounds();
});

標頭中還包含underscore.js

<script src="//maps.google.com/maps/api/js?v=3.18&sensor=false&client=&key=&libraries=geometry&language=&hl=&region="></script> 
<script src="//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js"></script>

但仍然沒有顯示地圖.....任何人都可以幫助我..這些是控制台的兩個錯誤

ReferenceError: google is not defined
ReferenceError: handler is not defined

Answer 1

將js代碼直接放在視圖中是一件壞事。 嘗試以其他方式解決此問題-像這樣將所有“映射代碼”放入document.ready處理程序中

$(document).ready(function() {
    // put your code for initialising map  
});

同樣在您的視圖中，將代碼包裝在處理程序中：

<script type="text/javascript">
$(document).ready(function() {
    markers = handler.addMarkers(<%=raw @hash.to_json %>);
});
</script>

它應該工作