2013-11-27 72 views
2

我試圖在我的Rails 4應用上顯示簡單的Google地圖。 我選擇靜態包含代碼直到我開始工作。 在我_head.html.erb部分,我有:Rails 4:谷歌地圖不顯示

<head> 
    <title><%= content_for?(:title) ? yield(:title) : t('website.name') %></title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %> 
    <%= javascript_include_tag "application", "data-turbolinks-track" => true %> 
    <%= yield(:google_maps_api) if content_for?(:google_maps_api) %> 
    <%= csrf_meta_tags %> 
</head> 
另一種觀點認爲

然後,我有一個叫做部分是_google_map.html.erb執行以下操作:

<% content_for(:google_maps_api) do %> 
<%= javascript_include_tag "https://maps.googleapis.com/maps/api/js?key=xyz&sensor=false" %> 
<script type="text/javascript"> 
    function initialize() { 
    var mapOptions = { 
     center: new google.maps.LatLng(-34.397, 150.644), 
     zoom: 8 
    }; 
    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 
<% end %> 

<div id="map-canvas" style="width: 100%; height: 100%"></div> 

當我看在源代碼中,js和div正在正確輸出到頁面。 但是,不顯示地圖。請注意,我的application.js文件中有以下內容

//= require jquery 
//= require jquery.turbolinks 
//= require jquery_ujs 
//= require jquery.ui.datepicker 
//= require twitter/bootstrap 
//= require turbolinks 
//= require_tree . 

任何想法爲什麼地圖不顯示? 謝謝!

+0

您是否嘗試禁用turbolinks? – kobaltz

+0

是的,我已經嘗試過了。 – DaniG2k

回答

8

如果div正在填充它,但只是不可見,你可能想檢查高度。要使height: 100%正常工作,它需要位於具有特定高度的容器中。要查看身高是否是問題,請嘗試如下所示:

<div id="map-canvas" style="width: 400px; height: 400px"></div> 
+1

這樣做的竅門!我已經嘗試使用pizels,但也許我做了一個太小的地圖(250x250)? – DaniG2k

+0

也爲我工作。谷歌文檔說它將其設置爲100%WxH,通常情況下,但在某些響應情況下,您需要將像素作爲WxH。 – jbnunn