javascript - Google map 未以部分 View 显示

Question

我想在部分 View 中显示谷歌地图，我使用 jQuery 称之为它。详细信息如下:

在我的dashboard.html.haml中:

= link_to 'Map', preview_map_static_pages_path,  :remote => true

.col-sm-4.col-md-10
      #dashboard_preview

在我的 Controller 中:

def preview_map
        respond_to do | format |
            format.js {render :layout => false}
        end
end

在我的preview_map.js.erb中

$( "#dashboard_preview" ).html( "<%= escape_javascript( render "map/map" ) %>" );

还有我的 map /_map.html.haml

#map-container
  #map-canvas

问题是当我点击 = link_to 'Map', Preview_map_static_pages_path, :remote => true 时， map 未显示。我做错了什么？抱歉英语不好。感谢您的帮助:)

Answer 1

在运行 google map javascript 后，您将使用 javascript 渲染 map/_map.html，这就是您的 map 无法加载的原因。尝试将谷歌地图脚本包含到您的map/_map.html.haml

#map-container
  #map-canvas

%script(src="https://maps.googleapis.com/maps/api/js?key=API_KEY")
:javascript
  var mapOptions = {
    center: { lat: -34.397, lng: 150.644},
    zoom: 8
  };
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

另一种选择是在 Preview_map.js.erb 中渲染 map/_map 后调用 google map 初始化函数

$( "#dashboard_preview" ).html( "<%= escape_javascript( render "map/map" ) %>" );
var mapOptions = {
  center: { lat: -34.397, lng: 150.644},
  zoom: 8
};
var map = new google.maps.Map($("#map-canvas")[0], mapOptions);