Javascript 首次在rails中访问视图时，Google地图不会加载

我正在运行Rails 5.2.1应用程序，最近我在一个视图中添加了使用google maps API在地图中显示地址的选项。现在，它正在工作，但只有在我第一次访问视图之后。第一次不加载时，视图中没有显示任何内容。发生这种情况的原因是什么？ 我的js脚本

<script type="text/javascript">  
            handler = Gmaps.build('Google');  
            handler.buildMap({ provider: {maxZoom: 19}, internal: {id: 'map'}}, function(){  
            markers = handler.addMarkers([  
            { 
                "lat": <%= Float(@coordinates[0]) %>,  
                "lng": <%= Float(@coordinates[1]) %>,  
                "picture": {  
                "width":  32,  
                "height": 32,  
                },  
                "infowindow": "Restaurant: <%= @restaurant.name %>"  
            }  
            ]);  
            handler.bounds.extendWith(markers);  
            handler.fitMapToBounds();  
            });  
            </script>

handler=Gmaps.build（'Google'）；
handler.buildMap（{provider:{maxZoom:19}，internal:{id:'map'}}，function（）{
markers=handler.addMarkers（[
{ 
“lat”：，
“液化天然气”：，
“图片”：{
“宽度”：32，
“高度”：32，
},  
“信息窗口”：“餐厅：”
}  
]);  
handler.bounds.extendWith（markers）；
handler.fitMapToBounds（）；
});  

我使用

<div style='width: 100%'> 
            <div id="map" style='width: 100%; text-align: center; height: 400px;'>
         </div>
        </div>

另外，我在视图顶部加载以下脚本

<script src="//maps.google.com/maps/api/js?key=[My key number goes here]&callback=initialize"></script>  
<script src="//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"></script>  
<script src='//cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/infobox/src/infobox_packed.js' type='text/javascript'></script>
<script src='//underscorejs.org/underscore-min.js' type='text/javascript'></script>

我已经尝试了几件事（比如在API键旁边添加callback=initialize），但我还没能修复它