Javascript 即使使用iframe，在RoR中实现Google地图的问题

我花了一整天的时间想让它发挥作用

完美工作的HTML版本

<style type="text/css">
    #map-container {
        padding: 6px;
        border-width: 1px;
        border-style: solid;
        border-color: #ccc #ccc #999 #ccc;
        -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
        -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
        box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
        width: 90%;
    }

    #map {
        width: 100%;
        height: 100%;
    }

</style>

<script src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<script type="text/javascript" src="http://www.loadmax.com/files/Hotload.json"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script>


<script type="text/javascript">
    function initialize() {
        var center = new google.maps.LatLng(42.8777416,-97.3809789);
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 4,
            center: center,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var markers = [];
        for (var i = 0; i < data.count; i++) {
            var dataPhoto = data.photos[i];
            var latLng = new google.maps.LatLng(dataPhoto.origin_lng,
                    dataPhoto.origin_lat);
            var marker = new google.maps.Marker({
                position: latLng
            });
            markers.push(marker);
        }
        var markerCluster = new MarkerClusterer(map, markers);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

<div id="map-container"><div id="map"></div></div>

#地图容器{
填充：6px；
边框宽度：1px；
边框样式：实心；
边框颜色：#ccc#ccc#999#ccc；
-webkit盒阴影：rgba（64,64,64,0.5）0 2px 5px；
-moz盒阴影：rgba（64,64,64,0.5）0 2px 5px；
盒影：rgba（64,64,64,0.1）0 2px 5px；
宽度：90%；
}
#地图{
宽度：100%；
身高：100%；
}
函数初始化（）{
var center=new google.maps.LatLng（42.8777416，-97.3809789）；
var map=new google.maps.map（document.getElementById（'map'）{
缩放：4，
中心:中心,，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var标记=[]；
对于（变量i=0；i

当我尝试在rails项目中实现此功能时：

要么将其全部添加到html.erb文件中，要么将其分解并将所有内容放在应该放的地方

我甚至尝试过使用iframe，但仍然无法将其实现到rails应用程序中

<iframe src="url/to/map.html"></iframe>

---

是不是有什么东西我错过了。。。我知道html页面工作得非常好

我使用

1：将其添加到您的文件中

gem 'gmaps4rails'

2：在控制器中定义一个变量：

@map_loc = Gmaps4rails.build_markers(User.all) do |user, marker|
  marker.lat user.coordinates.last
  marker.lng user.coordinates.first
end

3：在视图中：

map{:style=>'height: 300px;'}
= javascript_include_tag "//maps.google.com/maps/api/js?v=3.13&sensor=false&libraries=geometry"
= javascript_include_tag "//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js"
- content_for :scripts do
:javascript
$(function(){
  handler = Gmaps.build('Google');
  handler.buildMap({ provider: {maxZoom: 17}, internal: {id: 'map'}}, function(){
    markers = handler.addMarkers(#{@map_loc.to_json});
    handler.bounds.extendWith(markers);
    handler.fitMapToBounds();
  });
});