Javascript Google地图没有在ajax中加载

我正在尝试组装一个带有ajax的Rails应用程序。问题是，调用页面加载的ajax部分没有显示Google地图。页面上还有其他内容，但谷歌地图没有

当我单击“刷新”时，带有地图的页面将按其应做的方式加载，但从那时起，当我单击链接时，地图将丢失—即使页面中的其他所有内容都在那里

包含“我的地图”的脚本甚至没有加载。我的意思是，当我将console.log（“hello”）放在脚本标记之间时，“hello”不会出现在我的控制台中。当我刷新页面时，它确实会出现，但在使用ajax链接时不会出现

有人知道原因吗，或者有代码可以帮我吗？我试过：

$(document).ready(function(){
google.maps.event.trigger(map, 'resize');
});

在我的show.html.erb的顶部，但无法使其工作。如果有任何帮助，我的地图脚本的代码是：

  <div id="map_canvas">


<script type="text/javascript">
console.log("hello") 
  var map;
  var markers = [];

  function initialize_google_maps() {
    var currentlatlng = new google.maps.LatLng(<%= @user.lat %>, <%= @user.lng %>);
    var zoom = <%= @kms_range %> > 9 ? 9 : 10;
    var myOptions = {
        zoom: zoom,
        center: currentlatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP, // ROADMAP, SATELLITE, HYBRID
        streetViewControl: false
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var marker = new google.maps.Marker({map: map, position: currentlatlng, icon:{oppacity:0}});
    map.setCenter(currentlatlng);
    map.setZoom(zoom);

    var circle = new google.maps.Circle({
        map: map,
        fillOpacity: 0,
        strokeWeight: 2,
        strokeOpacity: 0.7,
        radius: <%= @kms_range %>*1000,
    });
    circle.bindTo('center', marker, 'position');

  }

  function show_markers() {
    if (markers)
      for(i in markers) {
        markers[i].setMap(map);
      }
  }

  function add_marker(location) {
    marker = new google.maps.Marker({
      position: location,
      map: map
    });
    markers.push(marker);
    // markers.setVisible(false);
  }

  function initialize_markers() {
    <% (@reviews || []).each do |r| %>
      <% next unless r.lat && r.lng %>
      position = new google.maps.LatLng(<%= r.lat %>, <%= r.lng %>);
      add_marker(position);
    <% end %>
  }

  $(function() {
    initialize_google_maps();
    initialize_markers();
    show_markers();
  });

</script>

    </div>

你解决问题了吗？ 我以前也有同样的问题（地图没有通过ajax加载页面显示） 但我的问题是，我没有给出正确的lat和lng

也许您应该确保代码上的值是正确的

var myOptions = {
        zoom: zoom,<br>
        center: currentlatlng,<br>
        mapTypeId: google.maps.MapTypeId.ROADMAP, // ROADMAP, SATELLITE, HYBRID<br>
        streetViewControl: false<br>
    };

var myOptions={
缩放：缩放，

中心：CurrentLatling，

mapTypeId:google.maps.mapTypeId.ROADMAP，//路线图，卫星，混合

街景控制：错误

};

及

设置您的div宽度和高度，如

---

我记得google map需要宽度和高度

向我们展示ajax代码好的，现在就把它放上去。尝试对ajax使用

load（）

，因为

html（）

会去掉脚本标记。

load（）

有一个过滤机制，仅用于插入页面的一部分，并接受和执行代码。API文档中有更好的解释，为什么要重新加载地图？或者您正在尝试添加其他画布/地图？我在哪里加载地图两次？

var myOptions = {
        zoom: zoom,<br>
        center: currentlatlng,<br>
        mapTypeId: google.maps.MapTypeId.ROADMAP, // ROADMAP, SATELLITE, HYBRID<br>
        streetViewControl: false<br>
    };