Question

我想在局部视图中显示谷歌地图，我使用jQuery调用它。以下是详细信息：

在我的dashboard.html.haml中：

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

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

在我的控制器中：

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.html.haml

#map-container
  #map-canvas

问题是点击= link_to 'Map', preview_map_static_pages_path, :remote => true时地图未显示。我做错了什么？抱歉英语不好。谢谢你的帮助：）

Answer 1

您正在运行Google地图javascript后使用javascript渲染地图/ _map.html，这就是您的地图无法加载的原因。尝试将google地图脚本包含到地图/ _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 maps initialize函数

$( "#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);

Google地图未在部分视图中显示

1 个答案: